Time to sync up! Tune in for Google I/O on May 14, 2024. Register now.

このページは Cloud Translation API によって翻訳されました。

インタラクティブで美しい正規の AMP ページ

AMP を使用すると、信頼性、応答性、パフォーマンスに優れたウェブページを簡単に構築できます。AMP を使用すると、JavaScript を記述せずに、一般的なサイトインタラクションを作成できます。amp.dev のウェブサイトには、事前設計済みのクイックスタートテンプレートが用意されています。

作成するアプリの概要

この Codelab では、AMP 機能の多くと拡張コンポーネントが組み込まれた、レスポンシブでインタラクティブな美しい AMP ページを作成します。

レスポンシブナビゲーション
フルページのヒーロー画像
レスポンシブ画像
自動再生ありの動画
Instagram などの埋め込み
アクションとセレクタ
amp-bind によるデータバインディング
amp-fx-collection、amp-animation による視覚効果

必要なもの

最新のウェブブラウザ
Node.js とテキストエディタ、または CodePen または同様のオンラインプレイグラウンドへのアクセス
HTML、CSS、JavaScript、Google Chrome デベロッパーツールに関する基本的な知識

コンテンツ配信用ツール

Node.js を使用してローカル HTTP サーバーを実行し、AMP ページを配信します。インストール方法については、Node.js のウェブサイトをご覧ください。

ローカルでコンテンツを配信するには、Node.js ベースの静的コンテンツサーバーである serve を使用します。インストールするには、次のコマンドを実行します。

npm install -g serve

amp.dev からテンプレートをダウンロードする

AMP テンプレートは、最新のレスポンシブ AMP ページとコンポーネントを格納するリポジトリです。最新のレスポンシブ AMP ページをすばやく作成できます。

AMP テンプレートにアクセスして、「シンプルな記事」のコード（「今年の動物写真部門」テンプレート）をダウンロードします。

テンプレートコードの実行

ZIP ファイルの内容を抽出します。

article フォルダ内でコマンド serve を実行して、ファイルをローカルで提供します。

ブラウザで http://localhost:5000/templates/article.amp.html にアクセスします。（ポートは、serve のバージョンによっては 3000 などの番号になります。コンソールで正確な住所を確認してください）。

その際に、Chrome DevTools を開き、デバイスのモードも切り替えます。

テンプレートコードをカットする

ここまでは、機能する AMP ページについて概説しましたが、この Codelab の目的は学習して練習することです。

<body></body> 内のものをすべて削除します。

これで、ボイラープレートコードのみを含む空のページが表示されます。

この Codelab 全体を通して、この空白ページに多数のコンポーネントを追加し、さらに多くの機能を備えたテンプレートを再作成します。

AMP ページは、追加のタグと信頼性の高いパフォーマンスのために制限のある HTML ページです。

AMP ページのほとんどのタグは通常の HTML タグですが、一部の HTML タグは AMP 専用のタグに置き換えられます。こうしたカスタム要素は AMP HTML コンポーネントと呼ばれ、一般的なパターンをパフォーマンスの高い方法で簡単に実装できます。

最もシンプルな AMP HTML ファイルは次のようになります（AMP ボイラープレートとも呼ばれます）。

<!doctype html>
<html ⚡>
 <head>
   <meta charset="utf-8">
   <link rel="canonical" href="hello-world.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <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>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
 <body>Hello World!</body>
</html>

設定中に作成した空のページのコードを確認してください。このボイラープレートにはいくつかのボイラープレートが含まれており、重要なものとして、重要な CSS を多く含む <style amp-custom> タグが挙げられます。

AMP はデザインについて特別なとは言えず、特定のスタイルセットを適用するものではありません。ほとんどの AMP コンポーネントには、ごく基本的なスタイル設定が用意されています。カスタムの CSS は、ページの作成者に委ねられます。そこで登場するのが <style amp-custom> です。

他方、AMP テンプレートを使えば、見栄えの良いデザイン、クロスブラウザ、レスポンシブな独自の CSS スタイルを提供して、エレガントな AMP ページをすばやく作成できます。ダウンロードしたテンプレートコードには、<style amp-custom>. の独自の CSS スタイルが含まれています

まず、テンプレートから削除したコンポーネントを追加して、ナビゲーションメニュー、ページのヘッダー画像、タイトルなどのページのシェルを作成します。

