AMP Roadshow Tokyoで、AMPやりたい気持ちが高まった前編

Google主催のAMPマスターによる、AMP好きのためのイベントに参加してきました。ボリュームが多いので、前編と後編に分けてお送りします。

#イベントレポート

たいさ

2018.04.27

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

4/27に開催された AMP Roadshow Tokyo に行ってきました。なお、本日の資料は公開されないそうです。

AMPって、レスポンシブサイトとして、丸っと対応できるぐらいになってたんですね！！

はじめに

世の中の状況と、巷でいわれる数値
- 75%の人が、3Gで閲覧している
- ローディングが 1秒遅れると、コンバージョンレートが 7% 落ちる
- ローディングに 3秒以上かかると、53% 離脱する
I choose AMP the user
- AMPを勧めたいという話ではなく、いかに早く、いかに心地よくサイトが使えるか、という話をします。

これからのAMP

AMPは2016年に始まり、世界中で人気になってきている
- すでに40億以上のページがあり、1秒に1枚出てるぐらいのスピード感で成長している。
- もともとは、モバイルxメディア専用だったけれど、ECなど、その役割は広がってきた
  - たとえば、 AliExpress は、すべて対応している
    → 対応の結果、コンバージョンは4%向上した = 1,000億円の売り上げ向上!
  - たとえば、 https://daily.spiegel.de/
AMP websites
- いまや、モバイルだけではない
AMPの最新情報を追うなら、以下の3つのサイトがおすすめ
- Accelerated Mobile Pages Project – AMP：showcaseから新たな使い方を知ることも!!
- AMP Start - Accelerated Mobile Pages Templates：テンプレートとして紹介
- Learn AMP by Example：以下の紹介するものはすべて掲載

Rich content experiences with AMP

AMPコンポーネントを用いて、レスポンシブサイトを作る
現在は、JSは使えない
複雑を単純に するための、AMPライブラリ=優れたUIのライブラリ
- Web Componentsでできており、最も成功したライブラリのうちの一つともいえる
レスポンシブウェブデザインxAMP
- layoutにresponsiveと入れるだけでいける
  - width=100%で書いてしまうと、描画時にreflowされるため、処理に時間がかかるってしまうが、ampなら最適な表示を行う
- モバイル版なのに、retina対応？してるのか画像がくそ重いサイトはよく見かける...（すいません...）
  - srcset（ソースセット）を活用しよう
  - ブラウザが自動的に判別して、適した画像を読み込んでくれる
  - ampなら、古いブラウザでも、動作するし、画像自体にmedia query書くこともできる
iframeの埋め込み
- 描写に時間がかかりがちの動画も、たとえば、amp-youtube というライブラリを呼び出せば、IDを指定するだけで、最適に表示してくれる
- 他に、amp-twitterや、amp-gist。
  - レンダーブロックしない形でgistを入れてくれたりする。
  - 複雑な外部サービスの埋め込みも簡単にできる
- shadowDOMを使っても高速化できる
スライダー
- ボトルネックになりがちだけど、amp-carouselを利用すれば、パフォーマンスを害さない形で実装できる
- 属性「controls」をつけると、「次へ」のボタンがずっと表示できる（よく聞かれるらしい）
その他の機能
- amp-acordion：アコーディオン
- amp-lightbox：対象以外は暗く/明るくなるやつ
- amp-sidebar：サイドバー
- amp-fit-text：属性のサイズに合わせて、自動的にfontサイズを調整してくれる
組み合わせて使うとさらに使える！
- amp-lightbox + amp-carousel：ギャラリー、ページネーション、レスポンシブ...
- amp-image-lightbox：クリックしたときに、その画像をフル画面で表示する、など
- amp-position-observer：スクロールに応じて、画像が移動したり、消したり、ページトップに戻すやつとか、スクロールしたら、ヘッダ表示するとかも。
- amp-social-share：ネイティブと同じようなシェアメニューを出せる（type="system"）
- data-mode="replace"：ローカライズしたSNSを表示？

FULL AMPのおすすめサイト

tasty.co
AliExpress：トップは全てAMP

注意事項

自ドメインからAMPを配布する場合、AMP Cacheほどは高速にならない
- がしかし、amp-toolbox-optimizer を入れれば、対応可能になった（2018年2月）

Advanced interactivity with AMP

ECサイトでおすすめのコンポーネントと使用例

amp-date-picker
- カレンダーから日付を選んだりできる機能（実験段階）
amp-bind + amp-selector
- メニューを選んだら、画像が切り替わる
amp-bind + amp-mustache + amp-date-picker
- 選んだ日付によって、価格を変える
amp-form + amp-bind
- クレジットカードのpaymentプロバイダに受け渡したり、入力された値によって、判別したりもできる
amp-access + amp-mustache
- 閲覧ユーザによって表示を変える（すでにebayでも利用されている）
amp-list + amp-pixel
- 最後に閲覧した商品を、特定のユーザーIDに対して表示する
amp-list + amp-mustache
- IPアドレスを元に、表示を切り替える。送料を変えたりとか
amp-form + amp-bind + ampanimation
- バリデーションチェック

続きは、Learn AMP by Exampleで

Progressive Web AMPs

PWA+AMP
- ネイティブアプリはダウンロードしてもらうのが難しい
- 一般的なユーザーは、80%を3つのアプリで過ごしている
- 新規にアプリをインストールするのはゼロの人が大半
- Microsoftストアも、PWA使ってくれれば、アプリとして登録すると言ってたり...
AMP と PWA
- 対比するものではない
AMP = web page = PWA
- AMPはただのフレームワーク
- 普通のウェブアプリケーションフレームワークとして早い
From AMP to PWA
- 最初は遅くても、その後いかに使ってもらうかが大事
- たとえば、記事のページやアイテムページなど、末端にあるシェアしてほしいページをAMP化する
- で、その中のリンクをPWAにしておく
- その間にservice workerがキャッシュしていく...みたいな
サンプルページ
- XING：ヨーロッパの求職サイト
- goibibo.com
- Rakuten Recipe
今から始めるのであれば・・・
- 既存のサイトの差し替えは大変。
- 新規のサイトであれば、割と楽かも
  - 始めからAMPだけで作るとか