beta

amp-live-listの使い所と実装方法

AMPページの一覧更新ができる「amp-live-list」を使ってみたので、「amp-list」との違いや、amp-live-list使い所と実装方法を備忘録として残します。

公開日:2020年10月28日

amp-live-listとは?

amp-live-listは、テンプレート内のデータをクライアントがポーリングすることで、AMPページの一覧内容を最新にすることができるテンプレートです。

amp-live-list | amp.dev

amp-live-listでは最終キャッシュ時間から「data-poll-interval」で設定された間隔で、最新データがあるかをポーリング(問い合わせ)をします。これはページを表示しているクライアント(主にブラウザ)が行います。

最新のデータがある場合は、updateボタンを表示してAMPキャッシュの更新を可能にします。ユーザーアクションなしに、クライアントが自動で更新することはできません。

amp-listとの違い

amp-live-listと似たテンプレートにamp-listがあります。名前からすると、amp-live-listの方が「最新のリスト」というイメージがわきますが、実際にはamp-listは常に動的にサーバーからリストを取得するのに対して、amp-live-listはAMPキャッシュ経由だとキャッシュを表示するので、「AMPキャッシュも含めて最新」なのはamp-listの方です。

amp-list | amp.dev

ただし、amp-listは、Javascriptを使って動的にリストを生成するためSEO的には若干不利な可能性があります。また、AMPページではJavascriptの操作が制限されているので、amp-listではユーザーによるリストの更新ができません。

- amp-live-list amp-list
データの元 オリジン or AMPキャッシュ srcで設定された外部ソース
データのSEOでの読み取り される クローラーによってされない
ユーザーによる更新 x

amp-live-listの使い所

amp-live-listは、

  • ポーリングしてくれる
  • ユーザーがリストのアップデートをできる

という2つが大きな特徴なので、「一定間隔で更新されるページ」に最適です。SNSのフィードに代表される「常に最新データが流れてくるもの」にも使えるでしょう。

amp-live-listを実装する

実装してみましょう。

amp-live-listはJavascriptを使わないので、HTML的に書くだけで簡単です。

ポイントは3点で、

  • リストブロックを「amp-live-list」タグで囲う
  • update属性をもつ「button」要素を必ず入れる
  • リストの親要素には「items」属性を入れる

の3つです。

リストブロックを「amp-live-list」タグで囲う

まずはリストブロックをamp-live-listタグで囲います。

<amp-live-list
  id="blog-post-list"
  data-poll-interval="60000"
  data-max-items-per-page="50"
>
.
. <!-- 中身 -->
.
</amp-live-list>

id属性とdata-max-items-per-page属性は必須です。data-poll-intervalは任意ですが、ページの更新頻度に合わせて設定しておくと、リストを最新に保てます。

アップデートボタンを入れる

次に、必須要素のアップデートボタンを入れます。HTMLのbutton要素にupdate属性と対象リストをしているon属性を足すだけでOKです。

<amp-live-list
  id="live-list-topics"
  data-poll-interval="60000"
  data-max-items-per-page="50"
>
.
<button update class="update__button" on="tap:blog-post-list.update">
.
</amp-live-list>

update属性は値は不要です。on属性には「イベント名:リストのid属性の値.update」を入れます。イベント名は、AMPで許可されたイベントを指定できます。

なお、このボタンはデフォルトがdisabledなので、ページロード時は表示されません。ページロード後にクライアント(ブラウザなど)がポーリングして更新データが存在したら、disabledが外れて表示されます。

リストの親要素に「items」属性を入れる

最後に、リストの親要素に「items」属性を入れて完成です。

<amp-live-list
  id="live-list-topics"
  data-poll-interval="60000"
  data-max-items-per-page="50"
>
<button update class="update__button" on="tap:blog-post-list.update">
<ul class="posts" items>
  <li><a href="/posts/3">Post 3</a></li>
  <li><a href="/posts/2">Post 2</a></li>
  <li><a href="/posts/1">Post 1</a></li>
</ul>
</amp-live-list>

amp-live-listの使い所と実装方法でした。

:

Author

Koji Kadoma
Member of codit.work

新着ノート

新着コード