AMP Start UI コンポーネントのページからサポートを参照できますが、実装の詳細は詳しく説明しません。Codelab の後のステップでは、そのための機会を数多く提供します。

https://ampstart.com/components#navigation ページにアクセスし、レスポンシブメニューバー用に提供されている HTML コードをコピーしてページの body に貼り付けます。

AMP スタートのコードには、ページにレスポンシブナビゲーションバーを実装するために必要な HTML と CSS のクラス構造が含まれています。

実際にやってみる: ウィンドウのサイズを変更して、さまざまな画面サイズにどのように反応するかを確認します。

このコードでは、CSS メディアクエリ、amp-sidebar および amp-accordion AMP コンポーネントを使用します。

ヒーロー画像とタイトルを追加する

AMP Start は、美しくレスポンシブなヒーロー画像やタイトルにもすぐに使えるスニペットを提供しています。

https://ampstart.com/components#media に移動し、Fullpage Hero 用に提供された HTML コードをコピーして、body. の  comment の直後に貼り付けます。

画像とタイトルを更新しましょう。

お気づきかもしれませんが、コードスニペットには 2 つの異なる amp-img タグがあります。1 つは幅が狭い場合に使用し、解像度の低い画像を指すものにします。もう 1 つは大きいディスプレイ用に使用します。AMP は、media 属性に基づいて自動的に切り替わります。この属性は、AMP のすべての要素でサポートされています。

src、width、height を別の画像に変更し、既存の <figure>...</figure> を次のように置き換えて、タイトルを「太平洋岸で最も美しいハイキング」に更新します。

<figure class="ampstart-image-fullpage-hero m0 relative mb4">
    <amp-img width="600" height="900" layout="responsive" src="https://unsplash.it/600/900?image=1003" media="(max-width: 415px)"></amp-img>
    <amp-img height="1800" layout="fixed-height" src="https://unsplash.it/1200/1800?image=1003" media="(min-width: 416px)"></amp-img>
    <figcaption class="absolute top-0 right-0 bottom-0 left-0">
      <header class="p3">
        <h1 class="ampstart-fullpage-hero-heading mb3">
        <span class="ampstart-fullpage-hero-heading-text">
          Most Beautiful Hikes in the Pacific Northwest
        </span>
      </h1>
        <span class="ampstart-image-credit h4">
        By <a href="#" role="author" class="text-decoration-none">D.F. Roy</a>,<br> January 14, 2017
      </span>
      </header>
      <footer class="absolute left-0 right-0 bottom-0">
        <a class="ampstart-readmore py3 caps line-height-2 text-decoration-none center block h5" href="#content">Read more</a>
      </footer>
    </figcaption>
</figure>

それではこのページを見てみましょう。

概要

レスポンシブナビゲーションやヒーロー画像、タイトルなど、ページのシェルを作成しました。
ここでは、AMP テンプレートについて学習し、AMP Start UI コンポーネントを使用してページシェルをすばやく作成しました。

このセクションの完全なコードは、http://codepen.io/aghasSemi/pen/RpRdzV にあります。

このセクションでは、レスポンシブな画像、動画、埋め込み、テキストをページに追加します。

ページのコンテンツをホストする main 要素を追加しましょう。body: の末尾に追加します

<main id="content">

</main>

見出しと段落を追加する

main に次の行を追加します。

<h2 class="px3 pt2 mb2">Photo Gallery</h2>
<p class="ampstart-dropcap mb4 px3">Vivamus viverra augue libero, vitae dapibus lectus accumsan eget. Pellentesque eget ipsum purus. Maecenas leo odio, ornare nec ex id, suscipit porta ipsum. Ut fringilla semper cursus.</p>

AMP は HTML のみのため、このコードについては特別な CSS 名以外はありません。px3、mb2、ampstart-dropcap とは何ですか？ユーザーがどこからアクセスしているか？

これらのクラスは AMP HTML には含まれていません。AMP Start テンプレートでは、Basscs を使用して低レベルの CSS ツールキットを提供し、AMP Start に固有のクラスを追加します。

このスニペットでは、px3 と mb2 が Basscss によって定義され、それぞれ padding-left-right と margin-bottom に変換されます。ampstart-dropcap は AMP Start で提供され、段落の最初の文字を大きくします。

事前定義された CSS クラスに関するドキュメントは、http://basscss.com/ と https://ampstart.com/components に記載されています。

ページが今どのように見えるか見てみましょう。

