Help us understand the problem. What is going on with this article?

AMP(Accelerated Mobile Page)が拓くモバイルの加速世界

More than 5 years have passed since last update.

AMP(Accelerated Mobile Pages)とは?

Googleが先日発表した「AMP(Accelerated Mobile Pages - アクセラレーテッド・モバイル・ページ=アンプ)」は、モバイルにおけるWeb表示を劇的に高速化することを目的にしたオープンソース(新フォーマット)です。パブリッシャーとしてBBC、ウォール・ストリート・ジャーナル、Twitter、Pinterest、WordPress、LinkedIn、朝日新聞、毎日新聞、産経デジタルなど多くの企業が立ち上げ段階で参画しています。

キャプチャ1.jpg

Google検索によるデモはこちら ※スマホからのみ有効

AMP HTMLの利用

AMPは「AMP Project · GitHub」にて導入方法が上がっているので、誰でも採用することが可能です。現在のWebページをAMP HTMLの仕様に習って修正することで、AMP対応が可能となります。

1.<html ⚡ lang="ja">を付加

<html lang="ja"><html  lang="ja"> または <html amp lang="ja">

AMPを利用するための宣言です。何と絵文字⚡…。

2.下記コードを<head>タグ内に設置。

<style>body{opacity:0}</style><noscript><style>body{opacity:1}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>

https://cdn.ampproject.org/v0.jsを読み込むことでAMP ProjectからCDN配信されたJavaScriptランタイムが読み込まれます。これは一回読み込まれればキャッシュされるので、別のサイトで読み込んだことがある場合再利用されます。これも高速化の一貫です。なお、AMP HTMLでは上記以外のJavaScriptの読み込みを認めていません。また、<form>タグの使用も認められません。

3.viewportを指定する

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">

上記の通りの指定でないと、後述するAMP Validatorでエラーが出るようです(パラメータを変えたり、半角スペースがあるだけでもエラーに)。

4.CSSは外部読み込みせず、インラインで指定する。

<link href="style.css" rel="stylesheet"><style amp-custom>html,body,div,span,object,...</style>

AMPではインラインCSSが推奨されます。<style>タグに「amp-custom」を付加します。

5.画像にサイズ指定し、<img>タグを<amp-img>に変更。

<img src="test.png" alt="" width="100" height="50"><amp-img src="test.png" alt="" width="100" height="50"></amp-img>

<amp-img>として指定された画像はローディング付きの遅延読み込みが行われます。
また、画像へのサイズ指定が必須で、指定がないとAMP Validatorでエラーとなります。画像にサイズ指定することで描画領域をあらかじめ確保できるため、リフロー(再描画)を起こさず、高速化に繋がります。なお、</amp-img>は無くてもOKです。

6.canonicalタグの設定

もし通常のHTML、AMP HTMLと同一の内容で2つのページを準備する場合は、下記のように正規化を行います。
ただ、

AMP(通常ページがあることを示す)
<link rel="canonical" href="http://andus.heteml.jp/amp_test/default/">
HTML(AMPページがあることを示す)
<link rel="amphtml" href="http://andus.heteml.jp/amp_test/amp/">

デバッグモードについて

「#development=1」をURLに付加することで開発者ツールなどを使ってデバッグが可能です。1~5までを行うことで下記のように正常になるはずです。

キャプチャ2.png

実際にAMP有り無しのDEMOを組んでみる

同一の内容でDEMOを組んでみました。スマホから低速回線で閲覧すると若干違いが感じ取れるかも知れません(元々のDEMOが画像も軽量化しており単純な作りなのでそんなに差は感じられないかも…)。

DEMO:通常のHTMLの場合
DEMO:AMPの場合

JavaScriptが禁止って、使いにくいのでは?

AMP HTML Components

JavaScriptの実行が禁止されているため、リッチコンテンツをAMPで組むことは現状出来ませんが、AMP HTML Componentsが各種用意されているのでそれを利用して代替えすることになります。

amp要素名 概要
amp-img 画像の表示
amp-video mp4などの動画ファイルの表示
amp-youtube YouTube動画の表示
amp-ad 広告の表示
amp-twitter Twitterの表示
amp-lightbox LihtBoxの表示
amp-carousel カルーセルの表示
amp-anim アニメーションGIFの表示

Googleアナリティクスはどうするの?

<amp-pixel src="https://ssl.google-analytics.com/collect?v=1&amp;tid=UA-12345678-1&amp;t=pageview&amp;cid=$RANDOM&amp;dt=$TITLE&amp;dl=$CANONICAL_URL&amp;z=$RANDOM"></amp-pixel>

「Measurement Protocol」を使います。上記のように<amp-pixel>タグで利用します。
上記のタグでは下記のリクエストが実行されます。
https://ssl.google-analytics.com/collect?v=1&tid=UA-12345678-1&t=pageview&cid=0.13705725222826004&dt=DEMO%E3%83%9A%E3%83%BC%E3%82%B8%EF%BC%88AMP%EF%BC%89&dl=http%3A%2F%2Fandus.heteml.jp%2Famp_test%2Fdefault%2F&z=0.20173302432522178

AMR側で用意されている下記の値が利用できます。

概要
$RANDOM ランダムなパラメータ
$TITLE ページタイトル
$CANONICAL_URL 現在URLまたはcanonical URL

参考として、以前「Measurement Protocol」について書いた投稿は下記。
PHP - Measurement Protocolで始めるメルマガ解析 - Qiita

AMPは今後普及するか?

各ニュースサイトのみならず、WordPressも数ヵ月以内にAMP対応のためのプラグインを発表するとしており、個人ブログなどでも実装されていくことが考えられます。Appleのようにコンテンツブロッカーによってモバイルの高速化を行うのではなく、GoogleはWebの表示の仕組みそのものを変えることで高速化を実現しようとしています。

想定される利用シーン

簡易的なページ

ニュースサイトなどの簡易的な説明・入口ページでは、詳細ページほどリッチな仕組みが不要な場合が多く、静的ページでも構わない場合が多いのではないでしょうか。

プロモーションページ

多くのトラフィックをさばく必要がある場合、(リッチコンテンツの削除に目をつぶってでも)出来るだけ軽量にしておきたい、そんなケースがありそうです。

参考URL

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

Accelerated Mobile Pages Project

モバイルウェブが爆速に! GoogleがAMP (Accelerated Mobile Pages) を立ち上げ | 海外SEO情報ブログ

Google の AMP に対応した HTML を書く - うな(。・ε・。)

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away