AMP Conf 2019 @ tokyo ハイライト

2019/04/17-18に六本木アカデミーヒルズで開催された、AMP Conf 2019の参加レポートです。

2017年アメリカ・ニューヨーク、2018年オランダ・アムステルダムと続き、第3回目は日本開催ということで、初参戦してきました。

• 公式サイト
• イベントアルバム
• セッション動画プレイリスト

新ガバナンスモデル

2018年11月に発表した新ガバナンスモデルについての説明。
そもそもガバナンスって？って話しですが、Wikipediaによると、

ガバナンス（governance）とは、統治のあらゆるプロセスをいう。政府、企業などの組織のほか、領土、ITシステム、権力などにも用いられる広い概念である
Wikipedia

とあるので、AMPのコミュニティを今後どうやって統制していくかって話だと思います。
セッション内での説明では、

Technical Steering Committee (TSC)とよばれる、技術面と製品面の方向性を定めるメンバー。Advisory Committee（AC）とよばれるTSCにアドバイスする関連ビジネスの代表者。また、特定分野の知識、関心を持つWorking Group（WG）の3つの構成でよりオープンに意見を求めてAMPの方向性を議論していくとのこと。

References

• 資料：新ガバナンスモデル発表
• 関連セッション
  • keynote
  • What's next in AMP
  • Technical Steering Committee

amp-script

AMPのデメリットとして挙げられる厳しい制限。その1つがJavascriptの一切の禁止。これが緩和される。

まだExperimentalだが、<amp-script /> を利用することで、web worker上で開発者が用意したJavascriptを実行することができるようになる。

web workerは仕様上、DOMの操作ができないが、AMPプロジェクトのworker-domというライブラリのおかげて、worker内でDOM APIを再現し本体のDOMに反映することができる。

仕様上できないDOM操作をどうやってやってるか気になる人はぜひセッション動画を見てほしい。
ムリクリ実現させた方法が解説されている。

注意点

Javascriptの利用ができるようになったからと言って無制限に利用できるわけではない。

• 合計のファイルサイズが150KB以内（利用ライブラリ等含む）
• ユーザーの操作起因で動く処理のみ許可
• スクリプトの動作時間は5秒以内
  • 外部リソースの取得等があった場合はレスポンスのfirst byteが帰って来たときから更に5秒以内

References

• ドキュメント
• amp-scriptのサンプル
• 関連セッション
  • keynote
  • The glory of amp-script: Unleashing the kraken

Google Domainからの開放

AMPのデメリットとして挙げられる厳しい制限。もう1つがAMPとして配信されるドメインがgoogle.comになてしまう問題。それを自ドメインで配信できるようになる。

AMPページを高速に表示するために、

• CDNエッジサーバからの配信
• サーチ検索結果であれば、結果表示時点での事前読み込み

を行いたく、そのためにはどうしてもGoogleドメインで配信せざるを得ないらしい。
（詳しくはセッション動画参照 ちょっと難しかった。。。）

配信はGoogleドメインだが、ユーザーに表示するドメインを自ドメインにさせる方法がwebpackaging （webpackではない）という仕様。

webpackagingはSigned ExchangeとBundle Exchangeからなる仕様で、AMPを自ドメインで表示するためには、Signed Exchangeを利用する。この仕様はchrome 73から利用可能。

Signed ExchangeはHTTPのrequest,responseに対して証明書付きでひとまとめにすることで、配信ドメインに関係なく自ドメインを証明できるようにする技術。これによりコンテンツ（web page）が

• どこから、だれからでも入手可能
• オフラインでも利用可能
• コンテンツの所有者のURLで表示可能
• Cookieなんかも操作可能

になる。

Signed Exchangeをサポートしているプラットフォームは、Googleの検索結果と、Yahoo Japanの検索結果。
Signed ExchangeをサポートしているPublisherは現在のところ日本では、Yahoo トラベルや一休など。

Signed Exchangeを利用するには、CanSignHttpExchanges をサポートしている証明書を別で発行する必要があり、現在発行できるベンダーはDigiCertだけある。

また、CloudFlareはBeta機能としてSigned Exchangeを利用してのAMP配信を利用でき、機能をON後、CloudFlareからの返信があれば機能を利用できる。

Signed Exchangeを利用すれば実際の配信はGoogle CDNで、ブラウザに表示されるドメインが自ドメインにすることができるが、注意点も必要。

• AMPの有効期限が短時間（最大1週間）
• 証明書の有効期限は90日
• 端末に保存され参照されるのでAMPの内容がキャッシュ可能なものか（個人情報を含んでないか）を確認することが求められる

References

• 解説ブログ
• 関連セッション
  • keynote
  • Chrome + AMP in 2019
  • Signed exchanges for better AMP URLs and easier analytics
  • Maximize Yahoo Japan’s UX with AMP and Signed HTTP Exchanges

amp-story

カンファレンスの目玉の一つ。前から発表されていたコンポーネントだが、利用者からのfeedback等をもとに改善された点などの報告。

