・実現したいこと:amp対応のサイトに「もっと読む」(read more)ボタンを設置したい
amp対応のサイトを作ろうとしています。
jsonのファイルが長く、「もっと読む」(read more)で対応しようと思っています。
AMPのリスト表示を実装する
https://qiita.com/psn/items/448f09f6da7fbb4077aa
上記のサイトを参考にしてみましたが、「もっと読む」ボタンが表示されません。
自分では気ずかない単純なことかもしれませんが、先に進めません。
ご指摘・アドバイスいただけないでしょうか。
よろしくお願いします。
amptest09.php
<html amp> <head> <meta charset="utf-8"> <link rel="canonical" href="http://qiita.com/psn/items/448f09f6da7fbb4077aa"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript> <!-- ここに追加のスタイルを置きます --> <!-- ここに追加の拡張スクリプトを置きます --> <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script> <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script> <script async src="https://cdn.ampproject.org/v0.js"></script> <style amp-custom> .list-overflow { position: absolute; bottom: 0; background: #9E9D9D; width: 100%; } </style> </head> <body> <h1>amp-listを表示するよ!</h1> <div> <a id="development=1"></a><a href="#development=1">バリデーションのフラグ( #development=1 )を付ける</a><br> 付けたらF12を押してからF5押しましょう。 </div> <!-- ここに新しい要素を置きます --> <amp-list width=300 height=100 src="./link-list.json"> <template type="amp-mustache"> <a href="{{url}}">{{title}}</a> <br> </template> <div overflow role=button aria-label="もっと読む" class="list-overflow"> もっと読む </div> </amp-list> </body> </html>
link-list.json
{ "items": [ { "title": "1番目のリンク", "url": "https://example.com/items/01#1" }, { "title": "2番目のリンク", "url": "https://example.com/items/01#2" }, { "title": "3番目のリンク", "url": "https://example.com/items/01#3" }, { "title": "4番目のリンク", "url": "https://example.com/items/01#4" }, { "title": "5番目のリンク", "url": "https://example.com/items/01#5" }, { "title": "6番目のリンク", "url": "https://example.com/items/01#6" }, { "title": "7番目のリンク", "url": "https://example.com/items/01#7" }, { "title": "8番目のリンク", "url": "https://example.com/items/01#8" }, { "title": "9番目のリンク", "url": "https://example.com/items/01#9" } ] }
あなたの回答
tips
プレビュー