Chrome Dev Summit 2015 で振り返る プログレッシブ ウェブ アプリ
2016年1月5日火曜日
[この記事は Darin Fisher、Chrome エンジニアリング部門副社長による Chromium Blog の記事 "Chrome Dev Summit 2015: That’s a wrap!" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。]
Chrome Dev Summit が始まった 2012 年、Android 向け Chrome が公開されました。現在、Android 向け Chrome の月間アクティブ ユーザーは 8 億人 を超えています。
ウェブの最大の強みは、そのリーチの広さにあります。さまざまなデバイスやオペレーティング システムで利用できるだけでなく、ユーザーへの到達度が高いのです。トップ クラスのモバイル ウェブ サイトの月間ユニーク ビジター数は、トップ クラスのモバイル アプリの 2.5 倍で、モバイル ウェブのリーチはモバイル アプリの 2 倍以上のペースでそれぞれ増加しています。こうしたリーチの広さが、他に類を見ないほど多くのユーザーを引きつける、チャンスにつながっています。
現在、ウェブ プラットフォームの重要性が高まりつつあると私たちは考えます。これを実現するための主要なテクノロジーやツールのアーリー アダプターが成功を収めているからです。基調講演では、モバイル プラットフォームの進化と、「プログレッシブ ウェブ アプリ」への移行を取り上げました。プログレッシブ ウェブ アプリとは、最新のウェブ機能を使用して構築される、高速で堅牢な、アプリのようなエクスペリエンスのことです。ウェブは大きな発展を遂げてきており、ウェブ テクノロジーを使ってモバイル上で没入型アプリを構築する場合でも、長年慣れ親しんできたウェブのプロパティを今までどおり使い続けることができます。Flipkart の新しいモバイル ウェブ エクスペリエンスは、最新の機能を使って次世代のユーザー エクスペリエンスを提供しているプログレッシブ ウェブ アプリの良い例です。
実際にはプログレッシブ ウェブ アプリは、主に信頼性、パフォーマンス、エンゲージメントの 3 つの面で、従来のウェブサイトとは異なっています。
Google では Web Fundamentals のような優れたリソースも用意しており、今後さらに増やしていく予定です。 新機能をリリースするたびに、Mozilla Developer Network で詳しい情報を発表するようにもしています。過去 1 年だけでも、私たちは Mozilla Developer Network に 2800 件の編集を行い、212 ページの新しいページを作成しています。ウェブ デベロッパー教育の取り組みをさらに進めるために、Google は Udacity と連携し、シニア ウェブ ナノディグリーを授与しています。これは、Service Worker や Promises、HTTP/2 といった、最新のウェブ テクノロジーや手法に特化した講座を修了したことを示す認定証です。
Chrome Dev Summit 2015 の全セッションの動画を公開していますので、ぜひご覧ください。皆さんのイベントへの参加、動画の閲覧、そして何よりもウェブ開発の取り組みに感謝いたします。
※ Google for Mobile でのセッション「スマートフォン体験を一歩先へ 〜 プログレッシブ ウェブ アプリの作り方」で使用したスライド資料も参考にしてください(スピーカーノートに説明が記載されています)。
Posted by Eiji Kitamura - Developer Relations Team
Chrome Dev Summit が始まった 2012 年、Android 向け Chrome が公開されました。現在、Android 向け Chrome の月間アクティブ ユーザーは 8 億人 を超えています。
ウェブの最大の強みは、そのリーチの広さにあります。さまざまなデバイスやオペレーティング システムで利用できるだけでなく、ユーザーへの到達度が高いのです。トップ クラスのモバイル ウェブ サイトの月間ユニーク ビジター数は、トップ クラスのモバイル アプリの 2.5 倍で、モバイル ウェブのリーチはモバイル アプリの 2 倍以上のペースでそれぞれ増加しています。こうしたリーチの広さが、他に類を見ないほど多くのユーザーを引きつける、チャンスにつながっています。
現在、ウェブ プラットフォームの重要性が高まりつつあると私たちは考えます。これを実現するための主要なテクノロジーやツールのアーリー アダプターが成功を収めているからです。基調講演では、モバイル プラットフォームの進化と、「プログレッシブ ウェブ アプリ」への移行を取り上げました。プログレッシブ ウェブ アプリとは、最新のウェブ機能を使用して構築される、高速で堅牢な、アプリのようなエクスペリエンスのことです。ウェブは大きな発展を遂げてきており、ウェブ テクノロジーを使ってモバイル上で没入型アプリを構築する場合でも、長年慣れ親しんできたウェブのプロパティを今までどおり使い続けることができます。Flipkart の新しいモバイル ウェブ エクスペリエンスは、最新の機能を使って次世代のユーザー エクスペリエンスを提供しているプログレッシブ ウェブ アプリの良い例です。
信頼性
高速 Wi-Fi、2G 携帯電話ネットワーク、完全なオフラインなど、どのような接続状況にあっても、ウェブ アプリの読み込みは高速でなければなりません。不安定で信頼性が低いネットワーク環境下でも障害に強いウェブ アプリを構築する方法として、Service Worker は理想的です。私たちは、独自の Service Worker を書かないで済むよう、2 つのライブラリをリリースしています。App Shell 向けの sw-precache と、動的コンテンツ向けの sw-toolbox です。実装が稼働できる状態になったら、 Chrome DevTools や WebPageTestを使えば、その実装をさまざまなネットワーク環境で簡単にテストすることができます。Service Worker はすでに多くのデベロッパーに採用されており、現在、Service Worker 経由のウェブページの読み込み回数は 1 日 22 億回にのぼります。この数には、Chrome の「新しいタブ」のページで使われた分は含まれていません。パフォーマンス
RAIL パフォーマンス モデルを使用すれば、あなたが開発したサイトやアプリに対し、ユーザーが何を期待しているかが分かりやすくなります。このモデルではパフォーマンスを次の 4 つの重要な目標に分けて考えています。- 応答時間(入力からレスポンスまでの時間)は 100 ミリ秒未満。
- アニメーション(スクロール、ジェスチャ、遷移)は、毎秒 60 フレームで動く。
- アイドル時間を利用して、重要性の低い作業を 50 ミリ秒単位でうまくスケジュールする。
- 読み込みが 1 秒以内に終わる。
エンゲージメント
従来、ユーザーがウェブ上のサイトを再訪するのは困難でした。ですがプッシュ通知を使えば「タブの外」でもウェブページにアクセスできるようになります。つまり、ユーザーはブラウザを開いたり、ウェブ アプリを実際に使わなくてもよいということです。何より、この通知機能は他のアプリ通知アプリ通知とほぼ同じ操作感を実現しています。現在、Chrome では毎日 3 億 5000 万件以上のプッシュ通知が送信されており、その数は急速に増加しています。Beyond the Rack の場合、プッシュ通知によって同社サイトを訪れたユーザーは、平均的なユーザーよりも滞在時間が 72% 長く、購入金額が 26% 多いことが分かっています。成功のためのツール
Google はウェブ デベロッパーに成功をもたらすための取り組みを行っています。Polymer は、ウェブ上でコンポーネントを構築するための一般化されたライブラリですが、デベロッパーが RAIL の目標を実現するのを支援することも重視しています。今年の Google I/O でバージョン 1.0 がリリースされて以来、Polymer は 100 万超のウェブページで使われるようになっており、Google 内の 300 以上のプロジェクトでも使われています。Polymer 1.0 は、その前のバージョン 0.5 よりも 3 ~ 4 倍高速化しており、最新のバージョン 1.2 はそれよりさらに 20% 高速になっています。最新のウェブ開発の考え方を取り入れた Polymer の使用を開始するには、Polymer のクイックツアー、Polymer Summit の講演、Polymer codelabs をごらんになるか Polymer Starter Kit をお試しください。Google では Web Fundamentals のような優れたリソースも用意しており、今後さらに増やしていく予定です。 新機能をリリースするたびに、Mozilla Developer Network で詳しい情報を発表するようにもしています。過去 1 年だけでも、私たちは Mozilla Developer Network に 2800 件の編集を行い、212 ページの新しいページを作成しています。ウェブ デベロッパー教育の取り組みをさらに進めるために、Google は Udacity と連携し、シニア ウェブ ナノディグリーを授与しています。これは、Service Worker や Promises、HTTP/2 といった、最新のウェブ テクノロジーや手法に特化した講座を修了したことを示す認定証です。
Chrome Dev Summit 2015 の全セッションの動画を公開していますので、ぜひご覧ください。皆さんのイベントへの参加、動画の閲覧、そして何よりもウェブ開発の取り組みに感謝いたします。
※ Google for Mobile でのセッション「スマートフォン体験を一歩先へ 〜 プログレッシブ ウェブ アプリの作り方」で使用したスライド資料も参考にしてください(スピーカーノートに説明が記載されています)。
Posted by Eiji Kitamura - Developer Relations Team