AMP(Google)のリスト表示(amp-list)を使う

TL;DR

最新のドキュメント読んだ方が正確です。

AMP(Accelerated Mobile Pages Project)のTipsなエントリー。
テンプレート機能と合わせて、動的に表示される簡単なリストを表示してみましょう　:)

必要なもの

TLS(動的にデータを読み込む場合はURLがhttps://…となるように指示されている)
適当なデータ
テンプレート的なやつ (amp-mustache-0.1.js)
リスト表示するやつ (amp-list-0.1.js)

今回は、すなばいじりのはてなブックマーク数を表示したりするやつを作ってみましょう。

試してみよう

ササっとやります。HTML側

<html amp>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
	<style amp-boilerplate>
(中略)
	</style>
	<noscript>
(中略)
	</noscript>
	<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
	<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
	<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
	<p>enjoy AMP World! :)</p>
	<amp-list layout="fixed-height" height="600" src="https://example.jp/list-sample.json" class="list1">
		<template type="amp-mustache">
			<div class="list-inner">
				<div class="list-title">{{displayTitle}}</div>
				{{#content}} <!-- // content:[…] -->
				{{#showContent}} <!-- // showContent:trueの場合表示する -->
				<div class="list-content-item">
					<div class="item-image">
						<amp-img src="{{thumbnail}}" layout="fixed" width=120 height=90></amp-img>
					</div>
					<a href="http://b.hatena.ne.jp/entry/{{url}}">{{title}}</a>
					<span>ブックマーク数 {{count}}</span>
					<p>{{description}}</p>
					<!-- {{eid}} -->
				</div>
				{{/showContent}}
				{{/content}}
			</div>
		</template>
	</amp-list>
</body>
</html>

jQuery等にもあった、よくあるテンプレートなやつです。
{{要素}}といった形で利用します。

JSONはこちら。

/list-sample.json

{
  "items": [
    {
      "displayTitle": "はてブのやつを表示する",
      "content": [
        {
          "count": 123456789,
          "title": "No.1 表示サンプル",
          "description": "サンプルの説明",
          "url": "http://psn.hatenablog.jp/",
          "thumbnail": "http://cdn.image.st- ... png",
          "eid": "0",
          "showContent": true
        },
        {
          "count": 3,
          "title": "No.2 はてなブログの貼り付けにVineが対応していた - すなばいじり",
          "description": "2016 - 02 - 17 はてなブログの貼り付けにVineが対応 ....",
          "url": "http://psn.hatenablog.jp/entry/2016/02/17/083001",
          "thumbnail": "http://cdn-ak.b.st ... jpg",
          "eid": "279278303",
          "showContent": false
        },
        {
          "count": 8,
          "title": "No.3 はてなブログ「あわせて読みたい」機能を追加するAlso readのCSSカスタマイズ - すなばいじり",
          "description": "2016 - 02 - 06 はてなブログ「あわせて読みたい」機能を追加するAlso ...",
          "url": "http://psn.hatenablog.jp/entry/2016/02/06/213001",
          "thumbnail": "http://cdn-ak.b.st- ... .jpg",
          "eid": "278341745",
          "showContent": true
        }
      ]
    }
  ]
}