【AMP】amp-listを使ってWP REST API経由で記事を動的に取得する方法
先日Renacaが管理・運営を担当しているCRAFT BEER TIMESというWebメディアの記事ページをAMPに対応させました。
今回は備忘録も兼ねてWP REST API経由で新着記事を動的に取得するのに使用したamp-listというAMPコンポーネントの使い方を書いていきたいと思います。
amp-listとは
AMPは基本的に自サイトに直接アクセスされるわけではなく、GoogleなどのCDNにキャッシュされたページを高速表示する仕組みのものです。
そのため自サイト側でPHPなどで新着記事一覧を動的に吐き出していたとしても、AMP HTMLがキャッシュされた段階の状態が残ってしまうため、キャッシュがクリアされない限りは更新されることのない古い記事一覧が表示されてしまうのです。これはあまり良くないですよね。
となればREST API経由でJavaScriptで動的に取得するか…というところですが、AMPには制限がありJSをあまり自由に使うことができません。
そんな時に使えるのがamp-listコンポーネントです。
公式ドキュメントによると、amp-listコンポーネントを使うことで、JSONから動的にコンテンツを取得しレンダリングすることができるとのことです。
つまりWordPressを使っているならばWP REST API経由で新しい記事を取得・表示することができるということですね。
参考記事：更新が頻繁なコンテンツのAMP対応ベストプラクティス | 海外SEO情報ブログ
実装方法
まずはhead内で2つのライブラリを読み込みます。
AMPのコンポーネント毎に必要なライブラリがあり、用途に合わせてそれぞれ読み込む必要があります。
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>こちらがamp-listを使うためのライブラリ。
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>そしてこちらはAMPでmustache.jsというJSテンプレートエンジンを使うためのライブラリです。
次に、一覧を表示させる箇所には下記のように書きます。
<?php
$post_id = get_the_ID();
$home_url = home_url();
?>
<amp-list
width="auto"
height="500"
layout="flex-item"
src="<?php echo $home_url; ?>/wp-json/wp/v2/posts?per_page=5&exclude=<?php echo $post_id; ?>"
items="."
binding="no">
<ul>
<template type="amp-mustache">
<li><a href="{{link}}">{{title.rendered}}</a></li>
</template>
</ul>
</amp-list>WP REST API経由で現在の記事を除く新着記事5件を取得しています。
items属性のところは配列名の値を指定する必要がありますが、WP REST APIで返ってくるJSONはそれ自体が目的の配列なため、値を「”.”」と記述しなくてはなりません。
またheightの値は500としていますが、高さは取得するコンテンツの数やサイズによって可変させたいところです。
amp-list {
min-height: 1px;
}
amp-list > div[role="list"]{
position: relative;
height: auto;
}こちらは下記の記事を参考に、上記の記述をCSSに加えることで可変表示に対応しました。
参考記事：amp-listで高さ（height）を可変にして表示する – AMP｜ST40PG
amp-listの可変問題はAMPの開発ロードマップに「Improved resizing rules for amp-list（amp-listのサイズ変更ルールの改善）」と書かれており、近いうちに改善が予定されているみたいです。
まとめ
AMPは単純な記事ページしか作れないと思い込んでいましたが、今回色々調べてみたことで、工夫次第で色々とリッチな表現ができそうだということを知りました。
自由に実装するのも楽しいですが、ルールが制限された中で可能な限りのカスタマイズに挑戦してみるというのも、なかなか面白そうだと思いました。
今後もAMPの動向に注目し、どんどん取り入れていきたいです。
あ、今回AMP対応したクラフトビールのWEBメディア「CRAFT BEER TIMES」も是非見てみてくださいね。
ではまた。