画像を追加する

AMP でレスポンシブページを作成するのは簡単です。多くの場合、AMP コンポーネントのレスポンシブ化は layout="responsive" 属性を追加するだけの簡単な作業です。HTML の img タグと同様に、amp-img では srcset もサポートされており、ビューポートの幅とピクセル密度ごとに異なる画像を指定できます。

amp-img を main に追加します。

<amp-img 
  layout="responsive" width="1080" height="720"
  srcset="https://unsplash.it/1080/720?image=1043 1080w, https://unsplash.it/720/480?image=1043 720w" 
  alt="Photo of mountains and trees landscape">
</amp-img>

このコードでは、layout="responsive" を指定し、width と height. を指定して応答性の高い画像を作成しています。

レスポンシブレイアウトを使用する際に幅と高さを指定する必要があるのはなぜですか？

次の 2 つの理由があります。

AMP では、幅と高さを使用してアスペクト比が計算され、親コンテナに合うように幅が変更されても正しい高さが維持されます。
AMP では、すべての要素に静的サイズを適用することで、ユーザーエクスペリエンスを向上させ（ページ内でジャンプしない）、リソースのダウンロード前に各要素をサイズ調整してページを配置しています。

それではこのページを見てみましょう。

自動再生動画を追加する

AMP は、YouTube や Vimeo などの多くの動画プレーヤーに対応しています。AMP では、amp-video拡張コンポーネントの下に独自のバージョンの HTML5 video 要素があります。amp-video や amp-youtube などの一部の動画プレーヤーは、モバイルでミュートされた自動再生もサポートしています。

amp-img と同様に、layout="responsive" の追加で amp-video が応答できるようになります。

自動再生動画をページに追加しましょう。

別の段落と、次の amp-video 要素を main: に追加します。

<p class="my2 px3">Vivamus viverra augue libero, vitae dapibus lectus accumsan eget. Pellentesque eget ipsum purus. Maecenas leo odio, ornare nec ex id, suscipit porta ipsum. Ut fringilla semper cursus.</p>

<amp-video 
  layout="responsive" width="1280" height="720"
  autoplay controls loop
  src="https://storage.googleapis.com/ampconf-76504.appspot.com/Bullfinch%20-%202797.mp4">
</amp-video>

詳しく見てみましょう。

埋め込みを追加する

AMP には、Twitter や Instagram など、多くのサードパーティの埋め込み用に拡張コンポーネントが用意されています。AMP コンポーネントがない埋め込みには、常に amp-iframe を使用します。

Instagram のページをページに追加しましょう。

amp-img や amp-video とは異なり、amp-instagram は組み込みコンポーネントではありません。コンポーネントを使用するには、そのスクリプトのインポートタグを AMP ページの head に明示的に追加する必要があります。

使用する AMP Start のボイラープレートには、複数のインポートスクリプトタグが含まれています。head タグの先頭で、次のインポートスクリプト行が含まれていることを確認します。

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

別の段落と、次の amp-instagram 要素を main: に追加します。

<p class="my2 px3">Vivamus viverra augue libero, vitae dapibus lectus accumsan eget. Pellentesque eget ipsum purus. Maecenas leo odio, ornare nec ex id, suscipit porta ipsum. Ut fringilla semper cursus.</p>
    
<amp-instagram
   layout="responsive" width="566" height="708"
   data-shortcode="BJ_sPxzAGyg">
</amp-instagram>

詳しく見てみましょう。

現時点では十分なコンテンツです。

概要

AMP のレスポンシブコンポーネントについて学習しました。
さまざまな種類のメディアとテキストコンテンツを追加している。

このセクションの完全なコードは、http://codepen.io/aghasSemi/pen/OpXGoa にあります。

ここまでは、ページの静的コンテンツのみ作成しました。このセクションでは、カルーセル、ライトボックス、AMP アクションなどのコンポーネントを使用してインタラクティブなフォトギャラリーを作成します。

AMP はカスタム JavaScript をサポートしていませんが、ユーザーアクションを受け取って処理するための構成要素がいくつか公開されています。

写真カルーセルを追加する

写真に焦点を当てた AMP ページの画像をすべてページ上に表示しても、ユーザーエクスペリエンスは向上しません。amp-carousel を使用すると、水平方向にスワイプできる写真スライドを作成できます。

まず、amp-carousel のスクリプトタグが head に含まれていることを確認します。

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

