AMPでAPIで取得した動的なリストを表示するのに必要なこと

必要なライブラリ

<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>

HTML

<amp-list
src="xxxxxxxxxx"
height="170"
layout="fixed-height"
binding="no">
<template type="amp-mustache">
  <amp-carousel height="170" layout="fixed-height" type="carousel">
    {{#values}}
      <div>
        <a
          href="{{url}}"
          <amp-img
            src="{{imageUrl}}"
            width="400"
            height="400"
            layout="responsive"
            alt="{{imageName}}">
          </amp-img>
        </a>
      </div>
    {{/values}}
  </amp-carousel>
</template>
</amp-list>

API

{
    "items":[
        {
            "values":[
                {
                    "url":"https://xxxxxx/xx/xx/",
                    "imageUrl":"https://xxxxxx/image1.jpg",
                    "imageName":"画像ファイル名1"
                },
                {
                    "url":"https://xxxxxx/xx/xx/",
                    "imageUrl":"https://xxxxxx/image2.jpg",
                    "imageName":"画像ファイル名2"
                },
                {
                    "url":"https://xxxxxx/xx/xx/",
                    "imageUrl":"https://xxxxxx/image3.jpg",
                    "imageName":"画像ファイル名3"
                }
            ]
        }
    ]
}

TIPS

GoogleにキャッシュされたAMPページからクロスドメイン対応したAPIが呼び出せるようにレスポンスヘッダーに以下を追加

• Access-Control-Allow-Origin: *
• Access-Control-Allow-Headers: "Origin, X-Requested-With, Content-Type, Accept"

AkamaiなどのCNDを利用している場合は、CDN側でCORSの設定が必要になる

参照
https://learn.akamai.com/en-us/webhelp/media-services-live/upgrade-msl-3x-or-4-streams-to-msl-4x/GUID-4C33655C-F489-4692-AE90-08A2F4005CF8.html