AMP 完全に理解した

Transcript

1. AMP 完全に理解した 2018/09/22
 【第4回】JSフレームワーク(またはライブラリ)× ビアバッシュ 初⼼者勉強会 Izuta Hiroyuki
2. ⾃⼰紹介 • ⽒名: いずた ひろゆき • Twitter・GitHub: @bakunyo • フリーランスエンジニア
3. https://twitter.com/ito_yusaku/status/1042604780718157824 ちょい前にバズってたやつ
4. ໨࣍ • AMP 概要 • 事例紹介 • AMP の今後
5. AMP 概要
6. AMP って何 • Accelerated Mobile Pages の略 • Google が中⼼となって進めているオープンソースプロジェクト • モバイル環境でも快適・⾼速にウェブサイトを閲覧できるよう にするための仕組み ←モバイルのGoogle検索結果 でこのマークがついてるページは AMP対応済
7. AMP の構成要素 • AMP HTML • AMP JS • AMP Cache
8. AMP HTML • パフォーマンスを維持するために制限が課せられたHTML • ⼀部は AMP 固有タグに置き換えられる（amp-xxx） • 制限の例 • CSS は head 内にインライン記述 • JS は基本的に使⽤できない（AMP JSを除く）
9. AMP JS • AMP HTML で利⽤が許された JS の外部リソース • async で読み込むため、レンダリングブロックしない • 後ほどいくつか紹介
10. AMP Cache • AMP が有効なページをキャッシュして返すコンテンツ配 信ネットワーク • = Google AMP Cache • 後ほどもう少し詳しく
11. AMP 概要 おさらい • AMP HTML • パフォーマンスのために制限が課せられたHTML • AMP JS • AMP HTML で使える JS 外部リソース • AMP Cache • AMP ⽤コンテンツ配信ネットワーク
12. 事例紹介
13. 事例紹介 • 最新巻.jp • “巻” なので注意 • マンガの最新巻情報をお知らせ • 全ページAMP対応 • レスポンシブ
14. AMP JS コンポーネント紹介
15. amp-image-lightbox 画像タップでフルスクリーン表⽰ ※あの丸⼭ゴンザレスさん著作の グルメ漫画（9/21発売）
16. amp-lightbox-gallery 複数の画像をまとめられる
 フォトギャラリー 横スライドで次の画像へ
17. amp-iframe AMP で iframe が使えるようになるタグ
 
 漫画のコマが著作権的に安⼼して使える
 マンガルーさん（ https://mangaloo.jp/ ）の 埋め込みフレームに利⽤
 
 iframe の中では実は JS が使える
18. AMP JS を使った実装（ amp-img の例） 1. タグ毎に必要な JS ライブラリを head で async 読み込み <script async src="https://cdn.ampproject.org/v0.js"></script> 2. AMP 固有タグを使う <amp-img {src, alt, layout などのタグ毎に必要な属性}></amp-img> 3. 基本的にこれだけ ゆとりに優しい仕様
19. AMP Cache をもう少し詳しく
20. スマホで「最新巻jp」の検索結果 Google 検索結果 Yahoo! JAPAN 検索結果
21. Google 検索結果 → AMP ⽤ページ www.google.jp/amp/s/{ドメイン} にて配信される
 （⽶ Google では .com） CDNから配信されていることを⽰すヘッダー をクリックするとキャッシュ元ページへ 遷移する 【メタタグ関連】
 ・robots = noindex
 ・canonical はキャッシュ元ページ
22. search.yahoo.co.jp/amp/s/{ドメイン}/… にて配信される ヘッダーの挙動、メタタグともに
 Googleとほぼ同じ Yahoo! JAPAN 検索結果 → AMP⽤ページ
23. 中⾝は iframe Google も Yahoo も、同じURLを 参照
 
 最新巻-jp.cdn.ampproject.org
 
 というサブドメインが切られている Google AMP Cache ドキュメント https://developers.google.com/amp/cache/
 
 にサブドメインのルールについて記載がある
24. なので URL開けば普通に⾒れる
 
 ←ヘッダー表⽰⽤スペースもあり
 
 AMP Cache コンテンツ配信プラット フォームは、ヘッダー部分を独⾃実装 して iframe で中⾝を指定してやれば いけそう
25. 流れ再確認 (PPHMF
    ".1
    $BDIF
 \υϝΠϯ^DEOBNQQSPKFDUPSH (PPHMF
    ݕࡧ
    ".1
    ༻ϖʔδ
 XXXHPPHMFKQBNQT\υϝΠϯ^ :BIPP
    ݕࡧ
    ".1
    ༻ϖʔδ
 TFBSDIZBIPPDPKQBNQT\υϝΠϯ^ ①検索結果がAMP Cache済 ならAMP⽤ページを表⽰ ②iframeから参照
26. AMP の今後
27. イベント • 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都市にて開催
28. 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 ※⼿元では確認できず
29. 使ってみての感想 • AMP の制限を守ろうとすると、⾃然とパフォーマンスが よくなる • AMP JS でできることがどんどん増えているため、サイト をつくるうえで困ることがそんなに無くなってくる • もう少し⾒守ります
30. 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