2018 年 4 月 27 日（金）に、開催された Google Developers Japan: AMP Roadshow Tokyo 開催のお知らせ に参加しました。

AMP にまつわる有益な色々話を聞くことができましたので、備忘として残します。

0930 Intro + Keynote (ご挨拶と基調講演)

Intro

  • AMP コミニュティの行動規範
  • ハッシュタグ #amproadshow
  • Q&A は sli.do.www で。

Keynote

  • AMP HTML
  • AMP JS javascirpt は 非常に小さい。
  • AMP Cache
  • 多くの Web ページが 2G、1 秒遅れると 7 ％ コンバージョンが下がる。
  • JavaScript が多くなると、遅くなる。
  • AMP のコミニティのゴールは、AMP を使うことではなく、Web を早くすること。

AMP 年表

年表がでてきてた。

AMP 導入企業

  • e-commerce サイトは、半分のユーザーがモバイルでアクセスしている。
  • 27% コンバージョンが増加した。
  • 4% 売り上げが UP。
  • Yahoo が AMP を導入した。

AMP Web

  • AMP (Accelerated Mobile Pages) ではなく AP (Accelerated Pages)
    Mobile ページではなく、全てのページを AMP で作成する。

  • AMP の最新情報は、以下の 3サイトに 記載されている。

    • apmproject.org
    • ampstart.com
    • ampbyexample.com

0945 AMP: A library for beautiful, responsive sites (AMP でできる Rich & Responsive な Web 開発)

  • Web サイト SPIEGEL DAILY
    AMP で素晴らしいユーザビリティを提供している。 レスポンシブ AMP で作られている

  • AMP での JavaScript メインフレームでは使えない。

  • AMP
    優れた UI ライブラリ Web Component で作られている。 OpenSource で最も成功した Web Component

  • AMP におけるレスポンシブ
    AMP では、element 属性に、layout = rasoponsive width、heght でを固定するとリフローが発生しない。

  • srcset を指定
    AMP だと、srcset が対応指定ないブラウザでも動く。

  • amp タグ のmedia クエリ
    amp の要素に media クエリを付与することができる。
    css でも付与できるが、要素に対して宣言的になるので、見やすいかもしれない。

  • AMP youtube
    amp-youtube タグ を使うと、パフォーマンスを低下させることなく、youtube を埋め込める。

実装が面倒なものを、amp タグで実装する

以下はタグの名称のメモです。

  • amp-carousel
  • amp-accordion
  • amp-lightbox 初期表示では nodisplay
  • amp-video パフォーマンスに寄与する部分が Web Component で実装されている。
  • amp-sidebar
    サイドバーを実装できる。
  • amp-fit-text
    テキストは3対2のアクペスト比に収まるように実装できる。
    痒いところに手が届かない部分を実装している。
  • amp-lightboxとamp-accordion の組み合わせ
  • amp-image-lightbox
  • amp-animation
  • amp-position-observer
    ボタンを押すと、ページTOPに戻るが実装できる。
  • amp-social-share type="system" data-mode="replace" native の share ボタンを出力できる。

2018 年に AMP が目指すもの

Full Experience AMP。
AliExpress、全てのページがAMPで作成されている。[^1]
アリババ系列のサイトでは、全ての機能を、AMP 作成している?

  • Full Experience AMP の注意点
    全てのページがAMP Cache から配信されるとは限らない。
    amp-toolbox-potimizer で、自サーバーから AMP Cache サーバーと同等の最適化を、自サーバーで実施することができる。
    超早い。

  • AMP By Example
    AMP の Example が存在する。

  • AMP Start
    AMP Template を配信している。
    最初は2-3テンプレートしかなかったが、最近増えてきた。

  • AMP で フルサイト が作れる。

