リアルタイムなAMPページを作成する
AMPは表示速度の高速化がメリットで、ユーザーが検索してから表示されるまでの時間を短縮できるのが特徴ですが、AMPには表示後の情報をより速くユーザーに取得させるための方法があります。それは、AMPページのコンテンツをリアルタイムで更新させる方法です。
リアルタイム更新の使用例としては、更新頻度が高い記事やニュース記事のような鮮度が重要となるコンテンツの一覧、スポーツ中継やイベントの様子を発信する特設サイトなどがあげられます。
非AMP HTMLにおいてWebページをリアルタイムで更新させるにはJavaScriptを用いる必要がありますが、AMP HTMLにはamp-live-listというコンテンツの更新を自動で検知するコンポーネントが用意されているため、JavaScriptを一切記述することなくコンテンツを更新することが可能です。
amp-live-list
amp-live-listは一定時間ごとに閲覧ファイルをポーリングされ、かつコンポーネントのアイテムが更新されていればブラウザ上に更新ボタンを表示させることができます。そのボタンをタップするとページをリロードすることなくスムーズに更新することができます。
今回は例として、自動で更新を検知する記事一覧ページのサンプルを実装してみます。次の内容がベースとなるサンプルで、記事を追加する想定とします。
<!DOCTYPE html>
<html amp>
<head>
<meta charset="utf-8">
<title>amp-live-list sample</title>
<link rel="canonical" href="./">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-custom>
.btn-update,.list-live{font-size:14px}.site-main{margin:0 auto;max-width:640px;padding:20px}.btn-update{text-align:center;color:#fff;background:#0582de;display:block;margin:0 0 16px;padding:10px;border:0;border-radius:6px}amp-live-list>.amp-active[update]{width:calc(100% - 40px);position:fixed;top:20px;right:0;left:0;margin:auto}.list-live-item{margin:0 0 16px;-webkit-box-shadow:0 0 5px rgba(0,0,0,.4);box-shadow:0 0 5px rgba(0,0,0,.4)}.list-live-item a>:first-child{margin-top:0}.list-live-item a>:last-child{margin-bottom:0}.list-live-item .item-img,.list-live-item p{margin:0 0 10px}.list-live-item a{display:block;color:#000;padding:10px;text-decoration:none}.list-live-item .item-hdg{font-size:18px;margin:0 0 10px}
</style>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-live-list" src="https://cdn.ampproject.org/v0/amp-live-list-0.1.js"></script>
</head>
<body>
<main class="site-main">
<amp-live-list class="list-live" layout="container" data-poll-interval="15000" data-max-items-per-page="5" id="amp-live-list">
<button update on="tap:amp-live-list.update" class="btn-update">Update</button>
<div class="list-live-items" items>
<div id="list-live-03" class="list-live-item" data-sort-time="20170628104019">
<a href="dummy">
<amp-img src="dummy.png" layout="responsive" class="item-img" width="620" height="400"></amp-img>
<h2 class="item-hdg">タイトル3</h2>
<p>テキストテキストテキストテキストテキストテキスト</p>
</a>
<!-- /.list-live-item --></div>
<div id="list-live-02" class="list-live-item" data-sort-time="20170628104019">
<a href="dummy">
<amp-img src="dummy.png" layout="responsive" class="item-img" width="620" height="400"></amp-img>
<h2 class="item-hdg">タイトル2</h2>
<p>テキストテキストテキストテキストテキストテキスト</p>
</a>
<!-- /.list-live-item --></div>
<div id="list-live-01" class="list-live-item" data-sort-time="20170628104019">
<a href="dummy">
<amp-img src="dummy.png" layout="responsive" class="item-img" width="620" height="400"></amp-img>
<h2 class="item-hdg">タイトル1</h2>
<p>テキストテキストテキストテキストテキストテキスト</p>
</a>
<!-- /.list-live-item --></div>
<!-- /.list-live-items --></div>
<!-- /.site-main --></main>
</body>
</html>items属性を持つ要素の子要素がamp-live-listのアイテムとして認識され、ポーリング時にコンテンツが新たに追加されていれば更新ボタンを表示する仕組みになっています。サンプルソースでは、.list-live-itemsが対象のコンテンツになります。
実装上での注意は、amp-live-list要素のdata-poll-interval属性には閲覧ファイルをポーリングする時間の間隔をミリ秒で記述します。amp-live-listの仕様上パフォーマンスの低下を軽減するため、15000（15秒）以上の数値である必要があります。また、コンテンツに付与されているdata-sort-time属性は更新日時を記述する属性で更新の際には日時の新しい順にソートされます。そのため、誤った値を記述すると更新してもページに表示されない可能性があるため注意が必要です。実際に使用する場合は、CMSなどで自動挿入するのが一般的です。
次に、ユーザーがページ閲覧中に更新された時の挙動を再現しみましょう。サンプルソースのページをブラウザで表示し、items属性の直下に次のコンテンツのソースを追加します。
<div id="list-live-04" class="list-live-item" data-sort-time="20170428055920">
<a href="dummy">
<amp-img src="./img/index-img.jpg" layout="responsive" class="item-img" width="1280" height="853"></amp-img>
<h2 class="item-hdg">タイトル4</h2>
<p>テキストテキストテキストテキストテキストテキスト</p>
</a>
<!-- /.list-live-item --></div>追記後にamp-live-listが更新を検知すると更新ボタンを表示されるのでタップします。ボタンをタップするとコンテンツを更新し、スムーズに新たなアイテムの位置までスクロールしてくれます。
amp-live-listにおけるマークアップの制約は、アイテムごとにidを付与しなければならないことと、更新日時を記述しなければならないところを除けば特に大きな影響を及ぼす物はないと個人的に感じました。
amp-live-listを使用したAMPページの実例はまだ多くありませんが、アイデア次第で新たな活用方法が見いだせるのではないでしょうか。そして制作目線でも、リアルタイムなページをJavaScriptの記述なしで実装できるのは大きな魅力です。