Column -コラム記事-

プログラマー

AMPでCarouselを、Bindと連動させて動的に生成する方法

PWA/AMP Hackathonで作った制作物を共有したいと思います。
githubに公開しておりますので、実際に動かして試してみてください
https://github.com/zonomaa/amp-dynamic-carousel

やりたいこと

selectで選択したものを動的にデータを取得して、carouselで描画させたい

使用するampコンポーネント

・amp-list
・amp-bind
・amp-mustache
・amp-carousel

ハマったところ

amp-listとamp-carouselの関係性にちょっとつまずいた
amp-listの中にamp-carouselがあり、templateでamp-carouselごと要素を生成するという少々気持ち悪い実装となっている

<amp-list>

 <template type=”amp-mustache”>

  <amp-carousel>
   {{#values}}
    <div class=”box_inner”>
      # 省略
    </div>
   {{/values}}
  </amp-carousel>

 </template>

</amp-list>

{
“items”: [{
 ”values”: [
  {
   ”title”: “全国のデータ A”,
   ”comment”: “テストデータAテストデータAテストデータAテストデータA”,
   ”img”: “http://via.placeholder.com/210×150″,
   ”url”: “#”
  }…
 ]
}]
}

ロジック

amp-listでデータを取得し、amp-carouselごと回して要素を生成
jsonに`values`という階層を一つ作ってあげることで、amp-carouselは一つだけ生成され`values`の中の要素を生成

理想

<amp-carousel>

 <amp-list>

  <template type=”amp-mustache”>
   <div class=”box_inner”>
     # 省略
   </div>
  </template>

 </amp-list>

</amp-carousel>

amp-carouselの中にamp-listで要素を生成するという方法が理想なのかなと思いました。
上記の方法で実装するとampバリデーションは通るが、期待通りには描画されなかったです。
もしかしたら私の実装の仕方に誤りがあるかもしれませんので、その際はご指摘ください。

まとめ

少しトリッキーな方法ではありますが、これで動的なデータが描画できるカルーセルを作ることができます。
リアルタイムなデータが必要な場合はご参考ください。

前ページに戻る