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つのサイトがおすすめ

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のおすすめサイト

注意事項

  • 自ドメインからAMPを配布する場合、AMP Cacheほどは高速にならない

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がキャッシュしていく...みたいな
  • サンプルページ
  • 今から始めるのであれば・・・
    • 既存のサイトの差し替えは大変。
    • 新規のサイトであれば、割と楽かも
      • 始めからAMPだけで作るとか

BRAKE:会場アンケート

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

PWAMP FW.

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

後編へ続く・・・

スタートプラン