ケータイ用語の基礎知識

第738回：AMP とは

（2016/1/5 14:16）

モバイル向け静的コンテンツの読み込みを高速化

　今回紹介する「AMP（Accelerated Mobile Pages）」は、米グーグルとTwitterが共同で立ち上げた「Accelerated Mobile Pages Project」のオープンソースプロジェクトです。モバイル向けに最適化し、高速に読み込んで表示できるコンテンツを作成できるフレームワークになります。基本的にはニュースサイトなどから提供される静的コンテンツ向けの、高速化技術になります。

　このフレームワークには、モバイル端末がコンテンツを高速に表示しやすいよう、レイアウトを予測しやすく、最適化されたテンプレートが含まれています。モバイル機器でのWeb表示というと、テキストの読み込みが終わった後でも画像や広告をダウンロードし終わるまで、しばらく表示までタイムラグがあったりといったことがあるのが普通だったこれまでとは異なり、これを利用することで、スマートフォンやタブレットでのWebコンテンツ表示を大幅に高速化できるようになるのです。

　AMPでは、表示が早く端末プロセッサへの負荷がそれほど高くないコンテンツに関しては、ユーザーがコンテンツをクリックする以前にドキュメントのレンダリングを終えるため、プリレンダリングを実施します。

　フレームワークは従来のWeb技術のサブセットで構築されていてので、アプリケーションやプラットフォーム、デバイスを問わずにひとつのコードで動作が可能です。たとえば、パソコン向けのChromeやFirefoxというようにモバイル端末以外の機器のモダンブラウザーや、多くの機器向けに作られているWebViewでも正しく表示されるはずです。

　日本の主要なコンテンツ提供元としては「朝日新聞DIGITAL」、「毎日新聞」、「産経デジタル」といったニュースサイトが、このフレームワークに基づいたコンテンツ提供を表明しています。また、ブログのプラットフォームでは「WordPress」がAMP対応プラグインの開発を始めており、いずれはこれに対応して、スマートフォンなどでは高速に表示が可能なブログというようなページも出てくることでしょう。英国BBCニュースのように既にAMPでの出力も開始しているサイトも海外には存在します。

　同じようなニュースサイト向けのフレームワークとしては、Appleの「Apple News Format」がありますが、これはiPhone、iPad向けのアプリ「News」に記事を配信するための仕組みで、主に画面サイズの異なるiOSデバイスであってもそれぞれに最適な表示ができるよう考えられたものです。

　AMPは、Apple News Formatとは異なり、オープンなモバイルWebをベースにしています。そのため、AMPフレームワーク向けのHTMLで記述する以外の特別な設定をせずとも、たとえばそのページがリンクされていればTwitter for iOS/Androidアプリでツイート内容を表示する、といった機能を使うことが出来ます。

HTMLサブセット化、最適化と非同期読み込みJSライブラリで高速化

　AMPフレームワークは、「AMP HTML」「AMP JS」「AMP CDN」次の3つのパートから構成されています。

　1つ目の「AMP HTML」は、一般的なWebコンテンツを構成するための言語であるHTMLをベースにしたサブセットで、これにカスタムAMPプロパティと呼ばれる要素が追加されています。MP HTMLドキュメントは、他のHTMLドキュメントと同様にWebサーバー上にアップロードされ、コンテンツとして提供できるように、サーバー上には特別な設定など必要ありません。

　HTMLの形式としては、普通の<!doctype html>で始まるHTMLドキュメントと同様の形をしています。ただし、普通のHTMLでは<!html>となるところが<!html amp>などといった形で始まり、CSSの定義は<!style>要素を使ってインラインで埋め込まれます。ただし、AMP GitHubにあるように、普通のHTMLと比べて「form」「param」「frame」などのタグが禁止されており、「video」「audio」などは専用のカスタム要素が用意されています。

AMP HTMLフォーマットのサンプル（AMP Webサイトより）。AMP HTMLはコンテンツの高速化に特化したHTMLサブセットだ。HTMLのトップレベル要素が<!html>となるところが<!html ⚡>となっているが、あとは普通にHTMLとして読むことができる

　2つ目の「AMP JS」は、外部のリソースを非同期で読みだすようになっており、遅延の要因にならないようにしています。またiframes要素のサンドボックス化、リソース読み出し以前のレイアウトの事前計算、速度の遅いCSSセレクターの禁止なども「AMP JS」での高速化技術の1つです。

　「AMP CDN」のCDNとは、コンテンツ配信網（Contents Delivery Network）のことです。Webコンテンツの配信では、キャッシュデータ、動画、画像データを大本の配信元であるWebサーバーからではなく、負荷分散などの目的で中継サーバーから配信を行っています。「AMP CDN」はproxyベースのCDNで、有効であると確認されたAMPドキュメントを配信できます。つまり、proxyがAMP HTMLを読み、キャッシュされれば、自動的にそのページの読み込みパフォーマンスは大幅に向上できるわけです。

大和 哲

1968年生まれ東京都出身。88年8月、Oh!X(日本ソフトバンク)にて「我ら電脳遊戯民」を執筆。以来、パソコン誌にて初歩のプログラミング、HTML、CGI、インターネットプロトコルなどの解説記事、インターネット関連のQ&A、ゲーム分析記事などを書く。兼業テクニカルライター。ホームページはこちら。
(イラスト : 高橋哲史)