Accelerated Mobile Pages の基礎

1. 概要

この Codelab では、Accelerated Mobile Pages（AMP）を作成する方法を学びます。このため、AMP 仕様に準拠し、モバイルニュースサイトで一般的に使用されるいくつかの一般的なウェブ機能を組み込んだシンプルなニュース記事のウェブページを実装します。

学習内容

AMP によって、モバイルウェブのユーザーエクスペリエンスがどのように改善されるか。
AMP サイトの基本。
AMP の制限事項。
AMP のウェブコンポーネントが、ニュースサイトによくある問題を解決する方法。
AMP を検証する方法。
Google 検索向けに AMP を準備する方法。

必要なもの

サンプルコード
Python（できれば 2.7）または Chrome 200 OK Web Server 拡張機能
Chrome（または JavaScript コンソールを検査できる同等のブラウザ）
コードエディタ（Atom、Sublime、Notepad++ など）

2. サンプルコードを取得する

すべてのサンプルコードをパソコンにダウンロードできます。

または、コマンドラインから GitHub リポジトリのクローンを作成します。

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

複数のサンプルリソースファイルと開始用の article.html ページを含む ZIP ファイルをダウンロードします。

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

3. サンプルページを実行する

サンプルページをテストするには、ウェブサーバーからファイルにアクセスする必要があります。テスト用に一時的なローカルウェブサーバーを作成する方法はいくつかあります。この Codelab では、次の 3 つのオプションの手順を説明します。

Google Chrome アプリ「Web Server for Chrome」 - これは、最もシンプルでクロスプラットフォームなソリューションであるため、おすすめの方法です。注: この方法では、Google Chrome がインストールされている必要があります。
Firebase Hosting - 新しい静的アセットホスティングプラットフォーム「Firebase Hosting」の利用も検討している場合は、この方法をおすすめします。デフォルトで SSL が有効になっています。
ローカル HTTP Python サーバー - コマンドラインへのアクセスが必要です。

オプション 1: Web Server for Chrome

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

Chrome アプリをインストールしたら、[フォルダを選択] ボタンを使用して、アプリを特定のフォルダに指定する必要があります。この Codelab では、Codelab のサンプルファイルを解凍したフォルダを選択する必要があります。

また、[Automatically show index.html] オプションをオンにして、ポートを [8000] に設定します。これらの変更を有効にするには、ウェブサーバーを再起動する必要があります。

こちらの URL にアクセスします。

http://localhost:8000/article.html

上記の URL が正常に読み込まれたら、次のステップに進みます。

オプション 2: Firebase Hosting

新しい Firebase 静的ウェブホスティングにご興味をお持ちの場合は、こちらの手順に沿って AMP サイトを Firebase ホスティング URL にデプロイしてください。

Firebase Hosting は、静的ウェブサイトとそのアセット（HTML、CSS、JavaScript ファイルなど）を迅速にデプロイしてホストするために使用できる静的ホスティングプロバイダです。静的コンテンツは、世界各地に配置されたポイントオブプレゼンス（PoP）を持つコンテンツ配信ネットワーク（CDN）にキャッシュ保存されるため、ユーザーはレイテンシの短縮というメリットを享受できます。

最後に、Firebase Hosting は常に SSL 経由で配信されるため、AMP やウェブ全般に最適です。AMP にのみ焦点を当てたい場合は、このオプションを無視してください。

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

Chrome を使用していない場合や、Chrome 拡張機能のインストールに問題がある場合は、コマンドラインから Python を使用してローカルウェブサーバーを起動することもできます。

コマンドラインから Python の組み込み HTTP サーバーを実行するには、次のコマンドを実行します。

python -m SimpleHTTPServer

こちらの URL にアクセスします。

http://localhost:8000/article.html

4. 通常の 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 ページを読み込み、Menu > More Tools > Developer Tools から Chrome でデベロッパーコンソールを開きます。

デベロッパーコンソールで JavaScript の出力を確認します。[コンソール] タブが選択されていることを確認します。

次のログが表示されます。

Powered by AMP ⚡ HTML

AMP バリデータを有効にするには、URL に次のフラグメント識別子を追加します。

#development=1

次に例を示します。

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

場合によっては、ブラウザのページを手動で更新する必要があります。ブラウザでページを手動で更新するには、次のボタンを押します。

複数の検証エラーが返されます。

Screen Shot 2016-05-03 at 10.09.51 AM.png

AMP は Accelerated Mobile Pages の略ですが、すべての画面サイズで適切にレンダリングされるレスポンシブページを作成するために使用できます。詳しくは、Google Developers ウェブサイトのレスポンシブウェブデザインのセクションをご覧ください。

Chrome デベロッパーツールでモバイルデバイスの操作性をシミュレートするため。モバイルデバイスのアイコンをクリックします。

このメニューからモバイルデバイス（「Pixel 2」など）を選択します。

次のように、シミュレートされたモバイル端末の解像度で記事が表示されます。

これで、修正作業を行う準備が整いました。検証エラーを 1 つずつ見ていきながら、AMP との関連性を確認していきましょう。