次に、複数の画像を含むレスポンシブ amp-carousel を slides タイプの main: に追加しましょう。

<p class="my2 px3">Vivamus viverra augue libero, vitae dapibus lectus accumsan eget. Pellentesque eget ipsum purus. Maecenas leo odio, ornare nec ex id, suscipit porta ipsum. Ut fringilla semper cursus.</p>

<amp-carousel 
  layout="responsive" width="1080" height="720"
  type="slides">

    <amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1039" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1040" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1041" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1042" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1043" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1044" layout="fill"></amp-img>
</amp-carousel>

type="slides" は、一度に 1 つの画像のみを表示し、ユーザーが画像をスワイプできるようにします。

カルーセル内の画像には layout="fill" を使用します。これは、スライドカルーセルのサイズは常に子要素で埋められるため、幅と高さを必要とする別のレイアウトを指定する必要がないためです。

実際に使ってみる:

サムネイルカルーセルを追加する

次に、これらの画像のサムネイル用の水平スクロール可能コンテナを追加しましょう。再度 <amp-carousel> を使用しますが、type="slides" は使用せず、高さを固定したレイアウトにします。

前の amp-carousel 要素の後に次のコードを追加します。

<amp-carousel layout="fixed-height" height="78" class="mt1">

    <amp-img src="https://unsplash.it/108/72?image=1037" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1038" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1039" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1040" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1041" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1042" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1043" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1044" layout="fixed" width="108" height="72"></amp-img>

</amp-carousel>

ここではサムネイル画像として layout="fixed" を使用し、同じ写真の低解像度バージョンを使用しました。

詳しく見てみましょう。

ユーザーがサムネイルをタップしたときに画像を変更する

そのためには、tap などのイベントをスライドの変更などのアクションに結び付ける必要があります。

イベント: on 属性を使用して、要素にイベントハンドラをインストールできます。tap イベントは、すべての要素でサポートされています。

アクション: amp-carousel によって公開される goToSlide(index=INTEGER) アクションは、各サムネイル画像のタップイベントハンドラから呼び出すことができます。

イベントとアクションについて理解したところで、これらを 1 つにまとめます。

まず、サムネイルのタップイベントハンドラからスライドカルーセルを参照できるように、スライドカルーセルに id を付与する必要があります。

既存のコードを変更して、スライドのカルーセル（最初の属性）に id 属性を追加します。

<amp-carousel 
  id="imageSlides"
  type="slides"

  ....

次に、イベントハンドラ（on="tap:imageSlides.goToSlide(index=<slideNumber>)") の各画像に on="tap:imageSlides.goToSlide(index=<slideNumber>)")）をインストールします。

<amp-img on="tap:imageSlides.goToSlide(index=0)" role="button" tabindex="1" layout="fixed" ...
<amp-img on="tap:imageSlides.goToSlide(index=1)" role="button" tabindex="1" layout="fixed" ...
<amp-img on="tap:imageSlides.goToSlide(index=2)" role="button" tabindex="1" layout="fixed" ...
...

また、値として tabindex を指定し、ユーザー補助用に ARIA role を設定する必要があります。

以上で、各サムネイル画像をタップすると、スライドカルーセル内に対応する画像が表示されます。

ユーザーがタップしたときにサムネイルをハイライト表示します。

これは可能ですか？タップイベントハンドラから呼び出す要素の CSS クラスを変更するアクションはないようです。では、選択されたサムネイルをハイライト表示するにはどうすればよいでしょうか。

参考: <amp-selector>

amp-selector はこれまで使用したコンポーネントとは異なります。これはページレイアウトに影響を及ぼさないため、表示コンポーネントではなく、ユーザーが選択したオプションを AMP ページに知らせる構成要素となります。

amp-selector の動作はごく単純でありながら強力です。

amp-selector には、任意の HTML 要素または AMP コンポーネントを含めることができます。
amp-selector の子孫要素には、option=<value> 属性があればオプションになります。
ユーザーがオプションの要素をタップすると、amp-selector はその要素に selected 属性を追加するだけです（さらに、単一選択モードでは他のオプション要素から削除されます）。
CSS 属性セレクタで selected 属性をターゲットに設定することで、カスタム CSS 内の選択した要素のスタイルを設定できます。

これが、現在のタスクの達成にどのように役立つかを見てみましょう。

amp-selector のスクリプトタグを head に追加します。

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

