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

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

作成するアプリの概要

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

  • レスポンシブ ナビゲーション
  • フルページのヒーロー画像
  • レスポンシブ画像
  • 自動再生ありの動画
  • Instagram などの埋め込み
  • アクションとセレクタ
  • amp-bind によるデータ バインディング
  • amp-fx-collectionamp-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.<!-- End Navbar --> comment の直後に貼り付けます。

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

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

srcwidthheight を別の画像に変更し、既存の <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 名以外はありません。px3mb2ampstart-dropcap とは何ですか?ユーザーがどこからアクセスしているか?

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

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

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

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

画像を追加する

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

amp-imgmain に追加します。

<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" を指定し、widthheight. を指定して応答性の高い画像を作成しています。

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

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

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

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

自動再生動画を追加する

AMP は、YouTube や Vimeo などの多くの動画プレーヤーに対応しています。AMP では、amp-video拡張コンポーネントの下に独自のバージョンの HTML5 video 要素があります。amp-videoamp-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 には、TwitterInstagram など、多くのサードパーティの埋め込み用に拡張コンポーネントが用意されています。AMP コンポーネントがない埋め込みには、常に amp-iframe を使用します。

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

amp-imgamp-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-carouselslides タイプの 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" を使用します。これは、スライド カルーセルのサイズは常に子要素で埋められるため、幅と高さを必要とする別のレイアウトを指定する必要がないためです。

実際に使ってみる:

1.gif

次に、これらの画像のサムネイル用の水平スクロール可能コンテナを追加しましょう。再度 <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 を設定する必要があります。

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

2.gif

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

これは可能ですか?タップ イベント ハンドラから呼び出す要素の 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>
  1. amp-selector でサムネイル カルーセルをラップする
  2. option=<value> 属性を追加して、すべてのサムネイルをオプションにします。
  3. 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>

詳しく見てみましょう。

3.gif

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

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

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

概要

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

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

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

amp-bind とは何か

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

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

  1. 都道府県
  2. バインディング
  3. 変化

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

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

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

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

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

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

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

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

1. 現状は?

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

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

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

  • 画像全体のカルーセルに表示される slide:
<amp-carousel [slide]="selectedSlide" ...
  • amp-selectorselected アイテムも変更する必要があります。これにより、前のセクションで直面したバグが修正されます。
<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>

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

4.gif

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

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

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

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

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

試してみましょう。

5.gif

概要

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

結果を見てみましょう。

6.gif

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

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

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 を追加しましょう。

  1. 既存のヒーロー画像(layout="fixed-height" の高解像度画像)をコード内で見つけ、id="heroimage"amp-img タグに追加します。
  2. シンプルにするために、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;
}

実際に使ってみる:

7.gif

繊細!

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

この場合は正しいですが、amp-animation を使用すると CSS だけでは実現できない追加機能が有効になります。たとえば、アニメーションは表示に基づいてトリガーできます(表示に基づいて一時停止もできます)。AMP アクションによってトリガーすることもできます。amp-animationWeb 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 でディスカッション、バグレポート、機能リクエストをお送りください。