更新が頻繁なページの AMP 対応のベストプラクティスを解説する。2つの方法が考えられる――「何もしない」と「amp-list」を使う方法だ。

- 更新が頻繁なコンテンツのAMP対応ベストプラクティス -

Posted on: 海外SEO情報ブログ - SuzukiKenichi.COM by Kenichi Suzuki

[レベル: 上級]

AMPプロジェクトは、<amp-live-list> がベータ版から抜けたことをアナウンスしました。
一般サイトでの利用が可能です。

<amp-live-list> は、ページを再読み込みすることなしに、更新されたコンテンツをAMPページで即座に表示する仕組みです。
7月の終わりにベータ版が公開されていました。

英国最大手パブリッシャーがライブブログでamp-live-listを採用

<amp-live-list>は、スポーツやイベントの実況中継、あるいは選挙速報のニュースのように、その瞬間に起きている最新の情報をリアルタイムで配信するページで用いられます。
ブログでのライブ中継なので、”live blog (ライブ ブログ)”と呼ばれることもあります。

完成版としての仕様が固まったわけではなくまだ試験運用の状態 (Experimental) ですが、英国最大手の新聞社であるThe Guardianはサイトのライブブログのセクションで <amp-live-list> をさっそく実装しています。

こちらのアニメーションは公式アナウンスが紹介している <amp-live-list> によってAMPページでコンテンツが更新する例です。

ややわかりずらいのですが、「New updates」という赤いボタンがページの上部に出現し、それをタップするとコンテンツが更新してページのトップに自動的に移動します。
すると最新のコンテンツ（記事）が追加されていて、それを読むことができます。

ページを再読み込みしていません。
単にページ内を移動しているような感覚です。

ユーザーがタップしなくても自動的に更新したり、いくつの更新があるのかを表示したりといったオプション機能も今後は検討するとのことです。

ライブブログ形式でコンテンツを配信している日本のサイトを僕はほとんど聞いたことがありません。

それでも、Yahoo!がリオオリンピックの特設サイトでリアルタイムに近い形で試合の状況をテキスト配信していました。
僕は、TVを見られないときはこちらを読んでいました。

4年後の東京オリンピックは、<amp-live-list>を使ったAMPページで試合観戦できるかもしれませんね。

- AMPページでリアルタイムにコンテンツを更新する「amp-live-list」がベータ版を抜け一般公開 -

Posted on: 海外SEO情報ブログ - SuzukiKenichi.COM by Kenichi Suzuki

[レベル: 上級]

AMPプロジェクトは、コンテンツのライブ更新を可能にする仕組みとして <amp-live-list> のベータ版を試験公開しました。
amp-live-listを実装すると、追加のナビゲーションやページのリロードなしでコンテンツを最新の状態に動的に更新できます。

AMPページをリロードなしで即座に更新

こちらはAMPプロジェクト公式ブログのアナウンスで紹介されている amp-live-list を実装したAMPページのデモです。

“YOU HAVE UPDATES”（更新があります）という青いメッセージが画面上部に出現したあと、上にスクロールして戻ると新しいコンテンツが追加されています。

読み込んだという感覚は皆無で、AMPページの高速表示はまったく損なわれていません。

amp-live-list は刻々と状況が変化するコンテンツ向き

刻々と状況が変化するコンテンツに amp-live-list は向いています。

たとえば、イベントの内容をリアルタイムで配信するライブブログです。
執筆者が新たに書き込んだ記事を次から次へとAMPページで読むことができます。

amp-live-list は、ページのコンテンツの一部分だけに利用することが可能です。
スポーツの試合のスコアや選挙の開票状況を掲載しているページでは、ページ全体を更新する必要はありません。
スコアや開票状況の部分だけリアルタイムで更新すれば十分です。
こうしたケースでは、限定した部分のみに amp-live-list を適用することができます。

AMPは、変化しない静的なコンテンツに向いている技術なのに、ライブ更新が可能になるというのは面白い機能ですね。

バックグラウンドで、コンテンツを配信しているサーバーとクライアント（ブラウザ）が直接”ポーリング”して、コンテンツに更新があるかどうかをチェックするのだそうです。
更新があれば、更新を動的にクライアントのページに差し込みます。

しかしAMPで高速化を実現しているキャッシュシステムをスルーするわけではありません。
データ量やスマホ側の帯域幅、CPUの負担を削減するためにAMPキャッシュの機能は依然として活躍しています。

amp-live-list によるライブ更新を必要とするサイトはそう多くはなさそうな気がしますが、興味があるなら試してみるといいでしょう。

実験段階なので利用するにはオプトインする必要があります。
JavaScriptコンソールで次のコードを実行するか、もしくは専用ページからオプトインします。

AMP.toggleExperiment('amp-live-list')

そのほか、amp-live-list の詳しい仕組みと実装方法に関しては、公式アナウンスとGitHubを参照してください。

- AMPページでライブ更新を可能にする amp-live-list が試験公開される -

Posted on: 海外SEO情報ブログ - SuzukiKenichi.COM by Kenichi Suzuki