amp-selector でサムネイルカルーセルをラップする
option=<value> 属性を追加して、すべてのサムネイルをオプションにします。
selected 属性を追加して、最初のサムネイルをデフォルトで選択する。

<amp-selector>

  <amp-carousel layout="fixed-height" height="78" class="mt1">

    <amp-img option=0 selected on="tap:imageSlides.goToSlide(index=0)" ...
      
    <amp-img option=1 on="tap:imageSlides.goToSlide(index=1)" ...

    ...

  </amp-carousel>

</amp-selector>

ここでは、スタイルを選択して、選択したサムネイルをハイライト表示する必要があります。

AMP Start の圧縮された CSS ボイラープレートの後に、以下のカスタム CSS を <style amp-custom> に追加します。

<style amp-custom>
...

/* low opacity for non-selected thumbnails */
amp-selector amp-img[option] {
  opacity: 0.4;
}

/* normal opacity for the selected thumbnail */
amp-selector amp-img[option][selected] {
  opacity: 1;
}

</style>

詳しく見てみましょう。

問題はありませんが、バグに気づきましたか？

ユーザーがスライドカルーセルをスワイプしても、選択したサムネイルは反映されません。カルーセル内の現在のスライドを、選択したサムネイルにバインドするにはどうすればよいですか？

次のセクションでは、その方法について説明します。

概要

さまざまな種類のカルーセルと、その使い方について学びました。
AMP アクションとイベントを使用して、ユーザーがサムネイル画像をタップしたときに、画像カルーセルに表示するスライドを変更しました。
amp-selector の概要と、興味深いユースケースを実装するためのビルディングブロックの使用方法を学びました。

このセクションの完全なコードは、http://codepen.io/aghasSemi/pen/gmMJMy にあります。

このセクションでは、amp-bind を使用して、前のセクションの画像ギャラリーのインタラクティビティを改善します。

`amp-bind` とは何か

コア AMP コンポーネント amp-bind を使用すると、データバインディングと式を使用してカスタムインタラクティビティを作成できます。

amp-bind は、次の 3 つの主要部分からなります。

都道府県
バインディング
変化

状態は、アプリケーションの状態の変数で、1 つの値から複雑なデータ構造まで何でも格納できます。すべてのコンポーネントは、この共有変数に読み書きできます。

バインディングは、状態を HTML 属性または要素のコンテンツに関連付ける式です。

ミューテーションは、なんらかのユーザーアクションまたはイベントの結果によって状態の値を変更するアクションです。

amp-bind のミューテーションは、ミューテーションが発生すると開始されます。ミューテーションが発生すると、その状態にバインドされているすべてのコンポーネントに通知され、新しい状態を反映するように自動的に更新されます。

実際の動作を確認しましょう。

`amp-bind` を使用して画像ギャラリーを再実装する

以前は、AMP アクション（goToSlide() など）を使用して画像全体のカルーセルカルーセルを tap イベントでサムネイル画像に関連付け、amp-selector を使用して選択したサムネイルをハイライト表示しました。

データバインディングに対する amp-bind アプローチを使用して、このコードを完全に再実装する方法を見てみましょう。

ただし、コーディングを開始する前に、アプローチを設計してみましょう。

1. 現状は？

ここではかなりシンプルです。ここで気にするのは、現在のスライド番号です。そこで selectedSlide を使用します。

2. どのようなバインディングですか？

selectedSlide が変更されたら何を変更する必要がありますか。

画像全体のカルーセルに表示される slide:

<amp-carousel [slide]="selectedSlide" ...

amp-selector の selected アイテムも変更する必要があります。これにより、前のセクションで直面したバグが修正されます。

<amp-selector [selected]="selectedSlide" ...

3. どのようなミューテーションがありますか？

selectedSlide を変更する必要があるのはどのような場合ですか？

全画面表示のカルーセルで、スワイプによって新しいスライドに切り替えられた場合:

<amp-carousel on="slideChange:AMP.setState({selectedSlide:event.index})" ...

サムネイルを選択すると、次のようになります。

<amp-selector on="select:AMP.setState({selectedSlide:event.targetOption})" ...

ここでは、AMP.setState を使用してミューテーションをトリガーします。つまり、サムネイルに保持されているすべての on="tap:imageSlides.goToSlide(index=n)" コードが不要になります。

まとめ:

amp-bind のスクリプトタグを head に追加します。

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

