超爆速！AMP HTMLを自動検証できるamphtml-validator(gulpタスクやgruntタスクもあるよ)

AMP HTML(Accelerated Mobile Pages)の記述の有効性を自動で検証できるamphtml-validatorが知らない間にリリースされていたので試してみました。

photo by Mr. Alex Garcia - Double Cliche on flickr

見込み客が増える儲かるブログの書き方講座

これまでのAMPの検証手段

今まで知ってたAMP HTMLの検証手段としては

AMP Validatorサイトで検証
Chrome DevToolsにてURLに#development=1をつけて検証モードに
ブラウザ拡張のAMP Validator for Chromeを使う

以上のような3通りの方法がありました。

自身のブログ
【検証方法】Google AMP HTMLが正しく記述されたかチェックする方法

amphtml-validatorの登場

AMP Projectでは第4の検証手段としてamphtml-validatorが用意されています。

amphtml-validator

github
amphtml-validator for node.js
npm
amphtml-validator - npm

ちなみに同プラグインのラッパーであるgulp-amphtml-validatorやgrunt-amp-validatorを使えば一括でAMP HTMLを自動テストできるので仕事が捗りそうです。好みに合わせてgulpタスクやgruntタスクを回しましょう！

AMP Projectはvalidatorブランチを切っていて、各言語に対応したバリデーターを用意してくれる流れになりそうです。ただし今のところはnode.jsとgulp validatorが正式リリースという状況です。

コマンドライン上でAMP HTMLの検証をしたり、他のライブラリに組み込んで自動検証に利用できそうですね。なにこれ、恐ろしく便利な予感！

さっそく使ってみた

興奮が冷めないうちに、さっそくamphtml-validatorを試してみました。

bash

$ mkdir ampvalid
$ cd ampvalid
$ npm init
$ npm install amphtml-validator --save
$ vim index.js

まずはサンプルコードを試します。<html>Hello, world.</html>という単純なHTMLテキストをAMP Validateしてみます。

index.js

'use strict';

// シンプルなAMP HTML検証ケース： Hellow Worldを AMP Validate
var amphtmlValidator = require('amphtml-validator');
var samplehtml = "<html>Hello, world.</html>";

amphtmlValidator.getInstance().then(function (validator) {
  var result = validator.validateString(samplehtml);
  ((result.status === 'PASS') ? console.log : console.error)(result.status);
  for (var ii = 0; ii < result.errors.length; ii++) {
    var error = result.errors[ii];
    var msg = 'line ' + error.line + ', col ' + error.col + ': ' + error.message;
    if (error.specUrl !== null) {
      msg += ' (see ' + error.specUrl + ')';
    }
    ((error.severity === 'ERROR') ? console.error : console.warn)(msg);
  }
});

最後にnode.jsを実行します。

bash

