このコードラボでは AMP(Accelerated Mobile Pages)の作成方法を学びます。そのために、モバイル版のニュースサイトで広く使用されている代表的なウェブ機能を複数取り入れて、AMP の仕様を満たすシンプルなニュース記事のウェブページを実装します。

学習内容

用意するもの

次のいずれかの方法で、すべてのサンプルコードをパソコンにダウンロードできます。

Download Zip

または、コマンドラインで GitHub レポジトリのクローンを作成する

$ git clone https://github.com/googlecodelabs/accelerated-mobile-pages-foundations.git

ダウンロードした ZIP ファイルの中には、複数のリソース ファイルとトップページの article.html が含まれています。

フォルダを解凍したら、パソコンのコマンドラインで該当のディレクトリに移動します。

サンプルページをテストするには、ウェブサーバーのファイルにアクセスする必要があります。テスト用の一時的なローカル ウェブサーバーを作成する方法はいくつかあります。このコードラボでは次の 3 つの方法を紹介します。

オプション#1: Web Server for Chrome

こちらのリンク先から、Chrome ウェブストアで "Web Server for Chrome" アプリを入手できます。

この Chrome アプリのインストールが完了したら、[Choose Folder] ボタンを押して、このアプリに特定のフォルダを指定します。このコードラボでは、コードラボのサンプル ファイルを解凍したフォルダを選択しておくとよいでしょう。

さらに [Automatically show index.html] の項目にチェックを入れて、ポートを 8000 に設定します。ウェブサーバーを再起動して変更内容を反映します。

次の URL にアクセスします。

http://localhost:8000/article.html

この URL が問題なく読み込めたら、次のステップに進んでください。

オプション#2: Firebase Hosting

Google の新しい Firebase 静的ウェブ ホスティングに興味のある方は、こちらの説明に従って AMP サイトを Firebase Hosting URL にデプロイできます。

Firebase Hosting は静的なホスティング プロバイダであるため、これを利用すると、静的なウェブサイトとそのアセット(HTML、CSS、JavaScript ファイルなど)を迅速にデプロイおよびホストすることが可能です。静的コンテンツは、世界中に存在する Point Of Presence(POP)によってコンテンツ配信ネットワーク(CDN)にキャッシュされるため、レイテンシが低減されるというユーザー メリットもあります。

さらに Firebase Hosting は必ず SSL 経由で提供されるため、一般的に AMP やウェブに最適です。APM のみに専念したい方は、この選択肢は除外してください。

オプション#3: HTTP Python サーバー

Chrome を使用しておらず Chrome 拡張機能のインストールに苦戦している方は、コマンドラインから Python を使用してローカルのウェブサーバーを起動することもできます。

Python のビルトイン HTTP サーバーを起動するには、コマンドラインで以下のコマンドを実行します。

python -m SimpleHTTPServer

次の URL にアクセスします。

http://localhost:8000/article.html

ダウンロードした zip ファイルの中に article.html というファイルがあります。これから、この記事に相当する AMP ページを作成していきます。

サンプルの article.html からコードをコピーして新しいファイルに貼り付けます。ファイルを article.amp.html という名前で保存します。

現時点での article.amp.html ファイルの中身は次のようになります。

<!doctype html>
<html lang="en">
  <head>

    <title>News Article</title>

    <link href="base.css" rel="stylesheet" />

    <script type="text/javascript" src="base.js"></script>
  </head>
  <body>
    <header>
      News Site
    </header>
    <article>
      <h1>Article Name</h1>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>
    </article>
    <img src="mountains.jpg">
  </body>
</html>

このページは、あえてシンプルな構成にしています。使用している要素は、CSS、JavaScript、画像タグなど、静的なニュース記事でよく使われているものです。

この記事の AMP 版は、まだ元の記事をコピーしただけの状態です。では、これを AMP に作り変えていきましょう。まずは AMP JavaScript ライブラリ ファイルを追加して、AMP 検証ツールを有効にした状態で表示されるエラーを確認します。

