【AMP】amp-listのコンテンツが表示されない時、うまくいかなかった時の原因と対処法

2020年10月29日

便利なamp-listのトラブル

AMPのキャッチ画像

amp-listはAMPページに組み込めるコンポーネントの１つで、読み込んだJSONファイルの内容を一定のルールに従って繰り返してくれます。
通常のWebページを作るよりも制限が強いAMPページで関連記事を連続で表示させたい時にamp-listを使用すると便利です。

しかし、amp-listを使っても、思ったようにコードの内容が表示されないことがあります。
今回はamp-listの内容が正常に表示されない時の原因と対処法を解説していきます。

スクリプトを読み込んでいない

amp-listが正常に動かない時にまずチェックしないといけないのは、必要なスクリプトを読み込んでいるかどうかです。

<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.2.js"></script>
<script async="" custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>

これらのスクリプトは下記のAMPの開発者向けサイトでセットアップに必要とされているものです。

amp-listはAMPの中でも拡張機能のような位置付けにあるので、AMPページが正常に表示されていても、これらのスクリプトを読み込ませていなければamp-listで作成したリストが表示されません。

適切な構成になっていない

amp-listを使ってもリストが生成されない時、適切なコードの構成になっていないことが原因になっているかもしれません。
先ほどの開発者向けWebサイト（amp.dev）に掲載されている、一番基本的なamp-listのコードを引用してみましょう。

<amp-list layout="fixed-height"
  height="100"
  src="/static/samples/json/examples.json"
  binding="no">
  <template type="amp-mustache">
    <div><a href="{{url}}">{{title}}</a></div>
  </template>
</amp-list>

このように、amp-listでは、src属性を使ってjsonファイルを読み込み、templateタグをマークアップしています。
さらに、amp-listで囲われたtemplateタグには、口ひげテンプレートを使えるようにするために、type="amp-mustache"が設定されています。
このようなコードの構成になっていないと、amp-listのタグで読み込んだJSONファイルを出力できないため、正しい構成になっているかにも注意する必要があります。

口ひげテンプレートについては、以下の記事もご参照ください。

srcのパスが誤っている

Webサイトを構築する時にありがちなのが、src属性に記述したファイルのパスが誤っていることです。
amp-listを使う際には、src属性を使ってJSONファイルを呼び出しますが、src属性に記述したパスが誤っていると正常にリストが作成されません。

amp-listに限らないミスですが、ありがちなミスではあるので、今一度確認してみてください。

JSONに改行コードが入っている等のミスがある

amp-listで読み込んでいるJSONファイルに誤りがあると、それに伴ってamp-listで生成したいコンテンツも出力されません。カンマの有無や配列の表記方法など、JSONファイルに記述のミスがないか確認してみるとよいでしょう。

見落としがちなのが改行コードの存在です。例えば、何か文章をJSONファイルに格納した時に、改行を含めてしまい、それによってJSONがエラーを引き起こしてしまうことはよくあります。
JSONファイルから改行コードを取り除く方法はさまざまあるので、適宜検索してみてください[1]例えば、「JSONで改行を処理する方法|Codeflow」など。。

混合コンテンツ扱いになっている

混合コンテンツ（ミックスドコンテンツ、Mixed contents）も、amp-listの内容が表示されない原因になります。
混合コンテンツとは、例えば表示させたいAMPページは暗号化されたhttpsのページなのに、読み込んでいるJSONファイルが暗号化されていないhttpのページに存在するというように、httpsのページで呼び出そうとしているhttpのコンテンツを指します。

2019年末からGoogleがこの混合コンテンツの取り締まりを強化し、表示をさせないようにしていますが、その影響でamp-listのコンテンツも表示されていないのかもしれません。
コードにもJSONにも誤りがないという場合は、この混合コンテンツのことも気にしてみてください。

注

トラブルHTML・CSSのトラブル,コーディングのトラブル

Posted by promapedia