AMP 完全に理解した 2018/09/22
 【第4回】JSフレームワーク(またはライブラリ)× ビアバッシュ 初⼼者勉強会 Izuta Hiroyuki 

⾃⼰紹介 • ⽒名: いずた ひろゆき • Twitter・GitHub: @bakunyo • フリーランスエンジニア 

https://twitter.com/ito_yusaku/status/1042604780718157824 ちょい前にバズってたやつ 

໨࣍ • AMP 概要 • 事例紹介 • AMP の今後 

AMP 概要 

AMP って何 • Accelerated Mobile Pages の略 • Google が中⼼となって進めているオープンソースプロジェクト • モバイル環境でも快適・⾼速にウェブサイトを閲覧できるよう にするための仕組み ←モバイルのGoogle検索結果 でこのマークがついてるページは AMP対応済 

AMP の構成要素 • AMP HTML • AMP JS • AMP Cache 

AMP HTML • パフォーマンスを維持するために制限が課せられたHTML • ⼀部は AMP 固有タグに置き換えられる（amp-xxx） • 制限の例 • CSS は head 内にインライン記述 • JS は基本的に使⽤できない（AMP JSを除く） 

AMP JS • AMP HTML で利⽤が許された JS の外部リソース • async で読み込むため、レンダリングブロックしない • 後ほどいくつか紹介 

AMP Cache • AMP が有効なページをキャッシュして返すコンテンツ配 信ネットワーク • = Google AMP Cache • 後ほどもう少し詳しく 

AMP 概要 おさらい • AMP HTML • パフォーマンスのために制限が課せられたHTML • AMP JS • AMP HTML で使える JS 外部リソース • AMP Cache • AMP ⽤コンテンツ配信ネットワーク 

事例紹介 

事例紹介 • 最新巻.jp • “巻” なので注意 • マンガの最新巻情報をお知らせ • 全ページAMP対応 • レスポンシブ 

AMP JS コンポーネント紹介 

amp-image-lightbox 画像タップでフルスクリーン表⽰ ※あの丸⼭ゴンザレスさん著作の グルメ漫画（9/21発売） 

amp-lightbox-gallery 複数の画像をまとめられる
 フォトギャラリー 横スライドで次の画像へ 

amp-iframe AMP で iframe が使えるようになるタグ
 
 漫画のコマが著作権的に安⼼して使える
 マンガルーさん（ https://mangaloo.jp/ ）の 埋め込みフレームに利⽤
 
 iframe の中では実は JS が使える 

AMP JS を使った実装（ amp-img の例） 1. タグ毎に必要な JS ライブラリを head で async 読み込み 2. AMP 固有タグを使う 3. 基本的にこれだけ ゆとりに優しい仕様 

AMP Cache をもう少し詳しく 

スマホで「最新巻jp」の検索結果 Google 検索結果 Yahoo! JAPAN 検索結果 

Google 検索結果 → AMP ⽤ページ www.google.jp/amp/s/{ドメイン} にて配信される
 （⽶ Google では .com） CDNから配信されていることを⽰すヘッダー をクリックするとキャッシュ元ページへ 遷移する 【メタタグ関連】
 ・robots = noindex
 ・canonical はキャッシュ元ページ 

search.yahoo.co.jp/amp/s/{ドメイン}/… にて配信される ヘッダーの挙動、メタタグともに
 Googleとほぼ同じ Yahoo! JAPAN 検索結果 → AMP⽤ページ 

中⾝は iframe Google も Yahoo も、同じURLを 参照
 
 最新巻-jp.cdn.ampproject.org
 
 というサブドメインが切られている Google AMP Cache ドキュメント https://developers.google.com/amp/cache/
 
 にサブドメインのルールについて記載がある 

なので URL開けば普通に⾒れる
 
 ←ヘッダー表⽰⽤スペースもあり
 
 AMP Cache コンテンツ配信プラット フォームは、ヘッダー部分を独⾃実装 して iframe で中⾝を指定してやれば いけそう 

流れ再確認 (PPHMF
".1
$BDIF
 \υϝΠϯ^DEOBNQQSPKFDUPSH (PPHMF
ݕࡧ
".1
༻ϖʔδ
 XXXHPPHMFKQBNQT\υϝΠϯ^ :BIPP
ݕࡧ
".1
༻ϖʔδ
 TFBSDIZBIPPDPKQBNQT\υϝΠϯ^ ①検索結果がAMP Cache済 ならAMP⽤ページを表⽰ ②iframeから参照 

AMP の今後 

イベント • AMP Contributor Summit • https://events.withgoogle.com/amp-contributor-summit/ • 2018/09/25-26 @Google in Mountain View, California • AMP Roadshow • https://www.ampproject.org/amp-roadshow/ • 来⽉、インドの3都市にて開催 

Bing 9⽉19⽇にアナウンス
 Introducing Bing AMP viewer and Bing AMP cache
 https://blogs.bing.com/Webmaster-Blog/September-2018/Introducing- Bing-AMP-viewer-and-Bing-AMP-cache ※⼿元では確認できず 

使ってみての感想 • AMP の制限を守ろうとすると、⾃然とパフォーマンスが よくなる • AMP JS でできることがどんどん増えているため、サイト をつくるうえで困ることがそんなに無くなってくる • もう少し⾒守ります 

APPENDIX • 公式サイト • https://www.ampproject.org/ • AMP by Example • https://ampbyexample.com • GitHub • https://github.com/ampproject • Google AMP Cache ドキュメント • https://developers.google.com/amp/cache/ • Yahoo!検索ヘルプ AMP対応ページ表⽰について • https://www.yahoo-help.jp/app/answers/detail/p/595/a_id/138177/~/ amp%E5%AF%BE%E5%BF%9C%E3%83%9A%E3%83%BC%E3%82%B8%E8%A1%A8%E7%A4%BA%E3 %81%AB%E3%81%A4%E3%81%84%E3%81%A6