CodeIQ MAGAZINECodeIQ MAGAZINE

Google宇都宮佑亮@uskay氏が語る「今からでも遅くない!Progressive Web Apps超入門」

2018.01.31 Category:勉強会・イベント Tag: , , ,

  • 28
  • このエントリーをはてなブックマークに追加

Webアプリはネイティブアプリと比べてロードが遅い、通知が出せない、実行が遅いといった課題を持つ。だがProgressive Web AppとWebAssemblyを活用し、ネイティブアプリと遜色のない速さを実現させたサイトも登場している。
html5j Webプラットフォーム部では今回「Progressive Web AppとWebAssembly」をテーマに勉強会を開催した。
by 馬場美由紀 (CodeIQ中の人)

Google宇都宮さんによるPWAの基本解説

2017年12月19日に開催された「html5j Webプラットフォーム部 第19回勉強会」が取り上げた技術は「Progressive Web App(PWA)とWebAssembly(WASM)」。ロードが遅い、通知が出せない、実行が遅いというWebアプリが抱える課題に有効な技術だ。

今回の勉強会の目的はこの2つの技術を活用して、「Hello world」を作れるようになること。PWAとWASMに関して日本で3本の指に入るとも言われるエキスパートたちが講師を務めた。

最初に登壇したのはGoogleに所属する宇都宮佑亮@uskay氏。セッションタイトルは、「今からでも遅くない!Progressive Web Apps超入門」。Googleではモバイルソリューションコンサルタントというロールを担っている。

Webの利点はリーチ力が優れていることだ。20億デバイスとつながっており、Web全体では50億デバイスとコンテンツ配信ができる。こんなエコシステムはない。

だが、Webは電車やバスの中ではロードが遅かったり、レスポンシブでなかったり、コンテンツが動き回ったり、画像が上から差し込んでレイアウトがずれたりするものもある。

2015年にChromeのチームに指標によると、ロードは1秒以下。今ではTime to Interactiveでも5秒以下が良いと言われている。これを満たすべく、Webにはパフォーマンスを改善することが求められている。

それ以外にも課題はある。先述したようにWebはリーチ力が優れており、トップ1000のモバイルAppsとモバイルWebパフォーマンスのトラフィックを比較しても3~4倍Webの方が多いが、一方でアプリのほうがちゃんと使われている。

ではなぜアプリが使われるのか。それはアプリが次の点に優れているからだ。

  • ホームスクリーンに追加できる
  • 一貫したUI&オフライン対応
  • プッシュ通知
  • 常にログイン状態
  • 簡単な支払いなどができる

つまりWebの課題はスピードに加え、アプリ同様にできることを増やすこと。それを可能にする技術も出ている。

スピードアップについてはAMP(Accelerated Mobile Pages)、エンゲージメント、リエンゲージメントをリッチにするためにはPWA(Progressive Web Apps)を使う手法がある。AMPが初回表示を爆速で行い、PWAが信頼のおけるエンゲージメントを実現する。

PWAでアプリ同様の機能をWebページで実現する

PWAを使えば、Webページでもアプリと同様の機能が実現する。ブラウザでできなかった機能をブラウザのプラットフォーム上に追加する。ただし今のところ新しい機能なので、全てのブラウザで使えるわけではない。

PWAはホームスクリーンへの追加を可能にする。その参考になるのが「トリバゴ」というホテル料金比較ページ。このページにアクセスしてしばらくすると下からプロンプトが上がってくる。

そこに「ホームスクリーン追加」という文言があるので、タップして追加。それをタップするとフルスクリーンで起動する。

ユーザーからするとアプリなのかWebなのかわからない。実装するのも簡単で、json形式の設定ファイルを作ってそれを定義して、プロンプトを出したいページにリンクタグに紐付けるだけ。スクリプトやService Workerをインストールする必要があるが、これだけの作業で実装できる。時間は10分ぐらい。

だがいままでは、プロンプトが出るタイミングをコントロールできなかった。json形式のファイルを持っているWebページを訪れるたびにプロンプトが開くというのは、ユーザーからするとあまり気持ちの良いものではない。