5. 検証エラーを解決する

文字セットは必須です

まず、次のエラーを修正します。

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

テキストを正しく表示するには、AMP でページの文字セットを設定する必要があります。また、head タグの最初の子である必要があります。これは、メタ charset タグの前に追加されたコンテンツが再解釈されるのを防ぐためです。

次のコードを head タグの最初の行として追加します。

<meta charset="utf-8" />

ファイルを保存し、ページを再読み込みして、このエラーが表示されなくなったことを確認します。

AMP ファイルには `<link rel=canonical>` タグが必要です。

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

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

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

必要に応じてウェブサーバーを再起動し、ページを再読み込みします。修正すべきエラーはまだたくさんありますが、「AMP ファイルには <link rel=canonical> タグが必要です」というエラーは表示されなくなりました。

AMP 属性が必須

AMP では、ページを AMP ドキュメントとして宣言するために、ページのルート HTML 要素に属性が必要です。

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 では、ビューポートの width と minimum-scale の定義が必要です。これらの値は、それぞれ device-width と 1 として定義する必要があります。ビューポートは、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 で width と minimum-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>

スタイルタグの内容は、プロジェクトディレクトリの base.css ファイルから直接コピーする必要があります。style タグの amp-custom 属性は必須です。

もう一度ページを再読み込みし、スタイルシートのエラーが消えたかどうかを確認します。

サードパーティ JavaScript

スタイルシートは AMP を使用してインライン化することで比較的簡単に変更できますが、JavaScript はそうではありません。

The tag 'script' is disallowed except in specific forms.

AMP では、ユーザーが生成したスクリプトは許可されていません。AMP のスクリプトは、次の 2 つの主な要件を満たしている場合にのみ許可されます。

すべての JavaScript は非同期である必要があります。つまり、スクリプトタグに async 属性を含める必要があります。
AMP ライブラリと AMP コンポーネントのみを含めることができます。

これにより、サードパーティの 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> タグの末尾に追加します。

最初のタグは、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 は要素のアスペクト比を認識できます。

幅と高さを次のように設定します。

<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.

よくある質問

6. 正規 URL、メタデータ、検索

新しい AMP イニシアチブの一環として、新しいカルーセルインターフェースの一部として、Google 検索結果インターフェースで有効な AMP ドキュメントがハイライト表示されます。このインターフェースにより、ウェブで記事を検索するユーザーの利便性が向上します。このエクスペリエンスを最大限に活用するには、AMP バリデーターに合格するだけでなく、特定の基準を満たすページを含める必要があります。

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

正規ページと AMP ドキュメントをリンクする

AMP はウェブの高速化を目指しています。プロジェクトの初期段階では静的コンテンツに重点が置かれていましたが、amp-bind などのコンポーネントが追加されたことで、ニュースパブリッシャー、e コマース、旅行ウェブサイト、ブログなど、さまざまなサイトに適したフレームワークとなっています。

ただし、AMP がウェブサイトの構造の中でどのように位置づけられるべきかを完全に理解することが重要です。AMP はウェブサイト全体を構築するために使用できますが、多くのパブリッシャーはペア設定アプローチで AMP を使用することを好みます。このアプローチでは、パブリッシャーがウェブサイトでホストする通常の HTML 記事に付随する形で AMP ドキュメントが生成されます。

通常の HTML ページでの正規リンクは、複数のページに同じコンテンツが含まれている場合に、どのページを優先ページと見なすべきかを宣言する一般的な手法です。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">

以下の図は、双方のファイルの link タグの方向を示したものです。

Google 検索クローラーが通常の HTML 正規ドキュメントと AMP ドキュメントの関係を理解するためには、この双方向リンクを設定する必要があります。リンクが提供されていない場合、クローラーはどの記事が通常の HTML ドキュメントの「AMP バージョン」であるかを必ずしも明確に把握できません。こうしたリンクを明示的に設定することで、不明確さをなくすことができます。

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

新しいカルーセルインターフェースに AMP ドキュメントを表示するためのもう 1 つの要件は、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 バリデーションエラーが発生していないことを再確認します。

次に、新しいブラウザウィンドウで構造化データ検証ツールを開いて、[マークアップをテスト] をクリックします。次に、[コードスニペット] タブを選択し、AMP ページからソースコード全体をコピーして、検証ツールのテキストエディタパネルに貼り付け、[テストを実行] をクリックします。

ページに次のような内容が表示されます。

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

AMP ドキュメントが有効であることを確認します。
<link> タグを使用して、従来の HTML ページから AMP ドキュメントを参照したり、その逆も可能です。
上記の検索エンジンメタデータタグを含めます。

詳しくは、ページの検出をご覧ください。

7. 完了

これで、この Codelab は終了です。AMP ドキュメントの多くの基本的なコンセプトについて確認しました。

これらのコンセプトと機能を AMP ドキュメントに実装する方法だけでなく、AMP がこのように設計された理由もご理解いただけたかと思います。

以下に、スキルをさらに強化するために役立つトピックとリンクを紹介します。