AMPによるモバイルサイトの実装 - リクルート住まいカンパニー Tech Blog

f:id:recruit-sumai:20170310185752p:plain

AMP(Accelerated Mobile Pages)は、モバイルページの高速化を目的とした仕組みです。

Pinterestの調査では、通常のモバイルページと比較して、データ通信量が1/8に削減され、表示速度が4倍早くなることがわかっています。

また、米国最大級のソーシャルニュースサイトRedditは先日AMP対応をリリースし、従来のモバイルページと比較して、約7倍から30倍の高速化を実現したと報告しています。

このように、AMPによる高速化の効果は極めて大きいです。ただ、AMPはもともとニュースや記事ページのみを対象とした技術です(AMP対応済みのニュース・記事が、Google検索結果で別枠(トップニュース)として表示されているのを目にしたことがある方も多いかと思います)。なので、高速化というメリットがある一方で、機能やデザインの制約が大きいという点がデメリットとして挙げられます。

f:id:recruit-sumai:20170124112412j:plain

しかし、AMPの進化は早く、最近では基本的なモバイルページに必要な要素はほとんど提供されつつあります。ここでは、最新のAMPによりどのようにモバイルサイトを作るのか説明したいと思います。

AMPを構成する3つの基本要素

はじめに、AMPの仕組みについて簡単に説明します。

AMPは、AMP HTML, AMP JS, Google AMP Cacheの3つの要素で構成されます。

AMP HTML

AMP HTMLは、高速化のために制約を加えられたHTMLです。

AMPでは、HTML、CSS、JavaScriptの一部について制限を加えることで、高速化を実現しています。具体的には、以下のような制約があります[1]。

HTML：一部タグが使用禁止・書き換えが必要(例：<img>を<amp-img>に書き換え)
CSS：インライン記述のみで、最大サイズは50KB
JavaScript：原則として、AMP HTML上にJavaScriptを記述できない

制限がある一方で、AMP HTMLでは、拡張機能(Extended Components)が提供されています。これらを利用することで、JavaScriptの記述なしで、リッチなコンテンツを作成することができます。詳しくは、後述します。

AMP JS

AMPページのリソース読み込みやレンダリングを行うJavaScriptライブラリです。

例えば、AMP JSによるレンダリングでは、リソースの読み込みの優先順位がつけられています。ある程度長さのあるページでは、ファーストビューで目に入る画像などすぐに目に入るような画像のみを優先的に読み込むようにして、ページ下部にある画像などは後回しにしています[2]。

Google AMP Cache

AMPページをキャッシュし、配信する仕組みです。有効なAMPページは、GoogleのCDNにキャッシュされます。上記のAMP HTML及びAMP JSの最適化に加えて、Google検索結果のニュースカルーセルなどでは、CDNからAMPページを読み込んでいるため、ページが高速で表示することができます。今回は、AMP Cacheの仕組み及びAPIについては割愛します[3]。

AMP HTML Extended Components

AMPでは、HTML・CSS・JavaScriptに制限がありますが、その代わりにAMP HTML Extended Componentsとして様々な機能が提供されています。

これらのコンポーネントを組み合わせることで、高速化を維持しつつ以下のようなモバイルサイトを簡単に作ることができます。

以下、いくつかのコンポーネントについて具体的な使い方を説明します。利用するサンプルについては、AMP by Exampleのソースを利用しています。最新のサンプルについては、こちらを参照してください。

基本的なAMPページ

はじめに、ベースとなるシンプルなAMPページを作成します。

AMP HTMLの必要要件として、以下のようなものがあります。詳しい要件は、AMP HTML ページを作成する等を参照してください。

<html> タグの代わりに、<html ⚡> タグを利用する
headタグ内に、<link rel="canonical" href="$SOME_URL" /> を記述する。AMPページの元となる通常のHTMLページのリンクを指定する。
AMP JSライブラリを読み込む

上記で作成したAMPページをベースに、例としてサイドメニューとカルーセルについて実装する方法を説明します。

サイドメニュー(amp-sidebar)

サイドメニューは、amp-sidebarにより作成できます。

Extended Componentsを使う場合は、まずコンポーネントを明示的に読み込む必要があります。headの中に、以下を記述してください。

読み込んだ<amp-sidebar>タグによりサイドメニューを実装します。bodyの中に以下を記述してください。 (画像については、amp-sidebar - AMP by Exampleから取得もしくは、任意で用意してください。)

<amp-sidebar>タグの中に、リスト要素などでメニュー項目を追加するだけです。各項目には、画像などの要素を追加することも可能です。

サイドメニューの表示については、<button>タグなどに on=‘tap:sidebar.open’を追加することで実装できます。非表示についても、同様です。

動作確認のイメージは以下のようになります。

f:id:recruit-sumai:20170124112414g:plain

amp-sidebar の最新のサンプルについては、amp-sidebar - AMP by Exampleを参照してください。

カルーセル(amp-carousel)

amp-carousel、amp-image-lightboxを読み込みます。

amp-carouselはカルーセルを作るためのコンポーネントで、amp-image-lightboxは画像を全画面に拡大表示するためのコンポーネントです。

実装は、以下のようになります。

3枚の画像がカルーセルで表示され、クリックすると全画面で表示されます。

f:id:recruit-sumai:20170124112354g:plain

amp-carousel 及び amp-image-lightboxの最新のサンプルについては、amp-carousel - AMP by Example、amp-image-lightbox - AMP by Exampleを参照してください。

それ以外の機能

このように、Extended Componentsを使うことで、とても簡単にモバイルサイトを作っていくことができます。凝ったモバイルサイトでなければ、高速化だけでなく生産性という観点でも、AMPは優れたフレームワークになるかもしれません。

サイドメニューやカルーセル以外にも、当初AMPで利用できなかったフォーム(amp-form)や、ページの再読み込みなしにリアルタイムにコンテンツを更新できるamp-live-listなどのコンポーネントが提供されています。これら以外にも様々なコンポーネントがあり、またすごいスピードで開発が進んでいます。以下は、amp-live-listの例になります。

f:id:recruit-sumai:20170124112335g:plain