1015 Advanced interactivity with AMP

  • AMP で動的サイトを作る
    E-commerce サイト AliExpress。
    ローディング 1 秒かかるとコンバージョンが 7% 下がる。 AliExpress は、4.3 % 増加、 load Time は 40% 下がった。

  • E-commerce サイト はページのパーソナライズ、フィルターやソートが必要

    • ページのパーソナライズ は Cache される特性から難しい。
    • ページのパーソナライズ を実現する AMP components がある。

  • パーソナライズ を実現する amp タグ

    • amp-selector
    • amp-list amp-mustache
      amp-list server上の json を取得。 amp-mustache templeate を使用できる。　　　　
    • amp-bind JavaScript を実行して、ページの状態を変える。

  • Sample e-commerce page

    • amp-state
    • amp-date-picker
    • AMP.setState

  • amp-form と amp-bind の組み合わせ
    クレジットガードチェック
    amp-bind-macro タグ

  • amp-access + amp-mustache
    login 状態で状態を切り替える。
    login state で、show、hide を変更していく。

  • 未ログインユーザのパーソナライズセーション
    amp-pixel、CLIENT_ID で パーソナライゼーション。
    サーバー上でIPアドレスがわかるので、ユーザーのIDアドレスをベースに地域を判断する。

  • amp-animation と amp-position-boserver の組み合わせ

  • amp-form amp-bind amp-animation の組み合わせ

  • カートに追加
    amp form で、action、action-xhr を指定する。

  • AMP component がない場合の対処。
    自分達で作る。
    E-commerce での評価の例
    css で、1-5 までの評価に対応する css 定義を作成した。

  • amp-bind
    amp-bind は 非常に強力。　　　　

1045 Coffee Break

15分間の休憩。

Progressive Web AMPs

  • AMP と PWA の組み合わせ
    スマートフォンユーザは 80 % を 3 つのよく使うアプリを使用している。 ユーザーは1月 あたりのほとんどアプリケーションをインストールしない。 0個。

  • SericeWorker と Manifest.json Add to HomeScreen を追加できる。 manifest.json を作成すると、ホームへ追加ボタンを表示できる。
    Microsoft も ServiceWorker と、 Manifest.json があるサイトをアプリケーションとして登録する。

  • AMP か PWA か? PWA は十分早い。 AMP は PWA として実装できる。
    AMP は Cache されてしまうのが、PWA として問題となる。
    ServiceWorker、Manifest.json Push 通知は、同一ドメインである必要がある。
    AMP からだと、Third Party domain になってしまう。

  • AMP Cache の利点を享受しつつ、PWA を使う。(Google 推奨) AMP to PWA
    ファースト View は AMP で提供する。 セカンド Load は PWA のページに遷移する。
    AMP Page で、service worker install し、install しているので、セカンド Load PWA が早い。
    amp-install-serviceworker を使用すると、amp ページで、serviceworker をインストールできる。
    Start fast、Stay fast

  • AMP to PWA の実装例
    XING goibobo Rakuten recipe

  • AMP to PWA だと、開発コストがかかるのでは?
    既存サイトの場合は、開発コストがかかる。
    通常ページを AMP にし、PWA の機能を盛り込む。 > canonical AMP。
    AMP as PWA で実装する。

  • URLが share された場合、warm cache にアクセスさせたい。
    share された url を fetch eventlistenar で、amp の cache ページに変更する。
    Shell URL rewrite を使うと、share url を書き換えることができる?

  • AMP と PWA の実装例
    現状は、投資をする段階だと、偉い人に説明したほうがよい。
    (AMP in PWA) PWA のページのデータソースとして、AMP を使う。
    App Shell に該当する部分を PWA として cache して、 データソースとして、AMP HTML を取得する。
    Native アプリで良く使用される手法。

  • Web ページでのコンテンツの埋め込み
    iframe が使われるが、これが非常に遅い。
    iframe ではなく、Shadow DOM を使う。

  • Shadow DOM 初回表示時に、コンパイルが走る。 2回目以降はコンパイルされたページにアクセスが走るので早い ?

  • Examples

    • Shadow AMP (AMP-with Shadow DOM Library)
    • fetch をハイジャックするコードを実装する。
    • pwa.js
    • DOM の Shadow化 不要な Header Footer を非表示にするcss を記載する。
    • AMP Shadow slot ＜ 外部から AMP のページに、何らかの要素を挿入できる。
    • Sample 正常動作はOK。 異常系の作り込みは、必要になる。
    • amp.cards

  • まとめ

    • PWA と AMP の組み合わせについて説明した。
    • AMP > 規則を守ると、非常に高速なページを作成できる。
    • bmw.com
      PWA in AMP の実装例

