AMPとPWAの動向まとめ #io17jp

# はじめに

- 5/17（米国時間）〜3日間、Google I/O 2017が開催されました
- 今年も盛況だったようです
- いつものように [全てのセッションの動画](https://www.youtube.com/playlist?list=PLOU2XLYxmsIKC8eODk_RNCWv3fBcLvMMy) が公開されています
- 去年のセッションの中で話題になっていたAMP・PWAについて今年のセッション動画から動向を確認してみました

----

# AMP・PWAとは？（おさらい）


----

## AMP(Accelerated Mobile Pages)

- GoogleとTwitterが合同で開発
- モバイルでページを高速表示する
- 必要な技術
    - AMP HTML…専用のhtml/CSS/JSコーディング
    - AMP JS…専用のJSライブラリ
    - Google AMP Cache…キャッシングのためのCDN
- 参考
    - [Accelerated Mobile Pages Project（公式）](https://www.ampproject.org/ja/)
    - Googleの [AMPデモ](https://g.co/ampdemo)
    - [AMP Start](https://www.ampstart.com/) …AMP＋Material Designのコンポーネントフレームワーク

----

## PWA(Progressive Web Apps)

- モバイルのUX向上の仕組み
    - オフラインで動作
    - プッシュ通知に対応
    - インストール不要
    - ネイティブアプリのようなUI
- 必要な技術
    - Service Workers
    - PushNotification
    - WebManifest
- [Progressive Web Apps（公式）](https://developers.google.com/web/progressive-web-apps/)

----

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


![スクリーンショット 2017-05-21 18.24.50.png](https://qiita-image-store.s3.amazonaws.com/0/3324/eddfd437-5fa7-1c5c-5ff4-38e213681307.png)

----

## I/O 2016での動向

- Web系のセッションの多くがなんだかんだAMPやPWAに触れていた
    - [Google I/O 2016 Web系セッションまとめ](http://qiita.com/vvakame/items/30c1334dbbd9adb892cd)
- 公式サイト自体がPWA対応するなど、社をあげての力の入れよう
- 日本でもGoogle I/O の直前に東京で [PWAのDeveloper Summit](https://events.withgoogle.com/google-developers-summit-tokyo-2016-progressive-web-app/) が開かれた

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

----

# そして、Google I/O 2017

![スクリーンショット 2017-05-21 16.19.04.png](https://qiita-image-store.s3.amazonaws.com/0/3324/0adde228-906a-af0b-b055-b6b1a3a4fe71.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)](https://youtu.be/Y2VF8tmLFHw)
　  
: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)](https://www.youtube.com/watch?v=EtQ8Le8-zyo)
　　
:sweat: 普通に多数のセッションが組み込まれていましたスミマセン…


----

### というわけで生存を確認

![スクリーンショット 2017-05-21 16.46.42.png](https://qiita-image-store.s3.amazonaws.com/0/3324/e8853c1c-a39e-02cf-7932-6895fba49fb2.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](https://youtu.be/BGyF5Uh3w1M)

----

## ビジネス面

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

- :tv: [Building Beautiful, Interactive AMP Pages for E-Commerce & Beyond](https://youtu.be/bGry_GtKtQw)
     - eBayもこの夏に全世界の製品ページをAMP対応
- :tv: [AMP Ads: Better Advertising on a Faster Web](https://youtu.be/K6zKOtS_2FU)
    - AMP Analytics と AMP Ads

----

## 技術面

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

- JSフレームワーク
    - :tv: [Production Progressive Web Apps With JavaScript Frameworks](https://youtu.be/aCMbSyngXB4)
        - Vue.jsのPWA対応
    - :tv: [Great Progressive Web App Experiences with Angular](https://www.youtube.com/watch?v=C8KcW1Nj3Mw)
    - :tv: [Using Web Components with Angular](https://youtu.be/Ucq9F-7Xp8I)
- UX関連
    - :tv: [Progressive Web Apps: Great Experiences Everywhere](https://youtu.be/m-sCdS0sQO8)
    - :tv: [Creating UX that “Just Feels Right” with Progressive Web Apps](https://www.youtube.com/watch?v=mmq-KVeO-uU)
- ほか全般
    - :tv: [Staying off the Rocks: Using Lighthouse to Build Seaworthy Progressive Web Apps](https://youtu.be/NoRYn6gOtVo)
    - :tv: [WomenTechmakers.com—A Progressive Web App Migration](https://youtu.be/fyi7auD5MzU)

----

### PWAMPという概念

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

:point_right: AMP as/to/in PWA

:tv: [From AMP to PWA: Progressive Web AMPs](https://youtu.be/xF6mjl-wOqU)

----

### AMP as PWA

- AMPコンポーネントでPWAを構築する
- あくまでAMPで構成するがPWAの機能が使える
    - [Learn AMP by Example](https://ampbyexample.com/)
    - mynetのサイトはこの手法でハイパフォーマンスを実現

![スクリーンショット 2017-05-24 19.27.36.png](https://qiita-image-store.s3.amazonaws.com/0/3324/af2c1eca-4a6a-ac53-c3b4-21bd6af7bcbe.png)

:iphone:　[mynet](http://www.mynet.com/)

----

### AMP to PWA

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

![スクリーンショット 2017-05-24 19.42.15.png](https://qiita-image-store.s3.amazonaws.com/0/3324/216bfa4c-7e06-f439-589f-163db7e09bac.png)

:iphone: [楽天レシピ](https://recipe.rakuten.co.jp/)

----

### AMP in PWA

- AMPページを取得して利用するPWA
    - [shadow DOM](https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom) を使って実現

![スクリーンショット 2017-05-24 20.06.08.png](https://qiita-image-store.s3.amazonaws.com/0/3324/a6d41c5f-673e-075d-b157-0a849a3be0a9.png)

:iphone: [the guardian](https://www.theguardian.com/)

----

### 関連技術のPolymerにも注目

:beginner: Polymerとは

- [Polymer Project](https://www.polymer-project.org/)
- UI系のJSライブラリ
- Web Comonentsベース
- Material Designの導入が容易
　
:point_right: Polymer CLIでPWAを構築

- :tv: [Polymer: Billions Served; Lessons Learned](https://www.youtube.com/watch?v=assSM3rlvZ8)
- :tv: [Future, Faster: Unlock the Power of Web Components with Polymer](https://www.youtube.com/watch?v=cuoZenpQveQ)
- :tv: [Developer Tooling for Web Components](https://www.youtube.com/watch?v=tKvNeNGmOtU)

----

## 所感

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

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

----

# Appendix

----

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

- [Google I/O 2017 keynote - Qiita](http://qiita.com/dakuton/items/78e4df3ca7eceafcbc61)
- [Google I/O 2017に参加しています - RCO アドテク Lab BLOG](https://www.rco.recruit.co.jp/career/engineer/blog/googleio20170517/)
- [Transformations Of The Modern Mobile Web And PWA- Google I/O 2017](https://blog.izooto.com/google-io-2017-whats-new/)
- [Google AMP、20億のモバイルページと90万のドメインに対応](http://jp.techcrunch.com/2017/05/19/20170518googles-amp-now-powers-2b-mobile-pages-and-900k-domains-loads-2x-faster/)
- [This is What Google Said About Progressive Web Apps at I/O](https://www.thurrott.com/mobile/android/116559/google-said-progressive-web-apps-io)
- [滞在時間50%↑、PV3.1倍、直帰率75%↓――AMP+PWAで楽天レシピが大成功! #IO17JP](https://www.suzukikenichi.com/blog/from-amp-to-pwa-progressive-web-amps/)

----

## 参考 - AMP・PWAの技術情報

- [いまさら聞けないPWAとAMP - Qiita](http://qiita.com/edwardkenfox/items/4c0b9550ffa48c1f0445)
- [いよいよ導入されるAMP（Accelerated Mobile Pages）の基礎知識から対応方法まで！まとめ](https://webkikaku.co.jp/blog/seo/accelerated-mobile-pages/)
- [ついに始まった、Google AMP（Accelerated Mobile Pages）を試してみよう！](https://codezine.jp/article/detail/9300)
- [PWA（Progressive Web Apps）の現状とその開発方法](https://www.mitsue.co.jp/knowledge/blog/frontend/201702/23_2217.html)
- [Google I/O 2016まとめ（Web的視点）](http://qiita.com/takoratta/items/f08ed988cfedaf6f45b7)
- [Progressive Web Appを作ってみる - Qiita](http://qiita.com/kawakami-kazuyoshi/items/551f23ecee6c3d396c2a)
- [リアルガチにヤバいAMP Start - Qiita](http://qiita.com/tsushimori/items/20b7478e9fb86d2acbfd)
- [脱ネイティブ！Googleが推進する「PWA」にたった数時間で対応する方法](https://www.webprofessional.jp/retrofit-your-website-as-a-progressive-web-app/)
- [PWA（Progressive Web Apps）の現状とその開発方法](https://www.mitsue.co.jp/knowledge/blog/frontend/201702/23_2217.html)
- [PWAとAMPのイイとこ取りを実現するPWAMPとは？さらに優れたモバイルUXを提供可能に](https://www.suzukikenichi.com/blog/pwamp-is-combination-of-pwa-and-amp/)
- [いまさら聞けない Polymer 入門 - Polyfills は Web Components の夢をみるか](https://librabuch.jp/blog/2016/10/hello-polymer/)