メモです。ここには有益な情報はありませんのでご理解ください。
実際に動いているものから見たAMP
見かけ上は画面が変わっていますが、ページが移動していないと考えると「早さの理由」が解るかと思います。
検索結果の表示
Top Stories
コンテンツ1 コンテンツ2 … 画像1 画像2 … サマリー1 サマリー2 … 検索結果
…
Top Storiesのサマリー表示は、最初にロードされる。
コンテンツ(本文)はiframeに入っていて、出番が来るまでは非表示になっている。半分程度は読み込みを待機している。
ユーザーが操作をして画像やコンテンツが表示されるべき領域に近づくと追加で読み込まれる。
この辺りの挙動は、デベロッパツールで検索結果を表示させた後に帯域を絞ってやると分かりやすい。
Twitter等の専用ライブラリがある。
<script custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js" async></script>
(一例)
コンテンツ内の表示
ヘッダ(head)
コンテンツ(body)
本文
通信回数が減るように、詰め込めるものは詰め込んでおく方針。
Webフォント類を利用する場合は指定された物を使う。
色々なもののサイズを指定してあったり、代替の画像セットを用意している。
iframe内で利用されるURL
https://amp.gstatic.com/v/ (コンテンツURL) ?amp_js_v=0
※2016年2月頃の仕様では、以下のURLに変更されているようです。
https://cdn.ampproject.org/v/ …
一例
https://amp.gstatic.com/v/www.buzzfeed.com/amphtml/juliegerstein/heres-what-its-like-to-work-in-a-catty-environment?amp_js_v=0
(キャッシュ)→
http://www.buzzfeed.com/amphtml/juliegerstein/heres-what-its-like-to-work-in-a-catty-environment
(AMP向け表示)
＝
http://www.buzzfeed.com/juliegerstein/heres-what-its-like-to-work-in-a-catty-environment
(本来のコンテンツ)
わざとエラーを出す
https://amp.gstatic.com/v/www.twitter.com?amp_js_v=0
(Twitter)
Show errorsをクリックすると、何がおかしいか確認できる(リンク付きなのでデバッグしましょうという優しさ)
403等のステータスが返却された場合は別の表示になる。
こちらを見た方が詳しい
面倒な事をしなくても、ここに詳細があります。
プロジェクトの紹介。
はてなブログでAMP対応させるには？
無理矢理やれるんじゃないですか？という感じですが、眺めてみた感想は、速報性があるコンテンツが(トラヒック的に)効率的に配信できる仕組みのようですので、はてブが対応すれば良いのではないかと思います。
cHTMLやXHTMLといった時代のものを思い出す懐かしい感じがするやつです。
やっている事は最新なのですが、相変わらずなのです。
仕様と実際の動作を一緒に眺めると「こういう仕組みで動いているのか」と理解しやすいと思います。
プラスチックとモーター、その他の構成で動く熊。