AMP ライブラリを読み込むには、次の行を <head> タグの一番下に追加します。

<script async src="https://cdn.ampproject.org/v0.js"></script>

このリンクでブラウザ上に新しい article.amp.html ページを読み込んだら、Chrome で [Menu] > [More Tools] > [Developer Tools] の順に選択して Developer Console を開きます。

では、JavaScript の出力内容をデベロッパー コンソールで確認してみましょう。[Console] タブが選択されていることを確認してください。

次のようなログが表示されるはずです。

Powered by AMP ⚡ HTML

ここで、AMP の検証ツールを有効にして、こちらの フラグメント識別子を URL に追加します。

#development=1

次に例を示します。

http://localhost:8000/article.amp.html#development=1

ブラウザで手動による更新が必要な場合があります。以下のボタンを押すと、ブラウザのページを手動で更新できます。

検証エラーがいくつか表示されたと思います。

このコードラボは Accelerated Mobile Pages を対象にしているので、Chrome Developer Tools でモバイル端末上の表示をシミュレートしてみましょう。まず、以下のモバイル端末アイコンをクリックします。

次に、以下のメニューでモバイル端末("Nexus 5X" など)を選択します。

以下のように、モバイル用の解像度でシミュレートした画面がブラウザに表示されます。

これで作業準備が整いました。次は、検証エラーをひとつずつ確認しながら、AMP との関連性について説明していきます。

文字セットが必須

まずは次のエラーから修正しましょう。

The mandatory tag 'meta charset=utf-8' is missing or incorrect.

AMP では、テキストを適切に表示するためにページ用の文字セットを設定する必要があります。また、その設定は head タグの 1 つ目の子にしなければなりません。そのメタ文字セットのタグよりも前に追加されたコンテンツが再び解釈されるのを防ぐためです。

head タグの 1 行目に次のコードを追加します。

<meta charset="utf-8" />  

ファイルを保存してページを再読み込みし、このエラーが完全に消えたことを確認します。

AMP ファイルには <link rel=canonical> タグが必須​​​

すべての AMP ドキュメントには、正規版のページを参照するリンクが必要です。では、元の記事へのリンクを追加しましょう。

<meta charset="utf-8" /> タグの下に次のコードを追加します。

<link rel="canonical" href="/article.html">

必要に応じてウェブサーバーを再起動して、ページを再読み込みします。まだ修正すべきエラーはたくさん残っていますが、"AMP files are required to have a <link rel=canonical> tag" というエラーは消えました。

AMP 属性が必須

AMP では、ページのルート HTML 要素に属性を使用して、そのページが AMP ドキュメントであることを宣言する必要があります。

The mandatory attribute '⚡' is missing in tag 'html ⚡ for top-level html'
The mandatory tag 'html ⚡ for top-level html' is missing or incorrect.

これらのエラーは、次のように ⚡ 属性を <html> タグに追加するだけで解決できます。

<!doctype html>
<html ⚡ lang="en">
  <head>
...

ページを再読み込みしてエラーが両方とも消えたことを確認します。

ビューポートが必須

次は以下のエラーを修正しましょう。

The mandatory tag 'meta name=viewport' is missing or incorrect.

AMP では、ビューポートの widthminimum-scale を定義する必要があります。これらの値はそれぞれ device-width1 と定義してください。viewport は HTML ページの <head> に含まれる一般的なタグです。

次の HTML スニペットを <head> タグに追加するのが最良の修正方法です。以下の meta タグを追加します。

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8" />

    <link rel="canonical" href="/article.html">

    <!-- The following is the meta tag and viewport information we must add to the page: -->
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

...

これらは唯一、AMP において widthminimum-scale に有効な値です。initial-scale の定義は必須ではありませんが、モバイルウェブ開発では一般的なので、追加することをお勧めします。ビューポートとレスポンシブ デザインについては、こちらで詳細をご覧ください。

ここでもページを再読み込みして、エラーが消えたことを確認します。

外部スタイルシート

次のエラーはスタイルシートの使用方法に起因するものです。

