AMP Roadshow Tokyoで、AMPやりたい気持ちが高まった 前編
Google主催のAMPマスターによる、AMP好きのためのイベントに参加してきました。ボリュームが多いので、前編と後編に分けてお送りします。
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/
- たとえば、 AliExpress は、すべて対応している
- 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書くこともできる
- layoutにresponsiveと入れるだけでいける
- 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だけで作るとか
BRAKE:会場アンケート
- AMPをすでに利用している:4割ぐらい?
- PWAをすでに利用している:0??
- ※ 組み合わせて使ってるケースは、世界的にもほとんどないらしい
- 上長への提言方法
- このやり方は投資です。これからの標準技術となりそうなので、様子見ながらいきやしょう!
PWAMP FW.
- これからのWeb実装でのスタンダードに?
- きちんとマークアップされていれば、ある程度の速度が担保される
- チューニングが不要に!
- PWAの良さは、AMPではできない、動的なリッチなところ
- PWAの中で定義されるAPIを利用しつつ、AMPも共存させるのが大事
後編へ続く・・・