Accelerated Mobile Pages の高度な概念

1. 概要

この Codelab は、Accelerated Mobile Pages の基礎で紹介したコンセプトの続きです。このラボを開始する前に、前のコードラボを完了しているか、少なくとも AMP のコアコンセプトを基本的なレベルで理解している必要があります。

この Codelab では、AMP が広告、分析、動画の埋め込み、ソーシャルメディアの統合、画像のカルーセルなどを処理する方法を学びます。この目標を達成するため、さまざまな AMP コンポーネントを使用して、基礎のコードラボの例にこれらの機能を追加します。

学習内容

amp-ad を使用したディスプレイ広告。
YouTube 動画、Twitter カード、レスポンシブテキスト要素を埋め込むことができます。
amp-carousel を使用して、画像やコンテンツの組み合わせを含むカルーセルを構築します。
amp-analytics を使用したシンプルなトラッキングパターン。
ページにサイトナビゲーションを追加する方法。
AMP でフォントが機能する仕組み。

必要なもの

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

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

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

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

$ git clone https://github.com/googlecodelabs/accelerated-mobile-pages-advanced.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.amp.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.amp.html

4. AMP のコアコンポーネントについて学ぶ

AMP のコンポーネントシステムにより、効率的でレスポンシブな機能を記事に迅速かつ簡単に組み込むことができます。<head> タグのコア AMP JavaScript ライブラリには、次のコアコンポーネントが含まれています。

amp-ad - 広告を表示するコンテナ。
amp-img - HTML img タグの代替。
amp-pixel - ページビューをカウントするトラッキングピクセルとして使用されます。
amp-video - HTML5 動画タグの代替。

上記のコアコンポーネントはすべて、AMP ドキュメントですぐに使用できます。このサンプルコードでは、すでにページで amp-img を使用しています。また、AMP Foundations コードラボでは、AMP レイアウトシステムとの関係について説明しました。次の章では、amp-ad について説明します。

5. 広告を追加する

サンプル article.amp.html ページは次のようになります。

<!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>
    <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>
  </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 検証と Schema.org 検索エンジンのメタデータ検証の両方に合格していることです。このページがニュースウェブサイトにデプロイされていれば、AMP コンテンツ専用の新しい Google 検索カルーセルに含めることができるため、このページは作業の出発点として最適です。

ページを変更する前に、Chrome デベロッパーツールを開きましょう。ウェブサイト（特にモバイルに特化したウェブサイト）を制作する際は、ブラウザでテストする際にモバイルエクスペリエンスをシミュレートすることをおすすめします。まず、Menu > More Tools > Developer Tools を使用して Chrome でデベロッパーコンソールを開きます。

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

デベロッパーコンソールでデバイスシミュレーションボタンをクリックします。スマートフォンとタブレットが並んで置かれている様子で表されています。

表示されるメニューで、デバイスを [Nexus 5X] に設定します。

これで、ページ自体の作業を開始できます。AMP 記事に広告を追加してみましょう。

AMP のすべての広告は amp-ad コンポーネントを使用して構築されます。このコンポーネントを使用すると、幅、高さ、レイアウトモードなど、さまざまな方法で広告を構成できます。ただし、多くの広告プラットフォームでは、広告ネットワークのアカウント ID、配信する広告、広告のターゲティングオプションなどの追加設定が必要になります。amp-ad の場合は、必要なさまざまなオプションを HTML 属性として入力します。

Double Click 広告の例をご覧ください。

<amp-ad
  width="300"
  height="250"
  type="doubleclick"
  data-slot="/35096353/amptesting/image/static">
</amp-ad>

ご覧のとおり、これは非常にシンプルな構成です。type 属性に注目してください。この属性は、使用する広告プラットフォームを amp-ad コンポーネントに通知します。この場合、DoubleClick のプラットフォームが必要だったため、タイプ値は doubleclick でした。

data-slot 属性はより一意です。amp-ad の data- で始まる属性は、ベンダー固有の属性です。つまり、すべてのベンダーがこの特定の属性を必要とするわけではなく、この属性が提供された場合に必ず反応するわけでもありません。たとえば、上記の Double Click の例と A9 プラットフォームのテスト広告を比較してみましょう。

<amp-ad
  width="300"
  height="250"
  type="a9"
  data-aax_size="300x250"
  data-aax_pubname="test123"
  data-aax_src="302">
</amp-ad>

