• このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加

Accelerated Mobile Pages Project

先日、Googleから「AMPプロジェクト(Accelerated Mobile Pages Project)」が紹介されました。

Official Google Blog: Introducing the Accelerated Mobile Pages Project, for a faster, open mobile web

このAMPプロジェクが作ったAMP HTMLというフレームワークに沿ってページを実装することで、速いページを作れるだけでなく、GoogleやTwitterからアクセスしたときにキャッシュを利用してまるで、ネイティブアプリのような高速表示を行うことができるようになります。

AMP プロジェクトとは

AMP(ACCELERATED MOBILE PAGES)はモバイルでのWebページの表示を高速化することを目的に作られたプロジェクトです。

Accelerated Mobile Pages Project

GoogleやTwitter、WordPress.comなどのIT系企業と、ニュースメディアなどが参加しています。今回は、特にニュースコンテンツなどの静的ページを高速化することに焦点を絞った動きとなっています。

AMP HTML フレームワーク

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を実装するには

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に沿っているか確認

今後の動きに注目

AMPを実装することができれば、Google検索やTwitterなどから、ユーザーが全くストレスなくアクセスすることができるようになります。

今回のAMP HTMLではECサイトは射程に含まれていませんが、ECサイト内のブログコンテンツや、キャンペーンページではAMP HTMLが利用できる可能性があります。

AMPの仕様はアップデートされていくようですので、今後に動きに注目していきたいと思います。