既存のギャラリーのコードを新しいアプローチに置き換えます。

<amp-carousel [slide]="selectedSlide" on="slideChange:AMP.setState({selectedSlide:event.index})" type="slides" id="imageSlides" layout="responsive" width="1080" height="720">

  <amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1039" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1040" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1041" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1042" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1043" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1044" layout="fill"></amp-img>

</amp-carousel>


<amp-selector [selected]="selectedSlide" on="select:AMP.setState({selectedSlide:event.targetOption})">

  <amp-carousel layout="fixed-height" height="78" class="mt1">

    <amp-img option=0 selected src="https://unsplash.it/108/72?image=1037" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=1 src="https://unsplash.it/108/72?image=1038" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=2 src="https://unsplash.it/108/72?image=1039" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=3 src="https://unsplash.it/108/72?image=1040" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=4 src="https://unsplash.it/108/72?image=1041" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=5 src="https://unsplash.it/108/72?image=1042" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=6 src="https://unsplash.it/108/72?image=1043" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=7 src="https://unsplash.it/108/72?image=1044" layout="fixed" width="108" height="72"></amp-img>

  </amp-carousel>

</amp-selector>

実際に試してみましょう。サムネイルをタップすると、画像のスライドが切り替わります。画像のスライドをスワイプすると、ハイライト表示されたサムネイルが変更されます。

ギャラリーにテキストを追加する

現在のスライドの状態を定義して変更するという負荷のかかる作業はすでに完了しています。これで、現在のスライド番号に基づいて他の情報を更新するための追加のバインディングを簡単に提供できるようになりました。

「画像 x/y」をギャラリーにテキストを追加しましょう。

スライドのカルーセル要素の上に次のコードを追加します。

<div class="px3">Image <span [text]="1*selectedSlide + 1">1</span> of 8</div>

今回は、HTML 属性にバインドするのではなく、[text]= を使用して要素の内部テキストにバインドします。

試してみましょう。

概要

amp-bind について学びました。
amp-bind を使用して、改善された画像ギャラリーを実装しました。

このセクションの完全なコードは、http://codepen.io/aghasSemi/pen/MpeMdL にあります。

このセクションでは、2 つの新機能を使ってページにアニメーションを追加します。

タイトルにパララックス効果を追加する

amp-fx-collection は、プリセットの視覚効果のコレクション（パララックスなど）を提供します。この機能は、属性を持つどの要素でも簡単に有効にできます。

パララックス効果では、ユーザーがページをスクロールしたときに、属性に割り当てられている値に応じて要素の速度が速くなったり遅くなったりします。

パララックス効果を有効にするには、任意の HTML 要素または AMP 要素に amp-fx="parallax" data-parallax-factor="<a decimal factor>" 属性を追加します。

ファクタ値が 1 より大きい場合は、ユーザーがページを下にスクロールしたときに要素がスクロールされます。
係数値が 1 未満の場合、ユーザーがページを下にスクロールすると、要素のスクロール速度が低下します。

ページタイトルに 1.5 倍のパララックスを追加して、どのように表示されるか確認しましょう。

amp-fx-collection のスクリプトタグを head に追加します。

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

次に、コード内の既存のヘッダータイトル要素を見つけて、amp-fx="parallax" and data-parallax-factor="1.5" 属性を追加します。

<header amp-fx="parallax" data-parallax-factor="1.5" class="p3">
  <h1 class="ampstart-fullpage-hero-heading mb3">
    <span class="ampstart-fullpage-hero-heading-text">
      Most Beautiful Hikes in the Pacific Northwest
    </span>
  </h1>
  <span class="ampstart-image-credit h4">
    By <a href="#" role="author" class="text-decoration-none">D.F. Roy</a>,<br> January 14, 2017
  </span>
</header>

結果を見てみましょう。

タイトルがページの他の部分よりも速くスクロールされるようになりました。すばらしいですね！

アニメーションをページに追加する

amp-animation は、Web Animations API を AMP ページに組み込む機能です。

このセクションでは、amp-animation を使用して、カバー画像をわずかにズームインします。

amp-animation のスクリプトタグを head に追加します。

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

次に、アニメーションと、適用先のターゲット要素を定義する必要があります。

アニメーションは、最上位の amp-animation タグ内で JSON として定義されます。

次のコードを、ページの body 開始タグのすぐ下に挿入します。

