Help us understand the problem. What is going on with this article?

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

この記事について

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ページを作る
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした