「サルでもわかるGit入門」がPWAに対応しました

サルでもわかるGit入門はサル先生のGit入門に改名しました。

サルでもわかるGit入門がPWAに対応しました。

iOSやAndroidのスマートフォンのホーム画面にサルでもわかるGit入門を追加することでネイティブアプリのように起動し、ブラウザよりも高速に閲覧することが可能になります。

 

こんにちは。
ヌーラボのマーケティング課所属のレオです。
私はヌーラボが運営するサイトやCacooの開発をサポートしたりとヌーラボ内を横断しているフロントエンドエンジニアです。

 

今回はレガシーな構成からNuxt.jsにリプレイスしたサルでもわかるGit入門を今更ながらPWAに対応させたので、かんたんにご紹介します。

 

そもそもPWAとは

PWAとはProgressive Web Apps（プログレッシブウェブアプリ）の略です。

通常のWebサイト / Webアプリはブラウザ上で動作しますが、PWAはブラウザだけでなく、デスクトップにインストールしたり、モバイルのホーム画面に追加することでインストール型のネイティブアプリのようなユーザー体験を提供する技術です。

 

またPWAは高速＆高信頼性を提唱しています。起動スピードの速さやオフライン状態でもアプリとして機能することがPWAの基本的な要件となっています。

 

なぜPWA化しようと思ったか

サルでもわかるGit入門は2012年に制作されたサイトで、ピュアなhtml,cssなどで構成されていました。

現在は私を中心にマーケティング課が運営を行うようになり、修正作業や運用面などの管理体制をよりよくするためにVue.jsのプログレッシブフレームワークであるNuxt.jsの静的サイト機能を使用しレスポンシブにも対応してリプレイスし運用を行っています。

左：旧サルでもわかるGit入門 / 右：新サルでもわかるGit入門

 

サルでもわかるGit入門はGit初学者やコマンドやGitの運用を忘れてしまった際に確認できるコンテンツとして提供しており、大変訪問者数が多いサイトです（2018年8月には書籍化もされました）。

 

そこで、モバイルのホーム画面にサルでもわかるGit入門を並べて、ネイティブアプリのように見たい時にサクッと見れるユーザー体験を提供できれば、よりサルでもわかるGit入門を可愛がっていただけるのではないかと思いPWA対応にすることにしました。

 

また、Nuxt.jsでは便利なPWAモジュールが用意されており、比較的簡単にPWA対応ができるということもあり、私の背中をさらに押してくれました。

 

PWAのメリット・デメリット

ユーザーにとって一番のメリットはネイティブアプリのような体験ができるということではないでしょうか。ブラウザを起動する手間が省け、アドレスバーやツールバーが非表示になりページ間を高速に移動できるのでユーザーはより一層コンテンツに集中できます。

 

開発者にとってのメリットもあります。一般的なWeb技術で開発が可能となり、アプリ審査も不要なので、ネイティブアプリ制作にリソースを割けないプロジェクトにも最適と言えます。

またPWAではプッシュ通知を送信することができるのでユーザーとの接触機会の向上にも期待できます。（※ iOSはプッシュ通知未対応）

 

まさにPWAはWebサイト / Webアプリとネイティブアプリのいいとこ取りと言った感じです。

 

もしデメリットを上げるとしたらPWAを導入するための作業リソースや、Service Workerの仕組み・活用方法を理解するための学習コストなどが挙げられるでしょうか。

 

まずはPWAを体験してみよう

早速ですがサルでもわかるGit入門をお使いのデバイスに追加、インストールしてみてください。

 

モバイルのホーム画面に追加する

iOSとAndroidでは少し手順が異なりますが、誰でも簡単に数ステップでホーム画面に追加できます。

Androidの場合

AndroidではPWA対応のサイトにアクセスすると、画面下にホームススクリーン追加のポップアップが表示されますので、クリックしてホームスクリーンに追加してください。

Androidの場合（左：サイトにアクセスしポップアップ表示 / 右：ポップアップをクリックし追加）

iPhoneの場合

iPhoneの場合、Androidのようにポップアップはでませんが、簡単に追加できますので、動画にて紹介します。

iPhoneの場合

 

デスクトップにインストールする

ブラウザをGoogle Chromeでご利用の場合、サルでもわかるGit入門にアクセスするとアドレスバーの右端にPWAのインストールを促す+ボタンが表示されますので、クリックするとパソコンにPWAがインストールされ、サルでもわかるGit入門のデスクトップ版のPWAがすぐに起動します。

デスクトップの場合（Google Chrome）

 

PWA化する一般的な作業の流れ

すでにWebサイト / Webアプリを運用中であればすぐにでもPWAにすることができます。特別なフレームワークやライブラリは必要ありません。

 

もしReact、Vue、Angularなどのフレームワークをお使いであればPWAのモジュールをインストールし必要なファイルなどを準備し導入できます。

 

今回はモジュールなどを使用しないPWA化するための基本的な作業の流れについてご紹介します。

 

PWA化の全体の流れ

既存のサイトをPWAにするためには、下記手順が必要になります。

1. HTTPSに対応する
2. manifest.jsonを設置する
3. Service Workerを有効にする

 

1. HTTPSに対応する

手順3のService Workerを利用するためにはHTTPS対応が必須になりますので、まずサイトをHTTPSに対応させましょう。仮にPWAに対応させない場合でも、セキュリティー強化のために、HTTPSはやっておくべき対応です。

 

2.manifest.jsonを設置する

manifest.json（以下、ウェブアプリマニフェスト）を作成しサイトに設置します。

ウェブアプリマニフェストはシンプルなJSONファイルで、ユーザーがPWAを起動した際の挙動や見た目、アイコンなどを設定するためのファイルです。

ちなみにiOSのSafariではウェブアプリマニフェストがまだサポートされていません。

詳細な設定方法についてはこちらを参照ください。

 

3.Service Workerを有効にする

Service Workerはバックグラウンドで実行できるスクリプトのことで、オフライン体験やバックグラウンド同期、プッシュ通知などのネイティブアプリでしかできなかった機能がWebで提供できる技術です。

詳細な設置方法についてはこちらを参照ください。

 

今回PWA化してみた所感

サルでもわかるGit入門はNuxt.js（Vue.js）を使っていたため、PWAモジュールのインストールで簡単にPWAに対応させることができました。

作業途中の躓きもなく動作確認など含め1時間程度で作業を終えることができました。

作業にあたり特別難しいことはありませんでしたが、Service Workerの仕組みやライフサイクルを理解しキャッシュ戦略を立てることができるので、まだまだパフォーマンス改善の余地がありそうです。

 

実際にPWAを導入してみて、私自身もホーム画面やデスクトップでPWAを使うようになり、PWAのパフォーマンスの良さや体験に惹かれてしまいました。

 

最後に

サルでもわかるGit入門にPWAを導入し、皆様にいち早く報告したく、すぐに今回の記事にしました。実際に使っていただいた感想や効果などはこれから測定していこうと思います。

 

引き続き、サルでもわかるGit入門をよろしくお願いします。

今後も必要であればどんどんPWA化を進めるべくPWAマンとして頑張っていきます。