ブックエンドを作成する

すべてのページを追加できたところで、次はストーリーの最後の画面、「ブックエンド」を作成していきましょう。最後の画面はストーリーの締めくくりとなるものです。この画面に、ソーシャル共有ボタンやストーリーの関連リンクを表示することで、読者にストーリーを共有してもらったり、読者をサイト上の別のコンテンツに誘導したりできます。

ブックエンド画面上の情報は、<amp-story-bookend> タグで指定された JSON ファイルから読み込まれます。このチュートリアルでは、ブックエンド データを含む JSON ファイル（bookend.json）を用意してありますので、こちらのファイルを使用します。

<amp-story-bookend> タグは、amp-story 内の最後のタグにする必要があります。終了タグ </amp-story> の直前に、<amp-story-bookend></amp-story-bookend> を追加しましょう。amp-story-bookend タグ内では、次のように src 属性で bookend.json ファイルを指定し、layout="nodisplay" を設定します。

  </amp-story-page>
  <amp-story-bookend src="bookend.json" layout="nodisplay"></amp-story-bookend>
</amp-story>

ブラウザを更新し、最後の画面に移動すると、次のブックエンドが表示されるはずです。

では、この JSON ファイルの中身を見てみましょう。bookend.json ファイルをお使いのテキスト エディタで開いてみてください。

すべてのブックエンド画面には、bookendVersion が必要です。このチュートリアルでは、次のように v1.0 を設定します。

"bookendVersion": "v1.0",

ソーシャル共有ボタンを設置すると、Twitter や Facebook、Pinterest などのソーシャル プラットフォームでコンテンツを共有してもらうことができます。shareProviders オブジェクトでソーシャル共有プロバイダを指定し、各ソーシャル プラットフォームのタイプ名を含む配列を作成します。

このチュートリアルでは、共有プロバイダとして Facebook、Twitter、メールを指定します。

"shareProviders": [
  "facebook",
  "twitter",
  "email"
],

ブックエンド画面の残りの部分には、関連コンテンツを表示します。すべての関連コンテンツを components オブジェクトに記述します。

関連コンテンツや関連リンクの表示にはさまざまなコンポーネントを使用でき、各コンポーネントには type 属性を指定します。使用可能なコンポーネントは次のとおりです。

{
  "type": "heading",
  "text": "More to read"
},

{
  "type": "small",
  "title": "Learn about cats",
  "url": "https://wikipedia.org/wiki/Cat",
  "image": "assets/bookend_cats.jpg"
},

{
  "type": "landscape",
  "title": "Learn about border collies",
  "url": "https://wikipedia.org/wiki/Border_Collie",
  "image": "assets/bookend_dogs.jpg",
  "category": "Dogs"
},

{
  "type": "portrait",
  "title": "Learn about macaws",
  "url": "https://wikipedia.org/wiki/Macaw",
  "image": "assets/bookend_birds.jpg",
  "category": "birds"
},

{
  "type": "cta-link",
  "links": [
    {
      "text": "Learn more",
      "url": "https://amp.dev/about/stories.html"
    }
  ]
}

ブックエンド コンポーネントについてさらに詳しく学ぶ場合は、amp-story のリファレンス ドキュメントをご覧ください。

ストーリーは完成間近です。コンテンツを公開する前に、AMP HTML が有効かどうかを確認してみましょう。

• Written by @bpaduch