Accelerated Mobile Pages Project
先日、Googleから「AMPプロジェクト（Accelerated Mobile Pages Project）」が紹介されました。
このAMPプロジェクが作ったAMP HTMLというフレームワークに沿ってページを実装することで、速いページを作れるだけでなく、GoogleやTwitterからアクセスしたときにキャッシュを利用してまるで、ネイティブアプリのような高速表示を行うことができるようになります。
AMP（ACCELERATED MOBILE PAGES）はモバイルでのWebページの表示を高速化することを目的に作られたプロジェクトです。
Accelerated Mobile Pages Project
GoogleやTwitter、WordPress.comなどのIT系企業と、ニュースメディアなどが参加しています。今回は、特にニュースコンテンツなどの静的ページを高速化することに焦点を絞った動きとなっています。
AMPではAMP HTMLというフレームワークを定めています。
AMP HTMLは既存のHTML/CSS/JavaScriptに制限を加えたもので、サーバー側での特別な設定は必要ありません。ページの読み込みに影響するJavaScriptやiframe、画像などの利用が大きく制限されており、この仕様に沿ってページを作れば速いページを実現することが可能とされています。
さらに、AMPで作られたページはGoogleやTwitterのサーバーにキャッシュされます。
Google検索結果やTwitterからAMP HTMLで作られたページにアクセスする場合は、ページを読み込むのではなく、GoogleやTwitterのサーバーのキャッシュを表示するようになります。
そのため、ネイティブアプリのようなスムーズな表示ができるようになります。どのような動きをするのかは、AMPの公式サイトの動画を見れば分かりやすいです。
Accelerated Mobile Pages Project
AMPの仕様が公開されています。
ampproject/amphtml · GitHub
AMPではまずhead内で AMP JS libraryを読み込みます。これによって、外部リソースの読込が制限され、AMP独自の要素が利用できるようになります。
そして、HTML/CSS/JavaScriptのルールにしたがってマークアップを行います。例えば現状以下のようなルールがあります。
- 使用できるhtml要素に制限がある
- JavaScriptがほぼ使えない
- CSSはすべてインラインで記述、セレクタにも一部制限
- head内の書き方やdoctype宣言にも指定がある
AMP HTMLで使える要素や必要なマークアップ
=>amphtml/amp-html-format.md at master · ampproject/amphtml · GitHub
JavaScriptが利用できない代わりに、独自の要素（”amp-img”、”amp-youtube”、”amp-image-lightbox”）が用意されており、SNSやYoutubeを埋め込んだり、カルーセルやライトボックスなどある程度の動きのあるページを作ることも可能なようです。
AMPの独自要素
=>amphtml/README.md at master · ampproject/amphtml · GitHub
=>amphtml/README.md at master · ampproject/amphtml · GitHub
また、AMPの規格に沿ったソースコードになっているかどうかはChromeのディベロッパーツールの「console」で確認可能です。ディベロッパーツールを開き、URLの末尾に”#development=1″を付けて更新してみましょう。
AMPを実装することができれば、Google検索やTwitterなどから、ユーザーが全くストレスなくアクセスすることができるようになります。
今回のAMP HTMLではECサイトは射程に含まれていませんが、ECサイト内のブログコンテンツや、キャンペーンページではAMP HTMLが利用できる可能性があります。
AMPの仕様はアップデートされていくようですので、今後に動きに注目していきたいと思います。
