amp-html
amp-story でブックエンドが表示されない時の対応方法

はじめに

デモでつくったamp-storyが検索に載るようになったので、携帯端末で見てみたところ、ブックエンドが表示されないことに気付いた。表示されないのはamp-cacheのページで、標準の場合は表示されている。

で、対処を行ったのでその内容を書き記す

CORS対応を行う

ローカル環境でもJSONファイルを絶対パス(本番)にして確認したところ、読み込まれなかった。WEBインスペクタで確認したところ、JSONファイルの読み込みが許可されてない旨のエラーが出ていた。ので、外部からの読み込みを許可しないといけない。前もフォームつくる時に対応したな・・・と。その時に参考にしたブログ記事

処理の仕方は色々とあるけれども、.htaccessファイルに以下を追加するのが簡単


Header set Access-Control-Allow-Credentials: true
Header set Access-Control-Allow-Origin:  https://example-com.cdn.ampproject.org
Header set Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin
Header set AMP-Access-Control-Allow-Source-Origin: AMP-Access-Control-Allow-Source-Origin: https://example.com 

https://example-com は自分のサイトドメインを入れるが、Access-Control-Allow-Originは、amp-cacheにaccessしてURLを抜き出した方がいい。若干変わっていることがある。

jsonファイルの画像指定は絶対パスで

もう一度アクセスしてみたら、ブックエンドが表示されるようになって一安心、と思いきや、画像が表示されていない。

JOSNのぞいたら相対パスになっていたので、絶対パスに変更して再確認

無事表示。

最後に

AMP-HTMLは、バリデータに通して終わるではなく、amp-cacheまできちんと確認しないとダメですね。わかっていても忘れる