The attribute 'href' in tag 'link rel=stylesheet for fonts' is set to the invalid value 'base.css'.

具体的には、<head> タグ内にある以下のスタイルシートのリンクタグに関するエラーです。

<link href="base.css" rel="stylesheet" />

問題は、これが外部スタイルシートを参照していることです。AMP ではドキュメントをできるだけ早く読み込むために、外部スタイルシートの読み込みは禁止されています。代わりに、すべてのスタイルシートのルールは AMP ドキュメントにインラインで含める必要があります。

つまり、<head> タグ内のリンクタグを削除して、次のようなインラインのタグに置き換えます。

<style amp-custom>

body {
  width: auto;
  margin: 0;
  padding: 0;
}

...

</style>

style タグの中身は、プロジェクト ディレクトリにある base.css ファイルから直接コピーしてください。style タグには amp-custom 属性が必須です。

前回と同じくページを再読み込みして、スタイルシートのエラーが消えたことを確認します。

サードパーティの JavaScript

スタイルシートはインライン化することで比較的簡単に変更できましたが、JavaScript はそうはいきません。

'script' タグは特定のフォームを除いては使用できません。

AMP ではユーザーが生成したスクリプトの使用は禁止されています。AMP でスクリプトを使用できるのは、次の 2 つの主要な要件を満たす場合のみです。

このルールによって、サードパーティの JavaScript を使用するケースが効率的に除外されます。唯一の例外として、iframe でサードパーティの JavaScript を使用することは可能です。

外部 base.js ファイルを開いて中身を確認してみてください。このファイルには JavaScript がまったく含まれておらず、次のようなコメントだけが記載されています。

/*

This external JavaScript file is intentionally empty.

Its purpose is merely to demonstrate the AMP validation error related to the use of external JavaScript files.

*/

この外部 JavaScript ファイルはウェブサイトの機能を担うコンポーネントではないため、参照全体を安全に削除できます。

ドキュメントから次の外部 JavaScript の参照を削除します。

<script type="text/javascript" src="base.js"></script>

ページを再読み込みして、スクリプトのエラーが消えたことを確認します。

AMP CSS ボイラプレート

The mandatory tag 'noscript enclosure for boilerplate' is missing or incorrect.
The mandatory tag 'head > style : boilerplate' is missing or incorrect.
The mandatory tag 'noscript > style : boilerplate' is missing or incorrect.

これらのエラーは <head> タグ内に 2 つのタグがないことを示しています。すべての AMP ドキュメントにおいて、これらのタグを含める必要があります。

<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

上のコード スニペットをドキュメントの <head> タグの一番下に追加します。

1 つ目のタグは、ページ コンテンツをレンダリングする準備が整い、AMP JavaScript ライブラリが body タグを更新して再表示するまで、ページ コンテンツを非表示にします。AMP ではこのようにして、スタイルが未設定のページ コンテンツが表示されるのを防いでいます。その結果、すべてのページ コンテンツが同時に表示され、スクロールせずに見える範囲のコンテンツがすべて同時にレンダリングされるため、ユーザーにはページが一瞬で表示されるように見えます。2 つ目のタグは、ブラウザで JavaScript が無効になっている場合に前述のロジックを取り消します。

amp-img タグ

The tag 'img' may only appear as a descendant of tag 'noscript'.Did you mean 'amp-img'?

AMP には、画像タグを amp-img というタグに置換するための専用のウェブ コンポーネントが備わっています。

<amp-img src="mountains.jpg"></amp-img>

上の amp-img タグを読み込んでから、検証ツールを再実行してみてください。新しいエラーがいくつか表示されるはずです。

AMP-IMG# Layout not supported for: container
The implied layout 'CONTAINER' is not supported by tag 'amp-img'.

なぜ amp-img によって新たなエラーが発生したのでしょうか。答えは、amp-img は従来の HTML の img タグに完全に置き換わるものではないからです。そのため、amp-img を使用する場合は追加の要件が発生します。

レイアウト システム

