AMPバリデーションを自動化してサイト丸ごとチェックする

2020-06-11

(LastUpdated: 2020-06-11)

面倒でついつい端折ってしまいがちな、ブラウザでのAMP HTMLバリデーション。

このブログでも、記事の中でhtmlタグを使うことが少なくありません。 そんなときに、ampの記述をすっかり忘れちゃってることが何度かありました。

そんなミスに気づくのに頼っていたのは、サーチコンソールのAMPエラー。 それでも悪くはないのですが、ちょっと遅すぎな気もします。

できたら公開前に気づきたい。 そんな訳で、AMP HTMLバリデーションを調べ直してみました。

結果としては、バリデーションエラーのチェックを自動化することができました。

  1. AMPオフィシャルで紹介されてるよ
  2. ディレクトリ丸ごとチェックするにはgulpを
  3. CircleCIでGulpを叩く
  4. まとめ:見逃してたエラーを見つけた

ちなみに、AMPの基礎知識。 AMPのバリデーションをするのには、ブラウザのアドレスバー内の表示の末尾に #development=1 を入力。 ブラウザのコンソールに結果を表示してくれます。

これはとても便利ではありますが、地味に面倒な作業でもあるのです。 特に複数ページをチェックする場合には。

AMPオフィシャルで紹介されてるよ

コーディング中のラップトップディスプレイの拡大画像 公式のサイトに、「amphtml-validator」 というモジュールが紹介されています。 これでいちいち#development=1をつけてバリデーションする必要性から解放されます! AMP ページを検証する - amp.dev

インストール

amphtml-validatorをインストールします。 amphtml-validator - npm

yarn add amphtml-validator

使い方

コマンドラインで実行できます。 bash yarn amphtml-validator dist/index.html ファイルを指定することで、そのファイルの記述が正しいかを判定してくれます。 問題なければ「PASS」が返ってきます。

しかし、このモジュールだと、ファイルごとにチェックしなきゃ いけません。

これじゃ、ブラウザのバリデーターと刺して手間が変わりません。 特に、いくつかのページをアップデートしたときに、不便。

やはり、ディレクトリ丸ごと、一気にチェックしてしまいたい。

ディレクトリ丸ごとチェックするにはgulpを

Gulpなら、「ディレクトリごとまとめてチェック」できることがわかりました。 「gulp-amphtml-validator」というパッケージを利用します。

yarn add gulp-amphtml-validator

Gulp.jsにもこんな風に記述で使えます。

const gulpAmpValidator = require('gulp-amphtml-validator');
 
gulp.task('amphtml:validate', () => {
  return gulp.src(['dist/**/*.html', '!dist/sw/*.html'])
    .pipe(gulpAmpValidator.validate())
    .pipe(gulpAmpValidator.format())
    .pipe(gulpAmpValidator.failAfterError());
});

直したところはm、srcに書くディレクトリの指定です。 Service workerのディレクトリだけ除外しています。

Gulpを実行します。

gulp amphtml:validate

これでディレクトリごとAMP HTMLをバリデーションできました。

CircleCIでGulpを叩く

フローチャートが貼られたホワイトボードを指でなぞる せっかくCiecleCIを使っているので、「generate時に全てのファイルをチェックして、エラーだったらデプロイをしない」というようなフローを実現したいですよね。

まんま circleci/config.yaml にコマンドを書いたら、エラーが出てしまいました。 `yaml

もうちょっと楽をしたいので、別の方法を模索。 こちらの方の記事にあるように、npm scriptsがスマートなようです。 CircleCIで静的サイトのS3向け自動デプロイ - Qiita

package.jsonにnpm scriptsを追加します。 js "scripts": { // 〜 省略 "ampvalid": "gulp amphtml:validate" },

そして、cilecleCIの設定ファイルに記述。 `yaml

  • run: name: AMP HTML validation command: yarn run ampvalid `

これで、記事の公開前にAMPバリデーションに成功しているかどうかを確認できるようになりました。

まとめ:見逃してたエラーを見つけた

フキダシのボードを持った女性ととなりで仕事に専念する男性の画像 今回、全てのファイルをバリデーションしてみたところ、見逃していたところが発見できました。

404.htmlで、「canonicalが必要」というエラーが出ていました。 404だからいいかーと思っていましたが、AMP HTMLで書かれている以上、対応した方が良いのでしょう。 今回、修正しておきました。

致命的ではないとはいえ、想定できなかったエラーを発見できました。 これこそが自動化の強みですね。


タグに関連づけられた記事

AM2

JAMstacなブログにまつわる、技術的なことなどを記録しています。