上記の例を <header> タグの直後に追加してみてください。ページを更新すると、2 つのテスト広告が表示されます。

DoubleClick で使用できるその他のオプションを見てみましょう。次の 2 つの地域ターゲティング広告設定をページに追加してみてください。

<amp-ad
  width="300"
  height="250"
  type="doubleclick"
  data-slot="/35096353/amptesting/geo/uk">
  <div fallback>No ad appeared because you're not browsing from the UK!</div>
</amp-ad>

<amp-ad
  width="300"
  height="250"
  type="doubleclick"
  data-slot="/35096353/amptesting/geo/us">
  <div fallback>No ad appeared because you're not browsing from the US!</div>
</amp-ad>

残念ながら、ジオターゲティングはページ自体のコードから制御することはできません。ただし、これらのテスト広告は、特定の国（英国と米国）でのみ表示されるように Double Click ダッシュボードですでに設定されています。

ページを更新して、もう一度ご確認ください。次のスクリーンショットはオーストラリアで撮影されたため、どちらの広告も読み込まれていません。

上記の地域ターゲティングの例は、amp-ad があらゆる種類の広告プラットフォームの機能に対応できるほど柔軟であることを示しています。

現在サポートされている広告ネットワークは次のとおりです。

最新のサポート対象広告プラットフォームについては、AMP 広告コンポーネントのドキュメントページをご覧ください。

次の章では、より高度な AMP コンポーネントと、それらを AMP ドキュメントに含める方法について説明します。

6. 拡張コンポーネントでコンテンツを拡張する

ここまでで、テキスト、画像、広告が埋め込まれた基本的な AMP ドキュメントが完成しました。これらは、ストーリーを伝え、コンテンツを収益化するための重要な要素です。しかし、現代のウェブサイトでは、単にテキストと画像を掲載するだけでは十分とはいえません。

AMP ドキュメントを次のレベルに引き上げ、前述のコアコンポーネント以外にどのようなコンポーネントが利用できるかを見ていきましょう。

この章では、ニュース記事でよく見られる高度なウェブ機能をいくつか追加してみます。

YouTube 動画
ツイート
記事の引用

YouTube 動画の埋め込み

YouTube 動画をドキュメントに埋め込んでみましょう。次のコードは、動画を埋め込んでページに追加します。

<amp-youtube
  data-videoid="mGENRKrdoGY"
  layout="responsive"
  width="480"
  height="270">
  <div fallback>
    <p>The video could not be loaded.</p>
  </div>
</amp-youtube>

ページを更新して、ページを確認します。動画の代わりに「動画を読み込めませんでした。」というテキストが表示されます。

ブラウザで YouTube 動画を問題なく視聴できる場合でも、このエラーが表示されます。その理由は、動画の読み込み自体は失敗しておらず、コンポーネント自体が失敗しています。

すでに説明したように、AMP 基本ライブラリの JavaScript ファイルには、すべてのコンポーネントが含まれているわけではありません。特に、YouTube コンポーネント用の追加の JavaScript リクエストを含める必要があります。コアセット以外のすべてのコンポーネントで、これらの追加の JavaScript 参照が必要になります。

<head> タグに次のリクエストを追加します。

<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>

ページを更新すると、YouTube 動画が表示されます。

ここでも、アスペクト比が AMP レイアウトシステムによって計算されるように、動画の幅と高さを指定しています。また、レイアウトタイプがレスポンシブに設定されているため、この動画は親要素の幅いっぱいに表示されます。

詳しくは、YouTube コンポーネントをご覧ください。

ツイートを表示する

Twitter からの事前フォーマット済みツイートの埋め込みは、ニュース記事の一般的な機能です。AMP Twitter コンポーネントを使用すると、この機能を簡単に提供できます。

まず、ドキュメントの <head> タグに次の JavaScript リクエストを追加します。

<script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>

記事に次のコードを追加して、ツイート自体を埋め込みます。

<amp-twitter
  width="486"
  height="657"
  layout="responsive"
  data-tweetid="638793490521001985">
</amp-twitter>

data-tweetid 属性は、特定のプラットフォームベンダーがカスタム属性を必須としているもう 1 つの例です。この場合、Twitter は data-tweetid 属性を、ページに埋め込む特定のツイートに対応するものとして認識します。

ブラウザを更新して、ページを確認します。ツイートが表示されます。

詳しくは、Twitter コンポーネントをご覧ください。

記事の引用をハイライト表示する

