ぷにおちゃん～ W3CValidatorsでHTML5の構文チェックを行う方法

はじめに

当サイトでは、HTML5を使用したコンテンツを作成しており、HTML5の構文チェックは、Markup Validation Service、Crescent Eve、ChromeのF12キーを使っていますが、作成するHTMLファイルが多くなってくると、毎回エディタやブラウザを起動してチェックすることに限界を感じていました。
そこで、今回は最強のHTMLエディタとも言われるSublime Text3＋Sublime-W3CValidatorsを使った、HTML5の構文チェック方法について解説します。

前提条件

作業の前提条件は、下記のとおりです。

ソフトウエア	バージョン
OS	Windows 7 Ultimate 32bit
Cygwin	Setup Version 2.831

Sublime Text3を使う方法

Sublime Text3のインストール
公式サイトから、Windows x86用のインストーラーをダウンロードしてインストールします。
基本的には、デフォルトインストールで構いませんが、Add to explorer context menuをチェックしてインストールします。

Add to explorer ...をチェックしてインストールすると、マウスの右クリックでSublime Text3を使ってファイルを開くことができます。
Package Controlのインストール
Sublime Text3を起動し、メニューからView→Show Console選択または、Ctrl＋`(バッククオート)を入力すると、Consoleが表示されるので、公式サイトに表示されたコマンドを貼り付けて実行します。

終了したら、Sublime Text3を再起動します。
メニューからPreferences→Package Controlが表示されれば、インストールは成功です。
W3CValidatorsのインストール
ublime Text3を起動して、メニューからTools→Command Palette選択または、Ctrl+Shift+Pを入力すると、Command Palletteが表示されるので、instaと入力して、[Package Control:Install Package]を選択します。

次に、w3と入力して、W3CValidatorsを選択すると、パッケージがインストールされます。

メニューからTools→W3C Validatorsが表示されれば、インストールは成功です。
構文チェック
インストールが終了したら、チェックしたいHTMLファイルをドラッグ＆ドロップでSublime Text3に表示します。ここでは、以前の記事で作成した16-1.htmlを入力しています。

メニューからTools→W3C Validators→HTML5を選択または、Windowsキー+Ctrl+Vを入力すると、構文がチェックされた後、結果がポップアップ表示されます。

12行目から17行目にかけて、imgタグにalt属性が未定義とエラーが表示されましたので、修正して再度チェックします。

同様に、</a>タグがエラーになっていますので、再修正してチェックすると成功します。

コマンドラインによる方法

Sublime Text3を用いて、HTML5の構文チェックができるようになりましたが、やはり毎回Sublime Text3を起動して、構文チェックを行うのは面倒です。

ここでは、以前作成した016-2.htmlをチェックしてみます。

チェックの結果がポップアップされましたが、このダイアログはモーダルダイアログのため、チェック結果を参照しながらソースコードを修正するという当たり前の事ができません。
ダイアログをキャプチャした後に、ダイアログを閉じてキャプチャを見ながらコードを修正するのは苦行に近いですよね。

Sublime Text3では、Python言語を用いてMarkup Validation Serviceにリクエストを投げているだけですので、コマンドラインでチェックできるようにPerlを用いてスクリプトを作成しました。

このコマンドは、チェック結果として下記の項目を表示します。

チェックしたファイル名
検証結果
文字セット
総エラー数
エラー行番号
エラー列番号
エラーメッセージ
エラー行ソース

#!/usr/bin/perl

use feature ':5.10';
use encoding "utf8";

use XML::Simple;
use HTML::Entities;

local $html_check_site = "http://validator.w3.org/check";
local $html_check_resp = "/tmp/html_check.dat";

foreach $file (@ARGV) {
  if (! -f $file) { next; }
  open(OUT,"> $html_check_resp"); binmode(OUT, ":utf8");
  open(IN, "curl -s -F'fragment=<$file' -F'output=soap12' $html_check_site |");
  while(<IN>) { print OUT $_; }
  close(OUT); close(IN);

  if (-f $check_html_resp) { next; }

  $xs = new XML::Simple();
  $ref = $xs->XMLin($html_check_resp);

  print "File       : $file\n";
  print "Validity   : " . $ref->{"env:Body"}->{"m:markupvalidationresponse"}->{"m:validity"} . "\n";
  print "Charset    : " . $ref->{"env:Body"}->{"m:markupvalidationresponse"}->{"m:charset"} . "\n";

  local $ERR = $ref->{"env:Body"}->{"m:markupvalidationresponse"}->{"m:errors"}->{"m:errorcount"};
  print "Total Error: $ERR\n";

  local $LIN, $COL, $MSG, $SRC, $i;
  for ($i = 1; $i <= $ERR; $i++) {
    $LIN = $ref->{"env:Body"}->{"m:markupvalidationresponse"}->
                {"m:errors"}->{"m:errorlist"}->{"m:error"}->[$i-1]->{"m:line"};
    $COL = $ref->{"env:Body"}->{"m:markupvalidationresponse"}->
                {"m:errors"}->{"m:errorlist"}->{"m:error"}->[$i-1]->{"m:col"};
    $MSG = $ref->{"env:Body"}->{"m:markupvalidationresponse"}->
                {"m:errors"}->{"m:errorlist"}->{"m:error"}->[$i-1]->{"m:message"};
    $SRC = $ref->{"env:Body"}->{"m:markupvalidationresponse"}->
                {"m:errors"}->{"m:errorlist"}->{"m:error"}->[$i-1]->{"m:source"};
    $SRC =~ s/^ *(.*?) *$/$1/;
    $SRC = decode_entities($SRC);
    $SRC =~ s/<strong.*\">//;
    $SRC =~ s/<\/strong>//;
    print "\n";
    print "  Error    : #$i\n";
    print "  Line     : $LIN\n";
    print "  Column   : $COL\n";
    print "  Message  : $MSG\n";
    print "  Source   : $SRC\n";
  }
}

上記コマンドを使用する際には、以下の手順でインストールします。

XML Parserのインストール
Markup Validation ServiceへのリクエストレスポンスがSOAP形式で取得できるため、XMLパーサーをインストールします。 apt-cygのインストール方法については、Cygwinにapt-cygをインストールするを参照して下さい。
```
$ apt-cyg install perl-XML-Simple
```
使用するParserモジュールの追加
使用するXML Perserモジュールを追加します。ここでは、PurePerl Parserを追加しています。
```
$ perl -MXML::SAX -e "XML::SAX->add_parser(q(XML::SAX::PurePerl))->save_parsers()"
```

構文チェック

先ほどと同じHTMLファイルを、check_html5コマンドでチェックします。

$ cd /tmp/demo
$ check_html5 016-2.html

File       : 016-2.html
Validity   : false
Charset    : utf-8
Total Error: 12

  Error    : #1
  Line     : 13
  Column   : 38
  Message  : An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
  Source   : <li><img src="img/016-01.png"></a></li>

  Error    : #2
  Line     : 13
  Column   : 42
  Message  : Stray end tag a.
  Source   : <li><img src="img/016-01.png"></a></li>

  Error    : #3
  Line     : 14
  Column   : 38
  Message  : An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
  Source   : <li><img src="img/016-02.png"></a></li>

  Error    : #4
  Line     : 14
  Column   : 42
  Message  : Stray end tag a.
  Source   : <li><img src="img/016-02.png"></a></li>

  Error    : #5
  Line     : 15
  Column   : 38
  Message  : An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
  Source   : <li><img src="img/016-03.png"></a></li>

  Error    : #6
  Line     : 15
  Column   : 42
  Message  : Stray end tag a.
  Source   : <li><img src="img/016-03.png"></a></li>

  Error    : #7
  Line     : 16
  Column   : 38
  Message  : An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
  Source   : <li><img src="img/016-04.png"></a></li>

  Error    : #8
  Line     : 16
  Column   : 42
  Message  : Stray end tag a.
  Source   : <li><img src="img/016-04.png"></a></li>

  Error    : #9
  Line     : 17
  Column   : 38
  Message  : An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
  Source   : <li><img src="img/016-05.png"></a></li>

  Error    : #10
  Line     : 17
  Column   : 42
  Message  : Stray end tag a.
  Source   : <li><img src="img/016-05.png"></a></li>

  Error    : #11
  Line     : 18
  Column   : 38
  Message  : An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
  Source   : <li><img src="img/016-06.png"></a></li>

  Error    : #12
  Line     : 18
  Column   : 42
  Message  : Stray end tag a.
  Source   : <li><img src="img/016-06.png"></a></li>

エラーを修正して、再実行します。

$ check_html5 016-2.html

File       : 016-2.html
Validity   : true
Charset    : utf-8
Total Error: 0

check_html5コマンドを使うと、複数ファイルを一度にチェックできますが、Markup Validation Serviceでは一度に大量のアクセスがあると、DoSと見做されてしまいますので、ご利用は計画的にお願いします。

Table of Contents

W3CValidatorsでHTML5の構文チェックを行う方法

はじめに

前提条件

Sublime Text3を使う方法

コマンドラインによる方法