ストーリーを始める
ウェブストーリー全体は amp-story コンポーネントで表現されています。このコンポーネントはストーリー内のすべてのページのコンテナとしての役割を果たします。amp-story コンポーネントには、ジェスチャやナビゲーションの処理など、UI シェルを作成する役割もあります。
amp-story コンポーネントはカスタム AMP コンポーネントで、すべてのカスタムコンポーネントと同様に、そのコンポーネントに関連するスクリプトを AMP ドキュメントに追加する必要があります。
テキストエディタで pets.html ファイルを開き、<head> セクションに以下のスクリプトを追加します。
<head>
<script
async
custom-element="amp-story"
src="https://cdn.ampproject.org/v0/amp-story-1.0.js"
></script>
</head>
ドキュメントの <body> に <amp-story> 要素を追加し、以下のように必須の standalone 属性を指定します。
<body>
<amp-story standalone> </amp-story>
</body>
有効な AMP ストーリーを作成するには、<body> 要素に有効な子要素である amp-story コンポーネントが 1 つだけ必要です。ほかの要素はすべて amp-story に格納されます。
メタ情報の提供
ストーリーをウェブで検索可能にするには、以下のようなちょっとした情報を提供するメタデータが必要です。
- ストーリーのタイトル。
title属性で指定します（"ペットを飼う楽しみ" など）。 - サイト運営者の名前。
publisher属性で指定します（"AMP チュートリアル" など）。 - サイト運営者のロゴ。
publisher-logo-src属性で指定します。これは、1x1 のアスペクト比を持つ正方形のロゴ画像の URL です。 - ストーリーのポスター画像。
poster-portrait-src属性で指定します。これはポスターの URL で、画像は 3x4 のアスペクト比を持つポートレート形式である必要があります。
では、上記の属性を amp-story タグに追加しましょう。
<amp-story
standalone
title="Joy of Pets"
publisher="AMP tutorials"
publisher-logo-src="assets/AMP-Brand-White-Icon.svg"
poster-portrait-src="assets/cover.jpg"
></amp-story>
こういった必須属性のほかに適用できる属性があります。詳細は、amp-story リファレンスドキュメントの「属性」セクションを参照してください。
注意 – 上記のメタデータ属性は補足であり、構造化データ（JSON-LD など）に置き換わるものではありあｍせん。ウェブストーリーがすべてのプラットフォームで検索可能となるように、AMP ストーリーを含むすべての AMP ページに構造化データを追加してください。
この時点で、コンテンツのないストーリーのシェルが準備できましたので、ページを作成しましょう。
-