amp-list
jsonからデータ取得してそれを表示させる時に使います。
amp-list+amp-mustacheを組み合わせて使用します。
プラグインの読み込み
amp-listを使用する場合は別途プラグインの読み込みが必要です。
amp.jsの後にでも読み込ませましょう。
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
基本構文と動作
どんな書き方でどんな動きすんのかを。まず簡単なものを。
<amp-list width="auto" height="100" layout="fixed-height" src="https://ampproject-b5f4c.firebaseapp.com/examples/data/amp-list-urls.json"> <template type="amp-mustache"> <div class="url-entry"> <a href="{{url}}">{{title}}</a> </div> </template> </amp-list> //読み込まれるjson { "items": [ { "title": "AMP YouTube Channel", "url": "https://www.youtube.com/channel/UCXPBsjgKKG2HqsKBhWA4uQw" }, { "title": "AMPproject.org", "url": "https://www.ampproject.org/" }, { "title": "AMP By Example", "url": "https://ampbyexample.com/" }, { "title": "AMP Start", "url": "https://ampstart.com/" } ] }
見ての通り、親要素がamp-list、子要素にmustacheテンプレートを入れています。
読み込みたいjsonは、amp-listのsrcプロパティに入れ込みます。
動作としては、itemsの一つ下の階層分ループして出している感じです。
ちなみに、itemsを指定していなくてもこれで正解の理由としては
第一階層のデフォルトがitemsだからです。
仮に違う場合は第一階層から順番に取得していく必要があります。
で、肝心のjsonですが、指定方法はSSLでの接続が必要となりますので、httpsからのURL形式で記述しましょう。
すいませんこのサーバ暗号化のしてないんでデモ作れないんですよ・・・(´;ω;`)ウッ…
なのでちょっと試せていませんが、クロスドメインの時どうなんでしょうね・・・通常のjsonは読めなかったハズなのでjsonpって技術があるくらいですし
デフォルトを使用しないjson
{ "square": { "src": "../../images/fpo-square.png", "alt": "Square" }, "avatar": { "src": "../../images/fpo-avatar.png", "alt": "Avatar" } }
例えばこんなJSONがあった場合の指定方法としては
{{square.src}}やら{{avatar.src}}になることになります。
複雑な処理は正直向いていない感じです。
正直ゴリゴリやりたければ普通に組んだ方がいいんじゃないか?って気がしますね。