読者です 読者をやめる 読者になる 読者になる

すなばいじり

はてなブログを使って、トンピーを揃えるまで止めないブログ。ふっくらかわいい。


こちらは、水先案内です。
最新仕様のパンくずリスト を どうぞご利用ください。
あわせて読みたい 機能 をどうぞご利用ください。
Proxy Hacking Protection を どうぞご利用ください。


Hatena::diary ネタまとめ
Hatena::blog SLview+ 開発日誌
Develop::site Cosmonaut
人気記事表示するやつと、それをTwitterへアナウンスするやつ

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

sandbox JavaScript はてな

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
        }
      ]
    }
  ]
}

※値を一部省略してあります。上手い事やってください。

 

今回利用するデータには表示制御用に「showContent」という値を追加しました。
例えば、2番目のデータのように false とすることで、リストに表示させないようにする事ができます。

 

表示させてみる

テスト環境では通信速度のエミュレートが可能なので、ここでは50kbps(スマホの速度制限よりも遅いやつ)で試してみましょう。

遅延読み込みが効いている

まずはHTMLが読み込まれ、内包されているスタイルが適用されます。
遅延読み込みされたJavascriptによって画像表示予定地が「読み込み中」を表すようになりました。便利ですね。

 

暫く待つと画像の読み込みも終わり、必要なものが表示されました。

読み込み完了

データの指定通り「No.2」はスキップされ、No.1とNo.3が表示されました。

 

指定通りになった

良かったですね。

 

amp-listには項目があるのですが、動作するサンプルが今のところ無かったような感じでしたので、メモ的に置いておきます。

github.com

 

enjoy :)