<amp-animation trigger="visibility" layout="nodisplay">
    <script type="application/json">
      {
        "target": "heroimage",
        "duration": 30000,
        "delay": 0, 
        "fill": "forwards",
        "easing": "ease-out",
        "keyframes": {"transform":  "scale(1.3)"}
      }
      </script>
</amp-animation>

このコードは、遅延なしで 30 秒間実行されるアニメーションを定義し、画像を 30% 大きくしています。

アニメーションの終了後も画像をズームインしたままにできるように、早送り fill を定義します。target は、アニメーションを適用する要素の HTML id です。

amp-animation が操作できるように、ページのヒーロー画像要素に id を追加しましょう。

既存のヒーロー画像（layout="fixed-height" の高解像度画像）をコード内で見つけ、id="heroimage" を amp-img タグに追加します。
シンプルにするために、media="(min-width: 416px)" と他の低解像度 amp-img も削除して、amp-animation で複数のアニメーションとメディアクエリに対処する必要がないようにします。

<figure class="ampstart-image-fullpage-hero m0 relative mb4">

    <amp-img id="heroimage" height="1800" layout="fixed-height" src="https://unsplash.it/1200/1800?image=1003"></amp-img>

    <figcaption class="absolute top-0 right-0 bottom-0 left-0">

...

お気づきかもしれませんが、画像をスケーリングすると親からオーバーフローするため、オーバーフローを非表示にして修正する必要があります。

既存の <style amp-custom> の末尾に次の CSS ルールを追加します。

.ampstart-image-fullpage-hero {
  overflow: hidden;
}

実際に使ってみる:

繊細！

この点については、とにかく CSS を使ってやってみることはできました。amp-animation のポイント

この場合は正しいですが、amp-animation を使用すると CSS だけでは実現できない追加機能が有効になります。たとえば、アニメーションは表示に基づいてトリガーできます（表示に基づいて一時停止もできます）。AMP アクションによってトリガーすることもできます。amp-animation は Web Animations API にも基づいており、この API 自体は、特にコンポーザビリティを中心に、CSS アニメーションよりも多くの機能を備えています。

概要

amp-fx-collection でパララックス効果を作成する方法を学習しました。
amp-animation について学びました。

このセクションの完全なコードは、http://codepen.io/aghasSemi/pen/OpXKzo にあります。

美しくインタラクティブな AMP ページの作成を終えたところです。

今日の成果を振り返ってみましょう。

完成したページへのリンクは、http://s.codepen.io/aghasSemi/debug/OpXKzo です。

そして、最終的なコードは http://codepen.io/aghasSemi/pen/OpXKzo になります。

無題の GIF

この Codelab の CodePen エントリのコレクションは、https://codepen.io/collection/XzKmNB/ にあります。

お出かけ前に...

ページが他のフォームファクタ（横向きのタブレットなど）でどのように表示されるかを忘れてしまいました。

以下を見てみましょう。

無題の GIF

正しく適合できたので、

素敵な一日を。

次のステップ

この Codelab では、AMP でできることのほんの一部について説明します。優れた AMP ページの作成に役立つリソースと Codelab は多数あります。

ご質問がある場合や問題が発生した場合は、AMP Slack チャンネルをご覧になるか、GitHub でディスカッション、バグレポート、機能リクエストをお送りください。

インタラクティブで美しい正規の AMP ページ

作成するアプリの概要

必要なもの

コンテンツ配信用ツール

amp.dev からテンプレートをダウンロードする

テンプレート コードの実行

テンプレート コードをカットする

レスポンシブ ナビゲーションを追加する

ヒーロー画像とタイトルを追加する

概要

見出しと段落を追加する

画像を追加する

自動再生動画を追加する

埋め込みを追加する

概要

写真カルーセルを追加する

サムネイル カルーセルを追加する

ユーザーがサムネイルをタップしたときに画像を変更する

ユーザーがタップしたときにサムネイルをハイライト表示します。

概要

amp-bind とは何か

amp-bind を使用して画像ギャラリーを再実装する

ギャラリーにテキストを追加する

概要

タイトルにパララックス効果を追加する

アニメーションをページに追加する

概要

お出かけ前に...

次のステップ

テンプレートコードの実行

テンプレートコードをカットする

レスポンシブナビゲーションを追加する

サムネイルカルーセルを追加する

`amp-bind` とは何か

`amp-bind` を使用して画像ギャラリーを再実装する