Share on FacebookTweet about this on TwitterShare on Google+

D2Dで11/3にAMPについて行ったワークショップのレポート
AMP - ACCELERATED MOBILE PAGES PROJECT
はGoogleがモバイル端末でのウェブページの表示の高速化のためのプロジェクトとして公開しました。

※D2Dとは”Dev & Design Draft” 特定の技術やプロダクトに限定せずに、Web制作者が今イチバン気になる情報を知ろうという領域横断型の勉強会シリーズです。
https://d2draft.doorkeeper.jp/

AMPオフィシャルページ
https://www.ampproject.org/

AMP HTML source code
https://github.com/ampproject/amphtml

ただ当日の情報を持ち寄って検証して見ると、ページコーディングのルール作りと言うよりは
FacebookがOGP(Open Graph protocol)でarticle(記事)の内容の概要を取得しキャッシングする仕組みのgoogle版のような側面を持ちます。

仕様の詳細よりもテスト稼働の結果で動作のイメージを見たほうが理解が早いと思います。

Chromeでデベロッパーツールを起動してデバイスモードをモバイル端末に設定してから↓のURLにアクセスします。

demo
From: http://g.co/ampdemo

01

google.co.jpで表示されにくい場合は、www.google.co.ukにすると表示されやすくなるかもしれません。

最近のニュースに関するキーワードを検索すると、各ニュースメディアの記事のサマリーはカルーセルで表示されます。

02

クリックすると、タイムラグなしにニュースの本文が表示されます。

03

この状態でスワイプすると、次のニュースにページごと遷移します。

04

このページを表示するまでは、ページ表示や画像のロードが非常に速やかに処理されます。ページ内容や画像はGoogleにキャッシュされCDNから読み込むために非常に高速です。
最終的にどのように活用されるかは全てあきらかではありませんが、これが1つの事例です。

ここに表示されるBBCやNew York Timesにアクセスすると各記事にrel=”amphtml”というコードが記述されています。

参考ページ)
http://www.bbc.com/news/business-34717990

06

<link rel=”amphtml” href=”http://www.bbc.co.uk/news/amp/34717990″>

このamphtmlのアクセスすると非常にシンプルなAMPの仕様で記述されたHTMLページが表示されます。

05

例えば画像のタグがimgタグでなく

<amp-img src=’http://ichef.bbci.co.uk/news/999/cpsprodpb/0275/production/_86492600_jp.jpg’〜

となっているのが確認できるでしょう。

またこちらの記事のコードには

<link rel=”canonical” href=”http://www.bbc.co.uk/news/business-34717990″>

さきの記事のURLがカノニカルタグで指定されています。

wordpressの開発元automaticからすでにリリースされているプラグイン

wordpress plugin
https://wordpress.org/plugins/amp/

をインストールすると、各記事にamphtmlが指定され、自動的にパーマリンクで各記事の末尾に/amp/が追加されたページが追加されます。
このページにアクセスすると、画像のimgタグをamp-imgに置換されたり仕様を変換されたページが表示されます。
また元のページのカノニカルタグも自動で追加されます。

他のCMSも追随するものと思われます。

AMPの仕様はgithubのtutorialやReferenceを参照してください。

画像等はamp-imgタグを使う事でキャッシュされるとアナウンスされています。
またFomatのHTML Tagsに書かれているように、使えないタグが多くあります。基本的にampが提供するjavascritp以外は使用がみとめられていません。

ページのエレメントに関しては、カルーセル、広告を入れるiframe、instgram、twitter、youtube、pinterest、anime、lightbox、audioなどはタグベースで提供され、それぞれのjavasciptを読み込むことでタグを記述するだけで表示されます。

<script async custom-element=”amp-youtube” src=”https://cdn.ampproject.org/v0/amp-youtube-0.1.js”></script>

このAMPでページを記述することで、twitterなどの非同期の読込や広告の読み込みなどをページに入れてもページのロードとレンダリングが遅延しないような設計になっています。

また各ページのAuthorのロゴやタイトルなどの情報はJSON-LDで記述され、ページヘッダーに記述されます。最初に表示されたカルーセルのメディアのロゴなどはここで指定されていま。
typeの分類はhttp://schema.orgに準拠します。

<script type=”application/ld+json”>
{
“@context”: “http://schema.org”,
“@type”: “NewsArticle”,
“headline”: “Open-source framework for publishing content”,
“datePublished”: “2015-10-07T12:02:41Z”,
“image”: [
“logo.jpg”
]
}
</script>

githubに記載されるtutorialやコード例

Resources:

Tutorials:

Reference:

Technical Specifications:

この仕様に関しては、まだまだ改善されていくということですが、いろいろなレポート記事を見ると
ページを新しく増やすのはどうかと思うが
この仕様の善し悪しはともかく、サーチエンジンの巨人が言ってる事に逆らって得はないという論調が多く見られます。

今すぐ企業コンテンツなどを作る際に必要な知識ではないかもしれませんが、モバイルフレンドリーのようにある日リリースが発表され対応を求められるかもしれません。

アウトライン程度は把握しておいても損はないでしょう。