上のエラーは、amp-img が ‘container' レイアウト タイプに対応していないことを示しています。AMP デザインにおける非常に重要なコンセプトの 1 つは、ウェブページのレンダリングに必要な DOM のリフロー回数を極力抑えることです。

DOM のリフロー回数を減らすために、AMP ではレイアウト システムを読み込みます。これにより、ページのダウンロードおよびレンダリング サイクルのより早い段階で、ページのレイアウトをできるだけ固定します。

レイアウトシステムを使用すると、さまざまな方法でページに含まれる要素の位置やスケールを調整できます。寸法の固定や、レスポンシブ デザインの採用、高さの固定なども可能です。

今回の場合は、レイアウト システムによって amp-img のレイアウト タイプが container タイプであるとで推測されています。しかし、このコンテナ タイプは子要素を含む要素用のタイプであり、amp-img タグとは互換性がないため、このエラーが発生します。

では、なぜこのコンテナ タイプであると推測されたのでしょうか。それは、amp-img タグの高さの属性を指定していないからです。HTML においては、ページ上の要素に対して必ず固定の幅と高さを指定することで、リフロー回数を削減できます。AMP で要素のアスペクト比を把握できるように、amp-img 要素の幅と高さを定義することをお勧めします。

幅と高さは次のように指定します。

<amp-img src="mountains.jpg" width="266" height="150"></amp-img>

ページを更新して検証ツールを確認すると、エラーがすべて消えているはずです。ただし、ページ上の画像の位置が適切ではないため、見栄えがよくありません。ここで、画像をスケーリングして、どのようなサイズの画面にもフィットするようにレスポンシブにページを伸縮できたら完璧です。

意外なことに、幅と高さを定義しても要素を固定サイズに制限することにはなりません。AMP のレイアウト システムでは、アスペクト比がわかっていれば要素の位置やスケールをさまざまな方法で調整できます。AMP ではレイアウト属性によって、どのように要素の位置やスケールを変更すべきか判断します。

レイアウト属性を responsive に指定するには次のようにします。

<amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>

これで完成です。画像は適切なアスペクト比で、画面幅いっぱいにレスポンシブに表示されます。

成功です!

この時点での AMP ドキュメントは次のようになっているはずです。

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">    

    <link rel="canonical" href="/article.html">
    <link rel="shortcut icon" href="amp_favicon.png">

    <title>News Article</title>

    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <style amp-custom>
      body {
        width: auto;
        margin: 0;
        padding: 0;
      }

      header {
        background: Tomato;
        color: white;
        font-size: 2em;
        text-align: center;
      }

      h1 {
        margin: 0;
        padding: 0.5em;
        background: white;
        box-shadow: 0px 3px 5px grey;
      }

      p {
        padding: 0.5em;
        margin: 0.5em;
      }
    </style>
    <script async src="https://cdn.ampproject.org/v0.js"></script>  
  </head>
  <body>
    <header>
      News Site
    </header>
    <article>
      <h1>Article Name</h1>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>

      <amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>
    </article>
  </body>
</html>

ページを更新してコンソールの出力内容を確認しましょう。次のようなメッセージが表示されるはずです。

AMP validation successful.

よくある質問

新たな AMP 対応の一環として、Google 検索結果インターフェース内の新しいカルーセル枠に、有効な AMP ドキュメントを目立つように表示させます。このインターフェースによって、ウェブ上で記事を探す際のユーザー エクスペリエンスが向上します。最高のエクスペリエンスを実現するためには、読み込むページが AMP 検証に合格することに加えて、特定の基準を満たす必要があります。

このステップではすべての要件の概要を説明します。

正規版のページと AMP ドキュメントをリンクさせる

AMP ではモバイルウェブの高速化を目標に掲げ、現在では主に静的コンテンツに重点を置いています。そのため、AMP はニュースサイトのサイトオーナー、ウェブサイトに記事として表示されるブログやページに最適です。