$ node index.js
FAIL
line 1, col 0: The mandatory attribute '⚡' is missing in tag 'html ⚡ for top-level html'. (see https://www.ampproject.org/docs/reference/spec.html#required-markup)
line 1, col 0: The parent tag of tag 'html ⚡ for top-level html' is '$root', but it can only be '!doctype'. (see https://www.ampproject.org/docs/reference/spec.html#required-markup)
line 1, col 5: Tag or text which is only allowed inside the body section found outside of the body section. (see )
line 1, col 25: The mandatory tag 'html doctype' is missing or incorrect. (see https://www.ampproject.org/docs/reference/spec.html#required-markup)
line 1, col 25: The mandatory tag 'html ⚡ for top-level html' is missing or incorrect. (see https://www.ampproject.org/docs/reference/spec.html#required-markup)
line 1, col 25: The mandatory tag 'head' is missing or incorrect. (see https://www.ampproject.org/docs/reference/spec.html#required-markup)
line 1, col 25: The mandatory tag 'link rel=canonical' is missing or incorrect. (see https://www.ampproject.org/docs/reference/spec.html#required-markup)
line 1, col 25: The mandatory tag 'meta charset=utf-8' is missing or incorrect. (see https://www.ampproject.org/docs/reference/spec.html#required-markup)
line 1, col 25: The mandatory tag 'meta name=viewport' is missing or incorrect. (see https://www.ampproject.org/docs/reference/spec.html#required-markup)
line 1, col 25: The mandatory tag 'amphtml engine v0.js script' is missing or incorrect. (see https://www.ampproject.org/docs/reference/spec.html#required-markup)
line 1, col 25: The mandatory tag 'noscript enclosure for boilerplate' is missing or incorrect. (see https://github.com/ampproject/amphtml/blob/master/spec/amp-boilerplate.md)
line 1, col 25: The mandatory tag 'head > style[amp-boilerplate]' is missing or incorrect. (see https://github.com/ampproject/amphtml/blob/master/spec/amp-boilerplate.md)
line 1, col 25: The mandatory tag 'noscript > style[amp-boilerplate]' is missing or incorrect. (see https://github.com/ampproject/amphtml/blob/master/spec/amp-boilerplate.md)

めっちゃ怒られましたｗそれもそのはず。AMP HTMLは細かい縛りがあります。<html>〜</html>だけじゃ全然だめです。

自身のブログ
【導入方法】Google AMP HTML(Accelerated Mobile Pages)について

AMP Validatorサイトでも同じ結果です。

AMP Validator サイトの結果 ©

実際のAMP HTMLを検証してみる

続いて、有効なAMP HTMLを通してみたいと思います。一からvalid passなHTMLを書くのは面倒なので、自分のブログの記事ソースをamphtml-validatorに突っ込んでみます。

bash

1 2	$ npm install amphtml-validator request --save $ vim index.js

今度のindex.jsは指定URLのHTMLを取得して、AMP Validateするサンプルコードです。

index.js

'use strict';

// 実際のAMP HTMLを検証したケース： 検証元は https://tea3.github.io/p/hexo-markdown-notation/amp/
var amphtmlValidator = require('amphtml-validator');
var request = require("request");
var requestUrl = "https://raw.githubusercontent.com/tea3/tea3.github.io/master/p/hexo-markdown-notation/amp/index.html";

// Send http request
request({url: requestUrl}, function(error, response, body) {
 
    // If request succeed
    if (!error && response.statusCode == 200) {
        
        amphtmlValidator.getInstance().then(function (validator) {
          var result = validator.validateString(body);
          ((result.status === 'PASS') ? console.log : console.error)(result.status);
          for (var ii = 0; ii < result.errors.length; ii++) {
            var error = result.errors[ii];
            var msg = 'line ' + error.line + ', col ' + error.col + ': ' + error.message;
            if (error.specUrl !== null) {
              msg += ' (see ' + error.specUrl + ')';
            }
            ((error.severity === 'ERROR') ? console.error : console.warn)(msg);
          }
        });
    }
 
    // If error occured
    else {
        console.log("--------------------------------------------------");
        if (error && "code" in error) {
            console.log("Error Code:" + error.code);
        }
        if (error && "errno" in error) {
            console.log("Error No:" + error.errno);
        }
        if (error && "syscall" in error) {
            console.log("Error Syscall:" + error.syscall);
        }
        if (response && "statusCode" in response) {
            console.log("Status Code:" +  response.statusCode);
        }
    }
});

最後にnode.jsを実行します。

bash

1 2	$ node index.js PASS

前回と違って、怒られずに済みました(^^)検証結果が問題なければPASSが返ってきます。AMP HTMLの記述がOKの場合は、かなりあっさりした反応ですねｗ

AMP Validatorサイトでも同じ結果です。

ということで

今回はnode.jsで使えるamphtml-validatorを使って、AMP HTMLの記述が問題ないのか確認してみました。コマンド一発で検証できるのは凄く便利ですね。

先にも触れましたが、フロントエンド業務では、同プラグインのラッパーであるgulp-amphtml-validatorやgrunt-amp-validatorを使えば一括でAMP HTMLを自動検証できるので、これをそのまま使うだけで仕事が捗りそうです。好みに合わせてgulpタスクやgruntタスクをぶん回しましょう！

私はこのブログ用にAMP HTMLを生成するプラグインを作っているので、自動検証できる機能を追加してみようと思いました^^ それでは快適なAuto Validateライフを！