ブックエンドを作成する
すべてのページを追加できたところで、次はストーリーの最後の画面、「ブックエンド」を作成していきましょう。最後の画面はストーリーの締めくくりとなるものです。この画面に、ソーシャル共有ボタンやストーリーの関連リンクを表示することで、読者にストーリーを共有してもらったり、読者をサイト上の別のコンテンツに誘導したりできます。
ブックエンド画面上の情報は、<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 が有効かどうかを確認してみましょう。
-
Written by @bpaduch