AMP Roadshow Tokyoで、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/
• 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だけで作るとか

BRAKE:会場アンケート

• AMPをすでに利用している：4割ぐらい?
• PWAをすでに利用している：0??
  • ※ 組み合わせて使ってるケースは、世界的にもほとんどないらしい
• 上長への提言方法
  • このやり方は投資です。これからの標準技術となりそうなので、様子見ながらいきやしょう！

PWAMP FW.

• これからのWeb実装でのスタンダードに？
• きちんとマークアップされていれば、ある程度の速度が担保される
  • チューニングが不要に！
• PWAの良さは、AMPではできない、動的なリッチなところ
  • PWAの中で定義されるAPIを利用しつつ、AMPも共存させるのが大事

後編へ続く・・・