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

photo by Mr. Alex Garcia - Double Cliche on flickr

目次

これまでのAMPの検証手段

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

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

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

amphtml-validatorの登場

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

amphtml-validator

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

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

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

さっそく使ってみた

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

bash
1
2
3
4
5
$ mkdir ampvalid
$ cd ampvalid
$ npm init
$ npm install amphtml-validator --save
$ vim index.js

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

index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
'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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$ 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)

めっちゃ怒られましたw それもそのはず。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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
'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の場合は、かなりあっさりした反応ですねw

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

AMP Validator サイトの結果 ©

ということで

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

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

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

2017年2月追記:自動検証を追加しました

ブログからAMP HTMLを自動作成するプラグイン「hexo-generator-amp」にAMP HTMLの自動検証機能を追加しました。

AMP生成直後にamphtml-validatorがHTMLを自動でチェックしてくれます。