そこでChromeではユーザーがエンゲージするのを裏で計っており(エンゲージメントスコア)、それがある閾値を超えないと出さない仕様にしているが、出てほしくないタイミングで勝手に出す可能性もある。

プロンプトが表示される直前に、beforeinstallpromptというイベントが発火されるので、そこを監視して、表示させたくなければプロンプトをキャンセルするようなコードを書く。またボタンを押すなどの行為をした時に、プロンプトを出すようにする。

これがTarget Prompting。2015年にはじめてPWAで作られたインドのECページ「Flipkart」で採用されている。

現在、同ページでは購入完了のタイミングまでホームスクリーンへ追加のプロンプトを出さないようにしている。このような方法を採用したことで、ホームスクリーンに追加するユーザー数を3倍に増やしたという。

Androidの場合、PWAで作ったWebページはアプリと認識されるので、アプリの設定画面から通知のオンオフもできる。

Microsoftでもjsonのマニュフェストのファイルを持っており、かつトラフィックの多いページの一部で、Windowsのappストアで公開できるようになる可能性があるという。このようなアプリの聖域であるマーケットプレイスにWebコンテンツが入ってきている。

ホームスクリーンに追加はできた後は、爆速ヌルヌルWeb体験をしたい。そんなPWAを作るために、参考にしたいのが、「wego」というシンガポールのトラベル会社のページだ。

同社ではアプリも提供しているが、そのアプリと比べてもパフォーマンスはほぼ変わらない。App ShellというPWAで推奨されている画面構成を採用している。

静的な要素(ヘッダーや横から流れるサイドメニュー)は、各ページにおいて共通なので、毎回サーバからリクエストからレスポンスで取ってくる必要がない。そういうものはWebでもインストールしておく。それ以外の要素はサーバに問い合わせて取ってくる。

インストールと同じようなことができるようにするのが、Service Workerという新しいWebモジュール。ブラウザにひっつくプロキシみたいな役割をするため、ネットワークの監視などができる。

ServiceWorkerで面白いのは指定したリソースを先読みし、独自に用意したストレージに保存することができる。HTTPのストレージとは異なる堅牢なストレージに保管できるので、まさにアプリで言うインストールのようなことができるというわけだ。

それ以外のPWAの特長は、PWAチェックリストを見ればわかるが、WebAppマニュフェストを用意し、スクリーンへ通知できること、起動URLがオフラインでもロードされること、3Gネットワークでも速い表示であること、ページ遷移がネットワークに依存せずスムーズであることなどが挙げられる。

パフォーマンスチューニングも必須

Webのパフォーマンスチューニングに欠かせないのが、まずはパフォーマンスのオーディットをしてみることだ(現状分析)。お勧めはChromeチームが開発しているオーディットツール「Lighthouse」。簡単に使えるので、ぜひ試してほしい。

Lighthouseの良い点は、対応するとどのくらいの改善を見込めるかも教えてくれるところ。優先順位付けができるのだ。

とはいえ、オーディットツールだけに頼るだけではなく、デベロッパーツールのパフォーマンスのタブを使って中身を見ることや、どこに改善の余地があるのか把握することも重要だ。最近の厳しいパフォーマンスの世界でいうと、最初のロードにかかるクリティカルパス(JS、CSS、HTML)に必要なリソースは170KBに収めることと言われている。

ファイルサイズの部分でも意識する必要があるということ。そこを意識すると速いWebページができる。Webにおいて、立ち返る場所は「阿部 寛のホームページ」。

スクリプトも何もない、美しいWebページ。Webは本来このぐらいのスピードが出せるということを常に頭に置いておくことだ。

パフォーマンスの改善についてさらに詳しく知りたい人は「超速!Webページ速度改善ガイド」を読んでほしい。

PWAを使うと、Webでもプッシュ通知ができるようになる。ただ、プッシュはユーザーがわかるような導線を意味付けしてあげることが重要になる。その端的な例がランコムのページだ。

Webのセッションが切れても、そのたびにIDやパスワードを入力することなく、マネジメントしてくれる技術がある。それが、Credential Management APIといって、ドメインに入力したことのあるIDとパスワードをブラウザに保存し、再利用する技術。これを使えば常にログイン状態の形が実現できる。