ただし、ウェブサイト構造の中で AMP を適用する範囲を確実に把握しておくことが重要になります。現時点で AMP ドキュメントは、サイトオーナーがウェブサイトで掲載する通常の HTML 記事と併存するものとして最適な形で生成されます。また、現在 AMP では静的コンテンツを主な対象としているため、ウェブサイトの記事ページについてのみ AMP ドキュメントを生成するよう限定することをお勧めします。ウェブサイトのホームページやカテゴリページ、よくある質問などのページに対して AMP ドキュメントを生成する必要はありません

複数のページで同じコンテンツを読み込む場合は、最適なページを示すために通常の HTML ページで canonical リンクを使用するのが一般的な方法です。AMP ドキュメントは、ウェブサイトの従来の記事ページと併存するページとして生成されるため、従来の HTML ページを"正規の"ページとして扱う必要があります。

これを実現するための第一ステップとして、すでに AMP ドキュメントにおいて正規のページに戻るためのリンクタグを <head> 内に追加しています。

<link rel="canonical" href="/article.html">

次のステップでは正規の記事を AMP ページにリンクさせます。そのためには、正規の記事の <head> セクションに <link rel="amphtml"> タグを追加します。

次のコードを article.html ファイルの <head> セクションに追加します。

<link rel="amphtml" href="/article.amp.html">

以下の図はリンクタグの向きを示しています。

このように双方向のリンクを設定することで、Google の検索クローラは通常の正規版の HTML ドキュメントと AMP ドキュメントの関係を把握できるようになります。リンクが明示されていない場合は、どちらの記事が通常の HTML ドキュメントの "AMP 版"であるかをクローラ側で特定できない場合があります。明確にするには、これらのリンクを明示的に指定します。

Schema.org 検索エンジン メタデータ

新しいカルーセル インターフェースに AMP ドキュメントを表示するには、Schema.org の検索エンジン メタデータの仕様に準拠する必要もあります。このメタデータは application/ld+json タイプ スクリプトタグとしてドキュメントの <head> タグに含めます。

次のコードを AMP ドキュメントの <head> セクションの一番下に追加します。

<script type="application/ld+json">
{
 "@context": "http://schema.org",
 "@type": "NewsArticle",
 "mainEntityOfPage":{
   "@type":"WebPage",
   "@id":"https://example.com/my-article.html"
 },
 "headline": "My First AMP Article",
 "image": {
   "@type": "ImageObject",
   "url": "https://example.com/article_thumbnail1.jpg",
   "height": 800,
   "width": 800
 },
 "datePublished": "2015-02-05T08:00:00+08:00",
 "dateModified": "2015-02-05T09:20:00+08:00",
 "author": {
   "@type": "Person",
   "name": "John Doe"
 },
 "publisher": {
   "@type": "Organization",
   "name": "⚡ AMP Times",
   "logo": {
     "@type": "ImageObject",
     "url": "https://example.com/amptimes_logo.jpg",
     "width": 600,
     "height": 60
   }
 },
 "description": "My first experience in an AMPlified world"
}
</script>

ブラウザでページを再読み込みして、AMP の検証エラーが消えたことを再確認してください。

次に、新しいブラウザ ウィンドウで構造化データ テストツール起動して [Test my markup] をクリックします。[Code Snippet] タブを選択したら、AMP ページのソースコードをすべてコピーしてテストツールのテキスト エディタ パネルに貼り付け、[Run Test] をクリックします。

ページには次のように表示されるはずです。

AMP に対応したニュース記事を Google 検索の新しいカルーセルに表示するための必須要件は次のとおりです。

  1. AMP ドキュメントを検証する。
  2. 従来の HTML ページから <link> タグを使用して AMP ドキュメントを参照する。逆も同様。
  3. 前述の検索エンジンのメタデータ タグを追加する。

ページの検出についての詳細もご確認ください。

このコードラボはこれで終了です。AMP ドキュメントの基本概念について多くのことを学習できたと思います。

これらの概念や機能が AMP ドキュメントでどのように実装されているかを知ることに加えて、なぜ AMP がこのような設計になっているかを理解していただけたら幸いです。

以下に、さらなるスキルアップに役立つ追加のトピックやリンクを紹介します。