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

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

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

• AMP HTMLのサポート終了タグがSearch Consoleに表示（前編）
• AMP HTMLのサポート終了タグがSearch Consoleに表示（後編）

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

• 旧 : GoogleとTwitterが連携して策定しているプロジェクト、AMP（Accelerated Mobile Pages） HTML
• 新 : AMP HTMLのエラーと簡単WEBサイトテンプレート（PHP）の修正

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

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

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

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

phptemp_amp_170123.zip

通常版とAMP版です。

• 通常版
• AMP HTMLサンプル

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

<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のためのコンポーネントの読み込みはデフォルトで入れていません。
ですので、他に修正する部分はありません。

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の注意点のAMPページ