AMP in production (AMP を本番環境で運用する)

  • 作成から本番運用までのフェーズ Generate > Optimize > Validate > Mesasure > Distribute

  • Generate
    HTML を AMP HTML に変換する。 img > amp-img に変換する。

  • Optimize

    • 必要のない、タグを読み込まないようにする。
    • css を inline にして最適化する。
    • 画像の最適化

  • Validate

    • AMP の Validator を使う。

    • CI と Monitoring

      • CI node.js だと、amphtml-validator があるので、ビルド後に、amphtml の validation を自動化できる。 

        ampthml-validator --help
        curl で html 取得 > amp.html validation の流れで使用する。
        cron job + amphtml-validator でチェックする。

      • Monitoring

        • Google Search Console でチェックする。
          Validator エラーが出ているページを一覧表示、詳細を確認できる。
        • Lighthouse (Chrome の Audits を使う)。
        • Webpagetest を使う。

    • Measure

      • amp-anatlytics で結果を測定する。

      • AMPページで、A/Bテストをしたい。
        amp-anatlytics で、A/B テスト が 実施可能。

    • Ajax submission with AMP-FORM
      Crossorigin Ajax の問題がある。
      HTTP header の設定でこの問題の回避が可能

    • Content Mismatch 問題 original と、 amp ページで、content 内容が異なる。
      これも Google Search Console で確認できる。

What’s next in AMP

  • Infinite Scroll

  • Lightbox Garllery

  • Media

    • Video Docking
    • amp-audio タグ
    • full screen 表示
    • MediaSession api navigator.MediaSession でアクセス可能。
      各インターフェースを実装すれば作れる。
    • AMP stories
      AMPで、スライドショーを作成できる。
      タッピングしてストーリーを楽しめる。

  • Layout

    • amp-layout タグ
      media query。

  • AMPをより高速化する

    • amp-toolbox-optimizer

  • Developer Tool

    • AMP Start
    • Wordpress AMP Plugin

  • AMP for Email HTML メールを、AMP HTML 化して表示を高速化する。

  • コントリビーションをする。
    参加してほしい。

ランチ

お弁当を頂きました。

Guest Talk

Ameba * AMP の 過去、現在、未来

  • Ameba Blog は、2004年スタート。AMP は、2016年から。
  • AMP を導入した理由
    Search UX、Mobile UX を改善できる。
  • 80% が Mobile アクセス。

  • モニタリング

    • AD は CPM収益を測る?
    • セッション数は 7倍になった。
    • ソーシャルメディア拡散から、通常よりもアクセスが増えることをAMP Spike と呼んでいる。
    • 当初はAMPの広告のROI は悪かったが、改善された。

  • 使用している AMP コンポーネント

    • Search Bar

      • amp-bind、amp-form、amp-list

    • Lazy Load
      amp-list を使う。

    • Twitter Sticky
      特定のrefferがついた、アクセスの場合、特定の要素を出す。
      というようなことをしている。

  • AMPから学ぶ

    • メリット
      メモれませんでした。。

    • デメリット チューニングが難しい。 制限が厳しい。

  • Ameba News について　　　　
    canonical AMP
    ServiceWorker、manifest.json を作った。
    workbox を使っている。
    画像系は Cache First を Cache Storategy として指定。

