amp-list でこのサイトの最新記事 n 件をリスト表示する

  1. このサイトの記事の API エンドポイントを作る
  2. 別の AMP サイトで amp-list コンポーネントを使ってこのサイトに上がった記事のタイトルとリンクをリスト表示する

というのをやりました。

amp-list の XMLHttpRequest で取得するデータは Cross-Origin Resource Sharing 対応しなければならないので、しました ( バックエンドは Cloud Functions for Firebase ) 。これ (amphtml/amp-cors-requests.md at master · ampproject/amphtml) を参考にしました。

API 実装はここまでで、あとは公式ドキュメント ( amp-list – AMP ) を参考に別の AMP サイト側で amp-list の実装を適当にやったら適当に全リスト表示できたので、あとは微調整です。
もともと "recent posts" というくくりで、最新の記事 5 件だけが表示されればよしと考えていたのでリストの表示数の制御できないかなと前述のドキュメントくまなく見直してみたら、下の方に Validation という項目を発見しました。で、そこの amp-list rules というリンク先のソースコードに attrs: { name: "max-items" } という記述があったので、これかと思って勘で以下のように書いてみたら当たりでした。

<!-- 最新の 5 件のみ表示 -->
<amp-list max-items="5" width="auto" height="120" layout="fixed-height">

やったぜ。

∎