手軽にAMPエラーをチェックする方法(Chrome拡張「AMP Validator」の使い方)

先日、WordpressテーマをAMP対応させてみました。

ご存知の通りAMPは、非常に厳しい仕様に準拠する必要があります。

テーマの編集過程でも、ちょっとしたことでもすぐにAMPエラーが出てしまいました。ですので頻繁に「このページのこの書き方はエラーが出ないだろうか?」とチェックして、エラーが出たらちょこちょこ修正する必要がありました。これが非常に面倒くさかったです。

AMPの仕様に準拠しているかを調べる方法は、いくつかあるのですが、僕が今回使った限りでは、Chrome拡張の「AMP Validator」が最も便利だったので、その使い方を紹介します。

スポンサーリンク
レクタングル(大)広告

AMP Validatorとは

AMP Validator

AMP Validatorは、ブラウザで表示中のAMPページにバリデーションエラーがないか一目で見ることができる、AMPエラーチェックツールです。

また、AMPページでなくても、通常ページを閲覧時、AMP対応されているページの場合はChrome拡張アイコンの色が変わって、アイコンをクリックすることにより、手軽にAMPページへ移動することができます。

AMP Validatorの使い方

以下で、AMP Validatorの簡単な使い方を紹介します。

インストール

AMP Validatorを利用するには、まずChromeウェブストアから拡張をインストールしておく必要があります。

AMP Validator

ダイアログが出たら「追加」ボタンを押してください。

AMP Validatorの追加

インストールを終えると、Chromeツールバーに以下のようなアイコンが表示されます。

AMP Validatorのツールバーアイコン

AMPページがあるかどうかのチェック

AMP Validatorをインストールした状態で、ブラウザで「AMP対応サイトの通常ページ」を表示すると、AMPページがある場合は、以下のような青色のアイコンが表示されます。

AMP対応ページが存在する場合は青色のアイコンが表示

ちなみに、対応するAMPページがない場合は、アイコンは以下のようにグレーのままです。

AMP対応ページがない場合はグレーのアイコンが表示

おそらくこれは、閲覧ページ中に以下のようなlink rel="amphtml"タグを判別しているものと思われます。

対応したAMPページがある場合は、青色いアイコンをクリックすることで、AMPページに移動することができます。

クリックするとAMPページに移動する

AMPページにエラーがあるかどうかのチェック

AMPページに移動すると、バリデーションエラーがあるかどうかのチェックも自動的に行ってくれます。

エラーがない場合

まずは、AMPエラーがない場合は、AMP Validatorのアイコンは、以下のように緑色のアイコンで表示されます。

AMPエラーがない場合は緑色のアイコンで表示

バリデーション警告がある場合は、その数が表示されます。

エラーがある場合

AMPエラーがある場合は、以下のような赤色のアイコンで表示されます。

AMPエラーがある場合は赤色のアイコンで表示

表示されている数字は、エラーの数です。

エラーチェック

エラーチェックを行うには、赤色のエラーアイコンをクリックします。

AMPエラーアイコンをクリック

すると、以下のようなエラーメッセージが表示されました。

AMP Validatorのエラーメッセージ

The mandatory attribute ‘height’ is missing in tag ‘amp-img’. Debug. Learn more.

なんだか「amp-img」タグにheight属性がないみたいなことが書かれています。

状態を確認するためページを右クリックして「ページのソースを表示」をクリックします。

右クリックからソースの表示

ソースを表示し、エラーメッセージで指摘された290行目を見ると、確かにheight属性がありません(この場合width属性もありません)。

AMP Validatorで指摘されたソースコードを確認する

このようにして、エラーの内容を確認したら、heightやwidth属性を追加するなどして、修正する必要があります。

ちなみに、チェックするブラウザは以下のブラウザだと様々なモバイル端末を簡単にエミュレートしてみることができるのでより作業がはかどるかと思います。

WEB制作向けブラウザ「Blisk」を使った瞬間、恋に落ちた
先日、以下の記事を読んでBliskというWEB開発者用ブラウザを知りました。 それで、「そんなにいいのかな?」と半信半疑でインスト...

その他のエラーチェック方法

その他の、エラーチェック方法として、デベロッパーツールや、WEBツールを使用する方法もあります。

デベロッパーツール(開発ツール)でチェック

AMPページのURLに対して、「#development=1」を付加したURLを開くことでデベロッパーツールでエラーチェックを行うこともできます。

例えば、AMPページのURLが以下だった場合、

アドレスバーに以下のように入力して、ページを開きます。

あとは、デベロッパーツールのConsoleを開いた状態で、再度読み込むと、以下のようなエラーメッセージが表示されます。

デベロッパーツールのConsoleでエラーを確認

エラー部分のリンクをクリックすることで、手軽にエラー部分のソースコードも表示させることができます。

ちなみにこの「#development=1」を使用した方法は、Firefoxの開発ツールでも同様に利用することができます。

Firefoxの開発者ツールでも利用できる

WEBツールのAMP Validatorでチェック

あと、WEBツールのThe AMP Validatorを用いて、チェックするという方法もあります。

バリデーションを行うには、URL入力部分に、AMP URLを入力し「VALIDATE」ボタンを押してください。

The AMP Validatorでチェック

すると、以下のように分かりやすくチェック結果を表示してくれます。

The AMP Validatorのチェック結果

結果と原因部分の見やすさは、このWEBツールが一番見やすいかもしれません。

一応、デベロッパーツールの「See also URL」のURL部分をクリックすることでも、手軽にこのWEBツールのバリデーション結果を見ることができます。

デベロッパーツールのチェック結果からもWEBツールに移動することができる

もちろん、Firefoxの開発者ツールでも同様のことができます。

Chrome拡張のAMP Validatorでもチェック結果から、「Debug」リンクをクリックすることで、手軽にWEBツールでチェックすることができます。ただ、僕の環境では間違ったURLが送られる不具合がありました。ですので、補足情報として掲載しておきます。

AMP Validatorのデバッグリンクをクリック

まとめ

今回紹介した、方法を利用することで、面倒なAMPのエラーチェックを、それなりに手軽に行うことができるようになります。

とにかくAMPは、仕様が厳しくて本当にちょっとしたことでエラーが出ます(もちろん仕様から外れているからなのですが)。

なので、「WEBサイトをAMPに対応させよう」と思ったときは、今回書いたような「AMPエラーを手軽にチェックできる環境」を整えておくと、作業がはかどるかもしれません。