Help us understand the problem. What is going on with this article?

AMPとPWAの動向まとめ #io17jp

More than 3 years have passed since last update.

AMPとPWAの動向まとめ #io17jp

by radiocat
1 / 27

はじめに

  • 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の技術情報

radiocat
Web系技術とAndroidアプリ開発が中心。スクラムマスターもやってます。 よろしくお願いします。
http://radiocat.hatenablog.com/
rakus
「IT技術で中小企業を強くします!」というミッションを掲げ、中小企業の業務効率化に貢献する複数のクラウドサービスを提供しているIT企業です。「楽楽精算」「メールディーラー」など、国内トップシェアを誇る複数のサービスを開発し、累計導入社数は5万社を超えています。次の時代の"楽"を創るための、まだ見ぬサービスや機能を生み出す取り組みは、今日も続いています。
https://www.rakus.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした