google
AMP
PWA
ProgressiveWebApps
PWAMP

AMPとPWAの動向まとめ #io17jp

More than 1 year has passed since last update.

はじめに

  • 5/17(米国時間)〜3日間、Google I/O 2017が開催されました
  • 今年も盛況だったようです
  • いつものように 全てのセッションの動画 が公開されています
  • 去年のセッションの中で話題になっていたAMP・PWAについて今年のセッション動画から動向を確認してみました

AMP・PWAとは?(おさらい)


AMP(Accelerated Mobile Pages)

  • GoogleとTwitterが合同で開発
  • モバイルでページを高速表示する
  • 必要な技術
    • AMP HTML…専用のhtml/CSS/JSコーディング
    • AMP JS…専用のJSライブラリ
    • Google AMP Cache…キャッシングのためのCDN
  • 参考

PWA(Progressive Web Apps)

  • モバイルのUX向上の仕組み
    • オフラインで動作
    • プッシュ通知に対応
    • インストール不要
    • ネイティブアプリのようなUI
  • 必要な技術
    • Service Workers
    • PushNotification
    • WebManifest
  • Progressive Web Apps(公式)

I/O 2016では公式サイトがPWA対応

スクリーンショット 2017-05-21 18.24.50.png


I/O 2016での動向

:point_right: 普及が進めばモバイル向けWebサービスやアプリの開発に影響がありそうな雰囲気


そして、Google I/O 2017

スクリーンショット 2017-05-21 16.19.04.png


公式ページはPWAではない…?


いや待て、Keynoteはどうなってる?


Keynoteの概要

  • モバイルファーストからAIファーストへ
    • Google Assistant(Google Home、Google Lens)
    • クラウドTPU、Google.ai
  • Youtube 360度対応
  • Android O、Kotlinのサポート、Tensor Flow Lite
  • VR/AR⇒Daydream専用端末、Tango

:tv: Google I/O Keynote (Google I/O '17)
 

:disappointed_relieved: AMP・PWAというかWeb技術の話すらほとんどない


諦めるな、まだDeveloper Keynoteがある


Developer Keynoteの概要

  • Android Kotlinを正式サポート
  • Tensor Flow LiteとクラウドTPU
  • PWA・AMP関連技術 :point_left: あった :bangbang:
  • Firebaseの機能強化
  • お土産復活祭(Google Home)

:tv: Developer Keynote (Google I/O '17)
  
:sweat: 普通に多数のセッションが組み込まれていましたスミマセン…


というわけで生存を確認

スクリーンショット 2017-05-21 16.46.42.png


AMP・PWAの動向まとめ


The AMP Keynote

  • 20億/9,000ドメインが既にAMP対応
    • アジアでも浸透中(Yahoo!Japanも検索結果に採用)
    • TwitterがAndroidとiOSのモバイルWebをAMP対応
  • EコマースのAMP対応強化
  • AMP向けの広告と効果測定の強化
  • PWA開発手法の進化
    • AMPへの投資が将来のPWA化への投資にもなる
  • OSSプロジェクト、コミュニティへの技術貢献
  • 豊富な技術サポート(GitHub, Slack, Stack Overflowなど)

:tv: The AMP Keynote


ビジネス面

:chart: EコマースへのAMP拡大とマネタイズのサポート強化


技術面

:point_right: 技術・手法の定着に向けた改善と進化


PWAMPという概念

  • AMPとPWAの組み合わせでよりハイレベルなユーザー体験を実現する概念的手法
    • 技術的には従来の手法の組み合わせ
  • 大きく3種類の実現方法が提唱されている

:point_right: AMP as/to/in PWA

:tv: From AMP to PWA: Progressive Web AMPs


AMP as PWA

  • AMPコンポーネントでPWAを構築する
  • あくまでAMPで構成するがPWAの機能が使える

スクリーンショット 2017-05-24 19.27.36.png

:iphone: mynet


AMP to PWA

  • AMPページからPWAへ繋げる
    • amp-install-serviceworker
      • AMPのページへ誘導しバックグラウンドでServiceWorkerをインストール
      • 以降はPWAで構築された高度なUXを提供
    • 楽天レシピの事例が紹介

スクリーンショット 2017-05-24 19.42.15.png

:iphone: 楽天レシピ


AMP in PWA

  • AMPページを取得して利用するPWA

スクリーンショット 2017-05-24 20.06.08.png

:iphone: the guardian


関連技術のPolymerにも注目

:beginner: Polymerとは


所感

  • 真新しい発表は少なかったが着実に浸透してきている
    • 実際AMPの採用事例は(日本でも)増えている
    • PWAは技術的手法の確立も含めてもう少しかかりそう
    • SEOやマネタイズ観点がきっかけで普及が進むケースもありそう
      • AdsとAnalyticsの発表により今後加速する可能性はある
  • 既存技術の組み合わせでしかないのでいつのまにか当たり前の手法になっている可能性はある
    • PWAMPもその過程で出てきた概念
  • Polymerも合わせてチェック
    • 8月にPolymer Summit 2017開催

:point_up: 着実に育っているようなので引き続き動向に注目


Appendix


参考 - Google I/O 2017関連情報


参考 - AMP・PWAの技術情報