AMP HTML触ってみた
AMPってなに？
「Accelerated Mobile Pages」略してAMP。
モバイルサイトの UX 改善(ユーザー体験)を目的とした Google 主体のプロジェクトで、 画像やスマートアド等、ロードコストのかかるコンテンツを即座にロードすることにより、 UX を改善しようというのが主な目的。
AMP HTML というオープンフレームワークが発表されており、この仕様に沿ってモバイルサイトを作成すると高速で読み込まれるサイトが実現できるというもの。
Amp が用意した javascript(https://cdn.ampproject.org/v0.js)を読み込むことで、AMP仕様のHTMLタグ(AMP Components)が使用可になるので、これを使ってマークアップする形になります。
特徴
とりあえずファーストビューを表示する
AMP で作成したサイトでは、ファーストビューをできるだけ早く、かつ CPU 負荷の高く ないものという条件で プレレンダリングするようブラウザに伝えられるので、サイトを訪れた際のファーストビ ューがかなり早い。
キャッシュ
AMP の仕様で作成されたサイトは Google・Twitter 側にキャッシュされ、 このキャッシュからコンテンツを返すことによって、高速表示を可能にしている。 (Google が提供する CDN 経由での配信可能)
Javascript
ロードを遅くする要因の一つとして javascript を挙げており、
AMP が用意している javaScript 以外の javaScript は”一切含めない”としている。 広告を表示したり解析したりする場合に javascript が使用されるが、
AMP ではこれらの javascript を許可せずに、今後の課題としている。
現状、iframe で広告を表示できる。
コンテンツサイズ
ブラウザは画像ファイル等を読み込む前にあらかじめ設定されたサイズを参照し、表示領域を確保することができる。
例えば、300×200 のバナーがあったとき、実際の画像サイズと同じ値を指定するとレンダリングが速くなる。
AMPでは、このようにサイズ指定を必須としている。

必須なこと
・ HTML5 を使用
・ html タグに以下の文字列を記載すること <html ⚡> または <html amp>
（イナズママーク？とかめんどくさw）
・ <head>と<body>を記載すること(まあこれは今まで通り。。)
・ <canonical>を記載すること
AMP で書いたページ(モバイルサイト)以外の通常ページがある場合はそこに、 なければ AMP ページ自身に標準化するように記載する
・ <meta charset="utf-8">を記載すること
・ <meta name="viewport" content="width=device-width,initial-scale=1,minimum- scale=1,maximum-scale=1,user-scalable=no,minimal-ui">を記載すること
・ <script async src="https://cdn.ampproject.org/v0.js"></script>を記載すること
ここに AMP のカスタムタグの定義等が書かれている模様。
・ <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript> を記載すること
AMP Components
AMP が用意した HTML のカスタムタグのこと。
・画像を表示するAMP Component
<amp-img width=500 height=500 src="URL"></amp-img> ※サイズ指定は必須で、ないと表示されない。
これ以外にも多数の AMP Components が用意されている。
amp-audio amp-anim amp-ad amp-pixel amp-video amp-carousel amp-lightbox amp-iframe amp-instagram amp-twitter amp-youtube
今後の展望
現状 javascript 等に課題が残るものの、Google 主体ということから今後はモバイルサイト コーディングのデファクトスタンダードになっていくと思われる。ちなみに、WP の AMP プラグインも開発中とのこと。
参考
・AMP HTML source code on GitHub https://github.com/ampproject/amphtml
・Create Page Snippets https://github.com/ampproject/amphtml/blob/master/docs/create_page.md ・AMP Project FAQ
https://www.ampproject.org/faq/