ニュース記事の一般的な要素は、記事の特に魅力的なテキストスニペットをハイライト表示することです。たとえば、特定のソースからの引用や重要な事実を大きなフォントで繰り返して、読者の注意を引くことができます。

ただし、引用文やテキストスニペットの文字列の長さは必ずしも同じではないため、大きなフォントサイズと、特定のテキストがページ上で占めるスペースの量をバランスさせるのは難しい場合があります。

AMP には、このような状況に特化した amp-fit-text という別のコンポーネントがあります。固定幅と固定高さの要素、および最大フォントサイズを定義できます。コンポーネントは、引用符のテキストが使用可能な幅と高さに収まるように、フォントサイズをインテリジェントにスケーリングします。

試してみましょう。まず、コンポーネントのライブラリを <head> タグに追加します。

<script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>

ページに以下を追加します。

<amp-fit-text width="400" height="75" layout="responsive" max-font-size="42">
  Big, bold article quote goes here.
</amp-fit-text>

ページを更新して、結果を確認します。

さらにテストしてみましょう。引用をもっと短くするとどうなるでしょうか。

<amp-fit-text width="400" height="75" layout="responsive" max-font-size="42">
  #YOLO
</amp-fit-text>

長い引用の場合はどうでしょうか？

<amp-fit-text width="400" height="75" layout="responsive" max-font-size="42">
   And the Raven, never flitting, still is sitting, still is sitting. On the pallid bust of Pallas just above my chamber door; And his eyes have all the seeming of a demon's that is dreaming, And the lamp-light o'er him streaming throws his shadow on the floor; And my soul from out that shadow that lies floating on the floor. Shall be lifted—nevermore!
</amp-fit-text>

amp-fit-text の最後のテストとして、#YOLO などの短いテキストを作成し、高さを大幅に大きく（たとえば 400 に）して、max-font-size 属性の値を 42 に維持してみます。テキストはページ上でどのように表示されるでしょうか。テキストは垂直方向に中央揃えになりますか？それとも、amp-fit-text タグの高さが縮小して最大フォントサイズに収まりますか？AMP のレイアウトシステムについて知っていることを踏まえて、ドキュメントを編集する前に質問に答えてみましょう。

7. 複雑なカルーセル

ウェブ開発でよく使用されるもう 1 つの機能は、カルーセルです。AMP には、このニーズを満たすように設計された汎用コンポーネントが含まれています。画像のカルーセルなどの簡単な例から始めましょう。

ドキュメントの <head> タグに次の JavaScript リクエストを追加して、カルーセルコンポーネントライブラリを含めることを忘れないでください。

<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

次に、レスポンシブレイアウトと事前定義された幅と高さを持つ画像のシンプルなカルーセルを埋め込みます。ページに以下を追加します。

<amp-carousel layout="fixed-height" height="168" type="carousel" >
  <amp-img src="mountains-1.jpg" width="300" height="168"></amp-img>
  <amp-img src="mountains-2.jpg" width="300" height="168"></amp-img>
  <amp-img src="mountains-3.jpg" width="300" height="168"></amp-img>
</amp-carousel>

ページを更新すると、ページにカルーセルが表示されます。

カルーセルコンポーネントはさまざまな方法で構成できます。代わりに型を slides に変更して、結果を確認します。amp-carousel とその中の画像の layout 属性も responsive に変更してください。

要素のスクロールリストではなく、一度に 1 つの要素が表示されるようになります。要素間を移動するには、横にスワイプしてみてください。3 つ目の要素までスワイプすると、それ以上スワイプできなくなります。

次に、loop 属性を追加します。ページを更新し、すぐに左にスワイプしてみてください。カルーセルは無限にループします。

最後に、このカルーセルが 2 秒ごとに自動再生されるようにします。追加: ページに autoplay 属性と遅延属性（値は 2000）を追加します（例: delay="2000"）。

最終結果は次のようになります。

<amp-carousel layout="responsive" width="300" height="168" 
         type="slides" autoplay delay="2000" loop>
  <amp-img src="mountains-1.jpg" width="300" height="168" layout="responsive"></amp-img>
  <amp-img src="mountains-2.jpg" width="300" height="168" layout="responsive"></amp-img>
  <amp-img src="mountains-3.jpg" width="300" height="168" layout="responsive"></amp-img>
</amp-carousel>

ページを更新して、お試しください。

