LoginSignup
1

More than 3 years have passed since last update.

AMP Stories(ストーリーズ)のページ構成

Last updated at Posted at 2019-12-17

この記事について

AMP Storiesを使ったWebページを作成する際の、ページ構成についてまとめた記事です。

AMP Storiesを使ってこのようなWebページを作成したので、こちらも是非御覧ください。

AMP Storiesとは

アニメーションやインタラクティブなアクションを用いて、Instagramのストーリーズのようなコンテンツを作成できる、GoogleとTwitter社が共同開発、提供しているモバイルページ向けのフレームワークです。

良い点

  • AMPページと同様に、AMP JSを用いたレンダリングやGoogle AMP Cacheなどの仕組みにより、従来のWebページの何倍もの速度でページが読み込まれる点。表示速度がとても速い!

  • HTMLやCSSの基本的な知識さえあれば、簡単にリッチなコンテンツが作成できる点。

セットアップ

AMP StoriesでWebページを作成するには、amp-storyコンポーネントを利用します。

そのためにまずは、<head>タグの中にスクリプトを追記します。

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

AMP Storiesの構成

AMP Storiesは、大きく分けて、Story, Pages, Layers, Elementsの4つの部品からページが構成されています。
layer.png
(引用: Understanding the parts of an AMP story)
右側の部品が左側の部品の要素に含まれているイメージ。

こんな感じでページを作っていきます。

<body>
  <amp-story>
    <amp-story-page>
      <amp-story-grid-layer>
        <h1>AMP Stories!</h1>
      </amp-story-grid-layer>
    </amp-story-page>
  </amp-story>
</body>

Story

Storyは、AMP Stories全体をまとめる要素です。

<body>タグの中に、<amp-story>タグを追加することで、WebページがAMP Storiesとして認識されるようになります。

<body>
  <amp-story standalone
    title="ページタイトル"
    publisher="提供元"
    publisher-logo-src="提供元のロゴ画像"
    poster-portrait-src="トップページで表示される画像">
  </amp-story>
</body>

ここでstandalone以下に記述している内容は、作成するAMP Storiesのメタ情報となります。

また、注意するべき点として<amp-story>タグは<body>の中に1つしか記述できません。

Pages

Pagesは、AMP Storiesの1ページを構成しています。

通常、作りたいStoriesは複数ページに渡ると思うので、先程記述した<amp-story>の中に、作成したいページ分<amp-story-page>タグを追加します。

この際、作成したページごとにユニークなidをつける必要があります。

-- 上略 --
<amp-story>
  <amp-story-page id="page1">
  </amp-story-page>
  <amp-story-page id="page2">
  </amp-story-page>
</amp-story>
-- 以下略 --

Pagesには、幾つかのテンプレートが用意されています。

中でも、auto-advance-afterというテンプレートを利用すると、インスタグラムのストーリーズのように、一定時間後に自動で次のページへ遷移する といった動きが実装できます。

<amp-story-page id="page1"
  auto-advance-after="5s" //5秒後に自動で次のページへ遷移
</amp-story-page>

Layers

Layersは、1ページを構成する要素です。

1ページごとに設定する、タイトルの文字や背景画像、ページコンテンツとなる文章などを、それぞれ<amp-story-grid-layer><amp-story-cta-layer>などで区切って、記述していきます。

<amp-story-grid-layer>CSS Gridに基づいたコンポーネントなので、基本的にはテンプレートを使用して、Layersの場所やつけるアニメーションを決めていきます。

使用できるテンプレートやアニメーションは、amp.devのドキュメントに載っているので、参考にしてみてください。

-- 上略 --
<amp-story-page id="page1">
  <amp-story-grid-layer template="thirds">
    <p grid-area="upper-third">あいうえお</p>
    <p grid-area="middle-third">かきくけこ</p>
    <p grid-area="lower-third">さしすせそ</p>
  </amp-story-grid-layer>
</amp-story-page>
-- 以下略 --

表示結果
スクリーンショット 2019-12-16 19.11.14.png
thirdsテンプレートを利用すると、上記の用に画面を三分割にして要素を配置できます。

Elements

ElementsはLayersの中に配置される要素です。

<p><h1><div><span>などのタグや、<amp-img><amp-video>といったAMPページで表示する画像やメディアをサポートしたコンポーネントなどが、Elementsに含まれます。

これらのElementsはLayer1つの中に複数個記述することが可能です。

注意すべき点としては、AMPページ向けのコンポーネントには、それぞれ必須要素が設定されていることです。例えば<amp-img>の場合、

  • src
  • width, height
  • layout

の3つの要素が必須となっています。

コンポーネントを使用する前は一度、公式ドキュメントに目を通しておくと、良いと思います。

まとめ

  • AMP Storiesを使うと、簡単にInstagramのストーリーズのようなWebページを作成できる
  • AMP Storiesは、Story, Pages, Layers, Elementsの4つの要素から構成されている
  • それぞれの要素に対し、AMPコンポーネントやAMP Storiesコンポーネント、テンプレートアニメーションが用意されているので、基本的にそれらを組み合わせてWebページを作る

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
1