ECページは支払い情報の入力フォームはたくさんあるが、どれも同じ内容を入れるのに違うレイアウトなのでまた入れ直さないといけない。ブラウザが支払いのフォームを提供しようというのが、Payment Request API。このようにユーザーが便利であろう機能をブラウザが提供するようになっている。

最後にどこから始めればよいのか──大事なのはプログレッシブエンハンスメントという考え方だ。そして徐々に機能拡張していけばよい。

つまりWebページのパフォーマンスチューニングをやりつつ、その上で個別にホームスクリーンを追加したり、オフライン対応したり、プッシュ通知したりと個別に要素技術をトライし、計測して、うまくいけば拡張していくことだ。

それを実現しているのが、「ベルーナ」という通販会社のページ。Googleが注力するAMPとPWAの採用でモバイルコンバージョンをさらに加速させている。一度にすべてをやる必要はない。徐々に拡張してテストしていいものだけを残している。

最後に進化論で有名なダーウィンの言葉を贈る。「最も強い者が生き残るのではなく、最も賢い者が生き延びるでもない。唯一生き残るのは、変化できる者である」。変化を怖がらずに変えていくことにトライしてほしい。

⇒「できる!WebAssembly@chikoski」に続く

関連ページ

イベントの様子は動画でも公開中

  • 28
  • このエントリーをはてなブックマークに追加

■関連記事

清水智公@chikoski氏が語る「WebAssemblyで何ができるのか?」#html5jplat... WebAssembly(WASM)でできること Google宇都宮佑亮@uskayさんに続いて登壇したのは、WebAssembly(WASM)コミュニティを率いている清水智公さん。セッションタイトルは「できる!WebAssembly」。WASMでどういうことができるのか、どうしたら作れるのか、使う...
リニューアルで表示を高速化させた「日経電子版のページ高速化とPWA対応」プロジェクトの舞台裏... リニューアルして表示が速くなったと大きな反響を呼んだ日経電子版 最後に登壇したのは、日本経済新聞社のソフトウェアエンジニアとして「r.nikkei.com」のフロントおよびバックエンドを担当している宍戸俊哉さん。 セッションタイトルは「日経電子版のページ高速化とPWA対応」。 日経電子版とは2...
これからのWebクリエイターに欠かせないスキル─アクセシビリティ・インクルーシブデザイン講座... Webアクセシビリティは難しいモノではない スマートフォンをはじめとするモバイルデバイスの普及により、子どもから高齢者まで、障がいのあるなしに関わらず、多くの人がWebを利用する時代が到来している。 欧米では電子機器や電子文書について、障がいを持った人でも使用できるような法律が整備されているが、...
Webで簡単・効率的にアニメーションを実現できる最新フレームワーク・CSS3アニメーションを紹介... MozillaでWebアニメーションの機能の開発者が登壇 Webでアニメーションというと、数年前まではFlashコンテンツが当たり前に使われていた。 しかしスマートフォンの普及と共に、Webから駆逐され、今はHTML5でアニメーションを表すには、setInterval関数やrequestAnim...
これからのWebエンジニアの必須スキル!?「Payment」の実情と実装できる技術を一挙紹介... Web Payment Browser API(Payment Request API)を実装する 最初に登壇したのは、Google Developer Advocateの北村英志さん。 セッションタイトルは「はじめてのWeb Payments」。 ▲Google Developer Advoc...
WebVRと支える技術・コンテンツ作成入門ほか全セッションレポート──シン・WebVRとか文化祭... 基調講演を務めたのはMozillaの清水氏 基調講演に登壇したのは、Mozilla Japanの清水智公氏。講演タイトルは「WebVRとそれを支える技術」。 非営利団体Mozillaは、ブラウザベンダーの中でWebだけで勝負している唯一のベンダーである。Mozillaでも昨年より、ブラウザでVR...

今週のPickUPレポート

新着記事

週間ランキング

CodeIQとは

CodeIQ(コードアイキュー)とは、自分の実力を知りたいITエンジニア向けの、実務スキル評価サービスです。

CodeIQご利用にあたって
関連サイト
codeiq

リクルートグループサイトへ