Web Development

Re: AMP stories が発表されたので早速簡単なストーリーを作ってみた件 （v1.0 対応版）

2018年に書いた 「AMP stories が発表されたので早速簡単なストーリーを作ってみた件」 という記事について、その後、AMP stories のバージョンアップ （v0.1 → v1.0） に伴い記述が古くなってしまっている点を補足する記事を書きました。

公開日
更新日

1年少し前になりますが、Accelerated Mobile Pages （AMP） に 「AMP stories」 と呼ばれる、タップ操作によって、まるでカードをめくるように閲覧可能なコンテンツを実装するための拡張コンポーネントが追加されたのをうけて、早速作ってみたよという記事を書きました。

先日から AMP Conf 2019 が東京で開催されていることもあってか、この記事に対して結構なアクセスが来ていて、それ自体はありがたいことなのですが、上記の記事を書いたのは 「AMP stories」 が発表された直後で、まだ 「v0.1」 の頃だったんですね。

その後、少し仕様に変更が加えられて、現状の 「AMP stories」 は 「v1.0」 になっています。実際にサンプルとして作った 「AMP stories」 のページ （上記リンク参照） 自体は 「v1.0」 で書き直しているんですが、解説記事の方は古いままでしたので、折角の機会ということで、「v1.0」 における修正点についての補足記事を書いてみたいと思います。

AMP stories v0.1 から v1.0 における変更点

以前書いた記事から変更しないといけない点だけ簡単にまとめます。詳しい説明は公式ドキュメントを見ていただくのが早いと思います。

AMP stories コンポーネント用の JavaScript の読み込み

まず、head 要素内で、AMP stories 用の JavaScript を読み込みますが、当然、バージョンアップによってこれが変更になっています。

<script async src="https://cdn.ampproject.org/v0/amp-story-1.0.js" custom-element="amp-story"></script>

AMP stories の基本的なマークアップ

AMP stories のマークアップに関する、ごく基本的なルールは下記のような感じになります。ここについては大きくは変わっていませんが、amp-story 要素に対する属性で、必須のものがいくつか追加されています。 
<!-- amp-story 要素で全体をマークアップする（Story） -->
<amp-story standalone
              title="サンプルストーリー"
              publisher="制作者の名前など"
              publisher-logo-src="https://example.com/logo/1x1.png"
              poster-portrait-src="https://example.com/poster/3x4.jpg"
              poster-square-src="https://example.com/poster/1x1.jpg"
              poster-landscape-src="https://example.com/poster/4x3.jpg">

  <!-- 各ページは amp-story-page 要素でマークアップ（Page） -->
  <amp-story-page id="cover">

    <!-- ページ内のコンテンツは amp-story-grid-layer に内包される（Layer） -->
    <amp-story-grid-layer template="fill">
      <!-- template="fill" 内の最初の要素はページ全体を覆うように表示される（背景みたいな感じ） -->
      <amp-img src="assets/cover.png" width="1080" height="1920" layout="responsive"></amp-img>
    </amp-story-grid-layer>

    <amp-story-grid-layer template="vertical">
    <!-- template="" に指定する属性値によってレイアウトが選択可能 -->
      <h1>Yoshiki Kato</h1>
      <p>Web Director / Web Developer, Tokyo Japan.</p>
    </amp-story-grid-layer>

  </amp-story-page>
  <!-- 1ページがここまで -->

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

</amp-story>

amp-story 要素の必須属性

amp-story 要素に対して、下記の属性は必須になりますので必ず付与する必要があります。

standalone 属性

ドキュメントが 「AMP stories」 だと認識されるために必要なので必ず付けてください。

title 属性

AMP stories のタイトルを付けてください。

publisher 属性

AMP stories の作成者の名前を値に指定します。

publisher-logo-src 属性

アスペクト比が 1:1、つまり正方形のロゴ画像を指定します。通常の Web ページでいう Favicon に相当する画像を指定すればよいでしょう。

poster-portrait-src 属性

アスペクト比が 3:4 となる、縦長の画像を指定します。ポスター画像は AMP stories 全体を代表するものでなければなりません。OGP 画像をイメージするとわかりやすいかと思います。

また、画像のファイル形式は .jpg、.png、.gif が推奨されています。.svg は非推奨なので注意しましょう。最低サイズは 696px × 928px です。

amp-story 要素の任意属性

下記の各属性はオプション扱いなので、指定してもよいし、しなくても問題ないです。

supports-landscape 属性

ランドスケープ（横表示）モードを有効にします。この属性は論理属性なので値は不要です。

background-audio 属性

AMP stories 全体を通して再生されるオーディオファイルを URL で指定します。

poster-square-src 属性

アスペクト比が 1:1 となる、正方形の画像を指定します。最低サイズは 928px × 928px です。

poster-landscape-src 属性

アスペクト比が 4:3 となる、横長の画像を指定します。最低サイズは 928px × 696px です。

amp-story-bookend 要素

amp-story 要素の最後の子要素として、amp-story-bookend 要素を使用することで、最終ページに関連リンクなどを自動的に表示させることができます。ここの仕様は JSON の仕様含めて v0.1 からかなり変わっているので新しい仕様に合わせて記述してください。

細かい仕様は下記のセクションで確認できます。また冒頭に紹介したサンプルページのソースコードを見ていただくと多少は参考になると思います。

ということでかなり雑な感じではありますが、以上です。

関連エントリー

記事をここまで御覧頂きありがとうございます。
この記事が気に入ったらサポートしてみませんか？

Ofuse でおやつをおごる

関連記事