画像のカルーセルは優れた効果を発揮しますが、より複雑なコンテンツをカルーセルに表示するにはどうすればよいでしょうか。広告、テキスト、画像を 1 つのカルーセルにまとめて配置してみましょう。amp-carousel は本当にそのようなコンテンツの組み合わせをすべて同時に処理できるでしょうか。増やすには、

まず、amp-fit-text コンポーネントと amp-carousel コンポーネントが安全に連携して動作するように、このスタイル設定をページに追加します。

amp-fit-text {
    white-space: normal;
}

次のカルーセルコードをページに配置してみましょう。

<amp-carousel layout="fixed-height" height="250" type="carousel" >
    <amp-img src="blocky-mountains-1.jpg" width="300" height="250"></amp-img>

    <amp-ad width="300" height="250"
      type="doubleclick"
      data-slot="/35096353/amptesting/image/static">
        <div placeholder>This advert is still loading.</div>
    </amp-ad>

    <amp-fit-text width="300" height="250" layout="fixed">
        Big, bold article quote goes here.
    </amp-fit-text>
</amp-carousel>

ページを更新すると、次のように表示されます。

詳しくは、カルーセルコンポーネントをご覧ください。

8. amp-analytics でトラッキングする

通常、アナリティクスプラットフォームは、インライン JavaScript スニペットと関数呼び出しを介してウェブサイトに統合されます。これにより、イベントがトリガーされ、アナリティクスシステムに送り返されます。AMP は、複数のアナリティクスパートナー向けに、柔軟な JSON 設定構文を提供してこのプロセスを再現しています。

以下は、従来の JavaScript を使用した Google アナリティクスのトラッキングの例です。これを amp-analytics の JSON 形式で書き換えます。まず、従来の JavaScript アプローチを見てみましょう。

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>

上記は非常にシンプルで、ページビューイベントをトラッキングするための通知を送信します。

上記のすべてを amp-analytics コンポーネントで複製するには、まずドキュメントの <head> にコンポーネントライブラリを含めます。

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

コンポーネントは次のように含めます。

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-YYYY-Y"
  },
  "triggers": {
    "default pageview": {
      "on": "visible",
      "request": "pageview",
      "vars": {
        "title": "Name of the Article"
      }
    }
  }
}
</script>
</amp-analytics>

複雑に見えるかもしれませんが、実際にはさまざまな種類のイベントを記述するための非常に柔軟な形式です。また、JSON 形式には、従来の例の JavaScript コードの BLOB は含まれていません。誤って変更すると、エラーが発生する可能性があります。

JSON 形式では、triggers キーに、トラッキングするすべてのイベントトリガーを表すキーのセットが含まれます。これらのトリガーのキーは、イベントの説明です（上記の例では「default pageview」）。title キーの値は、閲覧中のページの名前に対応します。

上記の例を拡張して、「#header トリガーのクリック」という別のトリガーを追加できます。

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-YYYY-Y"
  },
  "triggers": {
    "default pageview": {
      "on": "visible",
      "request": "pageview",
      "vars": {
        "title": "Name of the Article"
      }
    },
    "click on #header trigger": {
      "on": "click",
      "selector": "#header",
      "request": "event",
      "vars": {
        "eventCategory": "examples",
        "eventAction": "clicked-header"
      }
    }
  }
}
</script>
</amp-analytics>

このトリガーは、その名前のとおりです。DOM セレクタ「#header」を使用して、ID「header」のタグをクエリし、デバイスで「クリック」またはタップされたイベントで、カテゴリラベル「examples」とともにイベントアクション「clicked-header」を分析プラットフォームに送信します。

統合したいカスタムトラッキングプラットフォームがある場合でも、amp-analytics を使用して、トラッキング情報用に独自のパーソナライズされた URL エンドポイントを定義できます。amp-analytics コンポーネントについて詳しくは、こちらをご覧ください。

9. サイトのナビゲーション

モバイルサイトの一般的な要件は、サイトナビゲーションメニューを含めることです。こうしたメニューにはさまざまな形式があります。AMP ドキュメントでナビゲーションを表示する方法の例をいくつかご紹介します。

ホームページにリンクバックする - 最も簡単な方法です。
カルーセルコンポーネントを使用したサブ見出しメニュー。

ホームページのリンク

ユーザーがウェブサイトの通常のナビゲーションオプションにアクセスできるようにする最も簡単な方法は、通常のウェブサイトインターフェースにユーザーを誘導することです。

