先日、WordpressテーマをAMP対応させてみました。
ご存知の通りAMPは、非常に厳しい仕様に準拠する必要があります。
テーマの編集過程でも、ちょっとしたことでもすぐにAMPエラーが出てしまいました。ですので頻繁に「このページのこの書き方はエラーが出ないだろうか？」とチェックして、エラーが出たらちょこちょこ修正する必要がありました。これが非常に面倒くさかったです。
AMPの仕様に準拠しているかを調べる方法は、いくつかあるのですが、僕が今回使った限りでは、Chrome拡張の「AMP Validator」が最も便利だったので、その使い方を紹介します。
目次
AMP Validatorとは
AMP Validatorは、ブラウザで表示中のAMPページにバリデーションエラーがないか一目で見ることができる、AMPエラーチェックツールです。
また、AMPページでなくても、通常ページを閲覧時、AMP対応されているページの場合はChrome拡張アイコンの色が変わって、アイコンをクリックすることにより、手軽にAMPページへ移動することができます。
AMP Validatorの使い方
以下で、AMP Validatorの簡単な使い方を紹介します。
インストール
AMP Validatorを利用するには、まずChromeウェブストアから拡張をインストールしておく必要があります。
ダイアログが出たら「追加」ボタンを押してください。
インストールを終えると、Chromeツールバーに以下のようなアイコンが表示されます。
AMPページがあるかどうかのチェック
AMP Validatorをインストールした状態で、ブラウザで「AMP対応サイトの通常ページ」を表示すると、AMPページがある場合は、以下のような青色のアイコンが表示されます。
ちなみに、対応するAMPページがない場合は、アイコンは以下のようにグレーのままです。
おそらくこれは、閲覧ページ中に以下のようなlink rel="amphtml"タグを判別しているものと思われます。
<link rel="amphtml" href="https://exsample.com/sample/?amp=1">
対応したAMPページがある場合は、青色いアイコンをクリックすることで、AMPページに移動することができます。
AMPページにエラーがあるかどうかのチェック
AMPページに移動すると、バリデーションエラーがあるかどうかのチェックも自動的に行ってくれます。
エラーがない場合
まずは、AMPエラーがない場合は、AMP Validatorのアイコンは、以下のように緑色のアイコンで表示されます。
エラーがある場合
AMPエラーがある場合は、以下のような赤色のアイコンで表示されます。
エラーチェック
エラーチェックを行うには、赤色のエラーアイコンをクリックします。
すると、以下のようなエラーメッセージが表示されました。
The mandatory attribute ‘height’ is missing in tag ‘amp-img’. Debug. Learn more.
なんだか「amp-img」タグにheight属性がないみたいなことが書かれています。
状態を確認するためページを右クリックして「ページのソースを表示」をクリックします。
ソースを表示し、エラーメッセージで指摘された290行目を見ると、確かにheight属性がありません（この場合width属性もありません）。
このようにして、エラーの内容を確認したら、heightやwidth属性を追加するなどして、修正する必要があります。
ちなみに、チェックするブラウザは以下のブラウザだと様々なモバイル端末を簡単にエミュレートしてみることができるのでより作業がはかどるかと思います。
その他のエラーチェック方法
その他の、エラーチェック方法として、デベロッパーツールや、WEBツールを使用する方法もあります。
デベロッパーツール（開発ツール）でチェック
AMPページのURLに対して、「#development=1」を付加したURLを開くことでデベロッパーツールでエラーチェックを行うこともできます。
例えば、AMPページのURLが以下だった場合、
https://exsample.com/sample/?amp=1
アドレスバーに以下のように入力して、ページを開きます。
https://exsample.com/sample/?amp=1#development=1
あとは、デベロッパーツールのConsoleを開いた状態で、再度読み込むと、以下のようなエラーメッセージが表示されます。
エラー部分のリンクをクリックすることで、手軽にエラー部分のソースコードも表示させることができます。
ちなみにこの「#development=1」を使用した方法は、Firefoxの開発ツールでも同様に利用することができます。
WEBツールのAMP Validatorでチェック
あと、WEBツールのThe AMP Validatorを用いて、チェックするという方法もあります。
バリデーションを行うには、URL入力部分に、AMP URLを入力し「VALIDATE」ボタンを押してください。
すると、以下のように分かりやすくチェック結果を表示してくれます。
結果と原因部分の見やすさは、このWEBツールが一番見やすいかもしれません。
一応、デベロッパーツールの「See also URL」のURL部分をクリックすることでも、手軽にこのWEBツールのバリデーション結果を見ることができます。
もちろん、Firefoxの開発者ツールでも同様のことができます。
まとめ
今回紹介した、方法を利用することで、面倒なAMPのエラーチェックを、それなりに手軽に行うことができるようになります。
とにかくAMPは、仕様が厳しくて本当にちょっとしたことでエラーが出ます（もちろん仕様から外れているからなのですが）。
なので、「WEBサイトをAMPに対応させよう」と思ったときは、今回書いたような「AMPエラーを手軽にチェックできる環境」を整えておくと、作業がはかどるかもしれません。
