AMP

ブックエンドを作成する

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

ブックエンド画面上の情報は、<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 一連の記事の見出しを指定できます。
{
  "type": "heading",
  "text": "More to read"
},

small 関連記事へのリンクを設定できます。必要に応じて、小さい画像を指定することもできます。
{
  "type": "small",
  "title": "Learn about cats",
  "url": "https://wikipedia.org/wiki/Cat",
  "image": "assets/bookend_cats.jpg"
},

landscape 記事やその他のコンテンツ(動画など)へのリンクを設定できます。このタイプに関連付けられた画像は、横向きで大きく表示されます。
{
  "type": "landscape",
  "title": "Learn about border collies",
  "url": "https://wikipedia.org/wiki/Border_Collie",
  "image": "assets/bookend_dogs.jpg",
  "category": "Dogs"
},

portrait ストーリーやその他のコンテンツへのリンクを設定できます。このタイプに関連付けられた画像は、縦向きで大きく表示されます。
{
  "type": "portrait",
  "title": "Learn about macaws",
  "url": "https://wikipedia.org/wiki/Macaw",
  "image": "assets/bookend_birds.jpg",
  "category": "birds"
},

cta-link 詳細、登録などのボタンとして表示されるカスタム外部リンクを設定できます。
{
  "type": "cta-link",
  "links": [
    {
      "text": "Learn more",
      "url": "https://amp.dev/about/stories.html"
    }
  ]
}

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

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