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

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

Google主催のAMPマスターによる、AMP好きのためのイベントに参加してきました。ボリュームが多いので、前編と後編に分けてお送りします。
Clock Icon2018.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つのサイトがおすすめ

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も共存させるのが大事

後編へ続く・・・

この記事をシェアする

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.