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バリデーションは通るが、期待通りには描画されなかったです。
もしかしたら私の実装の仕方に誤りがあるかもしれませんので、その際はご指摘ください。
まとめ
少しトリッキーな方法ではありますが、これで動的なデータが描画できるカルーセルを作ることができます。
リアルタイムなデータが必要な場合はご参考ください。