この HTML リンクを <header> タグに追加してみてください。

<header>
  <a href="homepage.html">
    <amp-img class="home-button" src="icons/home.png" width="36" height="36"></amp-img>
  </a>

  News Site
</header>

また、インライン CSS に次のルールを追加します。

.home-button {
  float: left;
}

次に、ページを更新します。ページの左上に homepage.html を指すリンクが表示されます。このリンクをクリックすると、どこにも移動しないことがすぐにわかります。

このリンクをウェブサイトのホームページの URL に置き換えると、ユーザーは通常のウェブサイトのナビゲーションからサイトの他の部分に移動できるようになります。

前述のとおり、これは既存のウェブサイトのナビゲーションを活用する最もシンプルなアプローチです。次に、2 つの代替案について説明します。

この問題に対する別のアプローチは、サイトのナビゲーションメニューを AMP ドキュメント内に表示することです。ページの一部に収まるように、サイトのヘッダーの下にスクロール可能なメニューを表示するカルーセルを使用できます。

カルーセルコンポーネントが必要なので、ページの <head> タグにコンポーネントの JavaScript を追加してください。

<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

<header> タグのすぐ下に次の HTML スニペットを追加してみてください。

...
</header>
<div class="sub-menu">
  <amp-carousel layout="fixed-height" height="38" type="carousel">
    <a href="#example1">Example 1</a>
    <a href="#example2">Example 2</a>
    <a href="#example3">Longer Named Example 3</a>
    <a href="#example4">Example 4</a>
    <a href="#example5">Example 5</a>
    <a href="#example6">Example 6</a>
  </amp-carousel>
</div>
<article>
...

また、これらのルールをインライン CSS に追加します。

.sub-menu {
  background: black;
}

.sub-menu a {
  display: block;
  background: tomato;
  margin: 5px;
  padding: 5px;
  color: white;
  text-decoration: none;
}

次に、ページを更新します。記事のタイトルの下にリンクのメニューが表示されます。このメニューは水平方向にスクロールして、多くのナビゲーションリンクを保存できます。

このサブメニューナビゲーションは、ページ上のスペースをあまり消費せずに多くのリンクを保存するのに最適な方法です。

10. フォントの追加

前述のとおり、AMP ドキュメントでは外部スタイルシートリクエストは許可されていません。ただし、このルールには 1 つの例外があります。フォントです。

フォントはウェブユーザーにとって記事の閲覧体験の重要な要素であり、ウェブブラウザは外部スタイルシートリクエストを介してフォントファイルを取得するため、AMP でのこの除外は必要です。

ドキュメントに Raleway フォントへの参照を追加してみましょう。

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Raleway">

次に、Raleway への参照を含めるように CSS を更新します。

body {
  width: auto;
  margin: 0;
  padding: 0;
  font-family: 'Raleway', sans-serif;
}

ページを更新して、新しいデザインを確認します。また、検証ツールの出力を確認すると、この外部リクエストに関するエラーがないことがわかります。

注: ドキュメントにフォントを含めるために、追加のコンポーネントは必要ありません。ただし、amp-font という名前のコンポーネントは実際に存在します。実際にはウェブフォントの読み込みには使用されませんが、ウェブフォントが正常に読み込まれたかどうかを検出し、必要に応じて適切に対応するために使用できます。

この機能を使用すると、フォントが完全に読み込まれるまでテキストを非表示にできるため、ユーザーはテキストが一時的なフォントから本来のフォントに切り替わる様子を目にすることはありません。フォントが失敗した場合は、代わりに一時フォントを表示するだけにします。最悪のシナリオは、ユーザーがテキストを読めないことです。amp-font について詳しくは、こちらをご覧ください。

11. 完了

これで、AMP の高度なコードラボは終了です。AMP の多くの重要な要素について確認しました。

amp-ad と amp-analytics を使用して、さまざまな広告プラットフォームや分析ベンダーをサポートする方法について、ご理解いただけたでしょうか。利用可能な AMP コンポーネントの全リストを必ずご確認ください。

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

AMP By Example - AMP コンポーネントとコンポーネントパターンの例を幅広く掲載したカタログ。
DoubleClick 広告の例 - amp-ad の例を幅広く掲載したカタログ。
ページ検出について
許可されていない HTML タグ
制限付き CSS ルールとアニメーション
iframe について
AMP CDN
利用可能な AMP コンポーネントのリスト