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

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-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の使い所と実装方法でした。