HOME > コラム > SEMラボラトリー関連 > 簡単WEBサイトテンプレート(PHP)の修正とAMP HTMLの注意点

簡単WEBサイトテンプレート(PHP)の修正とAMP HTMLの注意点

コラム

先だって、AMP HTMLのサポート終了について記事を書きました。
当サイト内のAMP仕様を修正致しまして、およそ問題がなくなってきたと思われたので、当サイトで配布しているテンプレートの修正にかかろうと思いました。
が、しかし!!!
Googleが提供してくれいているチェックツールでチェックすると問題ないとされていても、Chromeでチェックすると、色んな警告が出るようになってきました。
”プリロード”するとかしないとか・・・。
読み込みファイルや記述形式は各サービスの仕様にも準ずるので、さすがにChromeの警告だけでは対処のしようがないと、今の所見受けています。
ということで、それらに関する注意点・・・というか留意点もメモ書きしておきたいと思います。
「ちょっとは役に立ったかな?」や「ちょっと面白いな(笑)」みたいなことを感じられましたら、シェアして頂けますと幸いです。

SEMラボラトリー関連に投稿したコラム記事

簡単WEBサイトテンプレート(PHP)の修正とAMP HTMLの注意点

AMP HTMLのサポート終了予定タグとそれに関する諸々

先だって、AMP HTMLのサポート終了予定タグの記事を書きました。

ということで、これらに準じた修正をした簡単WEBサイトテンプレート(PHP)を修正しました。
配布しているAMP HTMLに関するテンプレートの記事は以下です。

しかし、この問題は、当サイトのテンプレートの修正だけでは留まらないような警告が出ることも確認しました。
「amp-sidebar」や「amp-twitter」でも警告が出るようになったように見受けています。

簡単なチェックしかできていませんが、「amp-facebook」でも問題がありそうなそうでもなさそうな・・・そんな状況のように見受けています。
とりあえず、まずはテンプレートの修正から入っていきたいと思います。

因みにですが、Googleの提供してくれいているAMPテストでは「amp-twitter」などの警告は出ませんでして、Google Chromeでチェックすると警告が出るような感じです。

ダウンロードと組み込みサンプル
サンプルAMPファイルのダウンロード

ということで、早速テンプレートに組み込んでみましたので、ダウンロードしてお使い下さい。

phptemp_amp_170123.zip
組み込み済みサンプル

通常版とAMP版です。

修正した内容
ヘッダの読み込み内容のみの修正

この部分は前の記事と同じ修正です。
以下の通りです。

<style>body{opacity: 0}</style>
<noscript>
<style>body {opacity: 1}</style>
</noscript>

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

当サイトで配布しているテンプレートでは、各種SNSのためのコンポーネントの読み込みはデフォルトで入れていません。
ですので、他に修正する部分はありません。

SNSの書き込みを表示するために読み込むスクリプトで警告

AMP HTMLでは、Twitterへの書き込みを表示する時、専用のスクリプトファイルを読み込み動作させる必要があります。
以下は、TwitterとFacebookの場合の例です。

<script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
<script async custom-element="amp-facebook" src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script>

これらのファイルの動作仕様が変わったのか、Chromeの仕様が変わったのか・・・そのあたりのことまではまだ分かりませんでしたが、警告が出たことは間違いありませんでした。
これらのファイルはサポート終了予定などのお話とはちょっと違うようだったので、そのうち仕様が変わったファイルなどになるのでしょうか。

とりあえず、各種SNSの書き込みやページを表示する際には読み込まなければいけないファイルですので、警告は無視してもイイと思いました。
これらのコンポーネントに関する仕様変更はリリース情報が出ると信じて待ちたいと思います(笑)

その他、補足

WEBサイトテンプレート(PHP)の修正にあたって、以下の点に配慮しています。

  • 今回、サンプルにしたWEBサイトテンプレート(PHP)は「 phptemp_amp_160308.zip 」です。
  • 配布テンプレートファイル内のAMPページのサイト内リンクは、AMPページに飛ばしています。通常ページへのリンクが普通かもしれませんので、ご自由に修正してください。
まとめ

曖昧なことが多く、正しい情報があるのかどうか分からないので、英語を見てニュアンスで判断してここに掲載しています。
Search Consoleに掲載される警告情報は正しい情報だと思いますが、それ以外のコンポーネントに関する情報は弊社独自の判断です。
出来れば、ご自身で色々確認を取りながら色々取り組んで頂ければと思います。

AMPに関する最新情報が出た時や理解出来た時には、改めてピックアップ情報をコラムにしたいと思います。
そのたびに色々な修正を入れるかもしれませんが、その時は改めて解説や説明を入れていきたいと思います。

ご不明な点をコメントやご連絡を頂きましたら、個別でチェックやテストも行いますので、ご不明なことがありましたらご遠慮なくご連絡ください。
どうぞ宜しくお願い致します。

執筆 : 清水 隼斗

簡単WEBサイトテンプレート(PHP)の修正とAMP HTMLの注意点の通常ページ