TRY AND ERRΦR

気になったこと、勉強したこと、その他雑記など色々メモしていきます。。Sometimes these posts will be written in English.,

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 の仕様で作成されたサイトは GoogleTwitter 側にキャッシュされ、 このキャッシュからコンテンツを返すことによって、高速表示を可能にしている。 (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 プラグインも開発中とのこと。