ストーリーは今や、インスタグラム、Facebook、Snapchat等に実装されている新しいメディアのフォーマット。
プラットフォーム内だけでの公開であったり、制限がいろいろあったりする。

AMP StoryはこのストーリーというメディアをWebで簡単に構築できるコンポーネントを用意している。
とはいえ結局のところただのWeb pageに過ぎない。AMP StoryはAMPを利用することで、ストーリーっぽいUIのWeb Pageを簡単につくることを可能にしてくれる。

主な特徴、機能としては、

• シェア可能
• リンク可能
• 検索可能
• アタッチメント可能
• 情報のEmbed可能（tweetやyoutube、google mapなどがサポート予定）
• レスポンシブ対応
• 広告を表示可能

百聞は一見にしかず。下記はメディアが作った実際のAMP Story。

レスポンシブ未対応のAMP Story

• https://www.bbc.co.uk/news/ampstories/africafish/index.html
• https://edition.cnn.com/ampstories/entertainment/the-matrix-turns-20-a-look-back
• https://www.pcgamesn.com/amp-stories/best-battle-royale-games.html
• https://www.usatoday.com/amp-stories/beyonce-rule-the-world/

レスポンシブ対応のAMP Story

• https://projects.sfchronicle.com/2019/visuals/guerneville-russian-river-flooding/
• https://www.telegraph.co.uk/visual-stories/best-islands-to-visit/

アタッチメント

ストーリーに載せた情報のより詳細をスワイプアップして表示可能

情報のEmbed

検索可能

ストーリーはWeb pageなのでGoogle検索での検索も可能。

詳細はこちらの動画参照。
https://youtu.be/i7Br9GmpQWs?t=1003

ベストプラクティス

導入事例をもとに、Storyを作る上での、ベストプラクティスも公開しているので参考になる。
これは、AMPでなくても例えばインスタグラムのStoryを作る上でも参考になるかもしれない。

ツール

AMP Storyを作るツールを提供するサービス公開されているので、ゴリゴリコードを書かずとも作ることは可能。

• https://makestories.io/
• https://unfoldstori.es/
• https://www.nws.studio/

References

• ドキュメント
• 関連セッション
  • AMP Stories: The Story so far

AMP Email

カンファレンスの目玉の一つ。まだExperimentalだが、先行して実装している企業からのフィードバックの紹介が多くあった。
AMP EmailはAMPのコンポーネントをEmailに埋め込んで利用できるようにするもの。

現在EmailはTextタイプのものと、HTMLタイプのものがあるが、HTMLタイプのEmailはレイアウトが難しかったり、JavaScriptが使えないため動的な表現がまったくできなかったが、AMP Emailを利用することでそれができるようになる。

互換性

送るときのMIME-typeは text/x-amp-htmlとして送るため、現状のEmailの互換性が保たれていて、AMP Emailが表示できるサービスならAMP Emailを表示して、できないサービスなら、HTML Emailを見せるということができる。

主なコンポーネント

ドキュメントによると、、、、フォームによる情報の送信、カルーセル、light-box、アコーディオンなんかも表示可能。

Google DocのEmail内でのコメント返信

Ecwid(ECのキャンペーンEmailでの画像のカルーセル表示)

効果

• Indeedは、job alert Emailのクリック数が2倍に
• OYOは+57%のCTR、+60%のCVR

パートナー

• AMP Emailを配信できるサービス
  • SendGrid
  • SPARKPOST
• AMP Emailを表示できるクライアント
  • Gmail
  • Yahoo mail
  • Outlook
  • @mail

開発

• 開発するならプレビュー機能がある下記を利用できる
  • https://playground.amp.dev/?runtime=amp4email
• AMP Emailを試しに送信するなら下記が利用できる
  • https://amp.gmail.dev/playground/

References

• ドキュメント
• 関連セッション
  • AMP for Email: pushing the boundaries of email with AMP

今後について

2019年はAMPでの

• 決済機能
• CSSの50KB制限の条件付きでの緩和
• optimizerで最適化処理したAMPファイルもvalidにする予定
• Stateful ページの実装
  • 例えば商品検索ページでいろいろ絞り込みして商品詳細ページへ遷移して、戻るボタンで商品検索ページに戻るとさっき絞り込みした状態が復元するとか

長期的視点

AMPを実装するときは2つの構成がある。

• Paired AMP
  • 非AMPと対になるAMPページの2つを用意する
• AMP First
  • AMPページだけ用意する

あくまで目標はAMP Firstな実装なのでそれに足りない機能を検討、実装していく。

AMP Bento 🍱

AMPは、アクセシビリティやUXが考えられた素晴らしいコンポーネントが多数存在する。
これらをAMPページ以外でも気軽に利用できるようにしていきたい。

現在は、AMP runtimeである https://cdn.ampproject.org/v0.js がページには必須だが、これがなくても動くようにしたいし、VueやReactといった別コンポーネントと相互にインタラクトできるようにしていきた。

そのコンセプトの名前が AMP Bento 🍱

References

• 関連セッション
  • What's next in AMP