AMP 開発におけるデザイナとエンジニアの役割

  • 2017年8-9月よりAMP化

    • amp-iframe でプラン情報取得
    • amp-analytics で crossdomain tracking
    • canaonical amp
    • UX向上のため、画面処理を工夫した。

  • AMP化の効果

    • 検索流入 35% UP
    • セッション 25% UP

  • 開発フローの流れ (ざっくりしか記載がなく間違っているかもしれません。)

    1. デザイナーがプロトタイピングで MOCK を作る。
      AMP はデザイナーでもコンポーネントが使える。
    2. MOCKをエンジニアに渡して、機能実装。

  • AMP でも遅かった

    • リアルタイムで取得不要なものは、Cache する。
    • 件数表示部はリアルタイム取得だったが、サーバーサイドで取得するように変更した。
    • インラインcss
      HTML内に埋め込むと管理が煩雑になるので、ビルド、minifyしたものを HTML に埋め込む。

  • リリース後の効果測定

    • SearchConsole
    • amp-analytics
    • Calibre でサイトパフォーマンスチェック

Q&A with AMP team

あまりちゃんと、メモできてないので、メモした内容のみ記載します。

  • 外部集客タグを、amp-iframeを使用して設定する話

    • amp-iframe を使用するのはおすすめできない。
    • 複数のamp-iframe を使う場合、1つしかトラッキングできない。
    • ベンダーに実装を相談するのがいい。

  • AMPからAMPへのページ遷移

    • ページが存在しない場合もあるので、現状難しい。

  • Calibre は無料?

    • 有料

  • AMPに適さないパターンはあるか?

    • 複雑なSPAアプリケーションを置き換えることは難しい。
    • NEWSサイト、Eコマースサイトで、ローディングを早くするのに向く。
    • ほとんどのサイトは、AMP の実装が適している。

  • AMP HTML の仕様の安定? 今後どうなるのか?

    • フレームワークとして考えてもらえば OK。 JQuery、Angularjs 等と同じようなもの。
    • Web の Page Speed が早くなったら、役目を終えてなくなるかもしれないが、当分ない。

  • AMP for Emailについて Gmail 以外でも使えるか?

    • 他の Emailクライアント プロバイダともやりとりしている。
    • Gmail だけでなく、Emailクライアント全体で使えることを目指す。

Monetization with AMP

  • Web 広告の ３つの問題

    • 邪魔
    • 表示に時間がかかる
    • 安全性

  • Web 広告の遅さの解消方法

    • サイズを宣言する
    • コンテンツを分ける
    • プライオリティを下げて表示する

  • AMPhtml ads

    • 新しい広告タグの機能
    • 広告向けの AMP HTML を作る
    • 通常の広告としても動作する
    • 超早い
    • AMPhtml をGUI で作るツール
    • クリック後のLP も AMPにする

  • AMP Paymentrequest
    AMP ページで使えるようになった

個人的な感想

以下、個人的な感想です。

  • AMP for Email が使いたい。
    Gmail は今年中にサポートするそうです。普及するなら、HTMLメールの置き換え。サポートしているクライアントだけ AMP メールで送るとか。

  • AMPHTML ads
    LP の後に遷移が遅くなる対策問題はありますが、広告バナー、と LP の AMP 化をもうやるべきかなと思いました。

  • AMP html で AB テスト。
    Google Optimize の勉強も兼ねて、仕込んで見たいなと思いました。

  • 古めかしいサーバーサイドレンダリング で、canonical AMP を作るのに希望を感じた。 古いサイトを移行するとして、Good Old Web > SPA > PWA ではなくて、Good Old Web > canonical AMP でも良いのかもしれない。
    と思いました。これであれば、サーバーサイドレンダリングのままで、サイト早い且つ、ログイン状態等のStateの制御もできそうです。

  • amp-toolbox-optimizer
    自サイト上で、AMP Cache と同様の速度を実現するツール。
    静的サイトジェネレータと組み合わせて使ったりしてもいいのかもしれません。

個人で調べてると、なんか偏りでてくるので、脳内 Index の再構築になりました。
来年も参加できるのであれば、参加したいです。

以上です。

コメント

カテゴリー

最近の投稿