HTML Validator

数万ページのHTMLファイルを一人でチェックするとしたらどうしますか？

というのがこの記事の主眼です。

以前仕事で、某大規模サイトのアクセシビリティ調査をやったときに構築したシステム（ちょっと大げさ）を防備録として残しておきます。

その仕事をしていた3年前とはもう状況が違ってきているので順番に説明してみます。

作業の概要

その仕事というのは、サイトのリニューアルの下準備として不要なHTMLファイルの特定と「JIS X 8341-3:2010」に沿ったアクセシビリティに準拠させるためのマニュアル作成というものでした。リニューアル自体は別の業者ということです。リニューアル後にも再チェックが待っていますから、拘束期間の長い長い案件ではありました。

さて、取りかかる前の状態で約5万ファイル存在していたもののうち、リンクチェック等でゴミファイルとなっていたものを約3万ファイル特定して削除（使用したソフト等は割愛）。残り2万ファイルを上記JIS X 2010に対応させなくてはなりません。

アクセシビリティに準拠させるということの詳細は、上記サイトを参考にしていただくとして、ここでは詳しくは述べませんが、おおざっぱに言うと1ページずつ目視で確認しなければならない部分（主に画像やサイトデザインにおける色の妥当性状況やサイトの設計そのものに関わる部分）と、機械的にチェックできる部分があります。

その機械的にチェックするために用意した環境を、ここで説明します。なぜなら、バリデートが通れば、アクセシビリティに関しての多くはパスできるからです。

調査段階

そもそも2万ページですから、W3C Validation Serviceのようなウェブサービスでは1ページずつしかチェックできないので、なにか別の手立てを考える必要があります。あ、有料のものならいくつかありますが、今回はそれらは考えないということで…。勿論、冒頭に書いたように一人でやることが前提です。

ちょっと調べるとちらほら自動チェックスクリプトを公開しているところが見つかりました。なんとかなりそう…。

そんなわけで、いざ開始です。

ローカル環境でバリデート

色々なスクリプトというのは、各種スクリプト言語ごとにあるわけですが、全て上記W3C Validation Serviceのシステムを利用しています。

というわけで、ローカル環境にW3C Validation Serviceを構築します。

当時は、Installation information for the W3C Markup Validatorから目的のソースを辿れたのですが、なんと、もうHTML5チェック用のJava版にしかリンクされていません。これはこれで使うし、既に時代はHTML5だから何の問題も無いのですが、この記事の趣旨とは違ってきますので（まあ、Java版でも自動化は出来るのでしょうが…）、ひとまず置いておきましょう。

バージョン：10.10.5 Yosemite　で確認済み updated 15/8/14

バージョン：10.11.6 El Capitan　で確認済み updated 16/7/19

バージョン：10.12 Sierra　で確認済み updated 16/9/21

W3C Validatorインストール

W3C Markup Validator + Validator.nu をローカル環境で構築する手順を説明するコラムですが、OS Xに関しては、jeffreyfrancesco.orgさんのそのものズバリのタイトルの記事を参照していただければと思います。この通りで何の問題もありません。
しかし、OS Xで一番簡単な方法は、以下のようなものです。

http://habilis.net/validator-sac/ から、Validator-SAC_0.10.4.zipをダウンロード。
/Applicationフォルダ直下にインストールします。
また、同じページから”validator-SAC-10.10.conf”という、Yosemite 以降用の設定ファイルも落としておきましょう。

cd /Applications/Validator-SAC.app/Contents/Resources
sudo cp validator/httpd/conf/validator-SAC.conf /etc/apache2/other

Yosemite 以降の場合は、下記のようにしてください。

sudo cp /path/to/validator-SAC-10.10.conf /etc/apache2/other

apacheを再起動します。

sudo apachectl graceful

これで、http://localhost/w3c-validator/ で、チェックが出来るようになりますが、HTML5もチェックしたい場合は、jdkをダウンロードして、インストールした上で、PATHを設定しておきましょう。

vi ~/.bash_profile

export JAVA_HOME=$(/usr/libexec/java_home)

簡単になったものです。HTML5のチェックが必要ないなら、このままHTML Validate 一括処理に進んでください。

validator.nuのインストール

上記で設定したhttp://localhost/w3c-validator/でも HTML5のチェックはしてくれますが、正確ではありません。そもそも、W3C Validation ServiceもHTML5用にはhttp://validator.w3.org/nu/と別のページが用意されています。一括処理するには、このvalidator.nuもインストールしておきましょう。

git clone https://github.com/validator/validator.git
cd validator/
python ./build/build.py all

これで、

……
20xx-xx-xx 15:51:24.662:INFO:oejs.ServerConnector:main: Started ServerConnector@13ddae04{HTTP/1.1}{0.0.0.0:8888}
20xx-xx-xx 15:51:24.668:INFO:oejs.Server:main: Started @5450ms

となったらビルド完了です。http://localhost:8888/ で確認してください。
続いて、コマンドライン用のjarファイルをコンパイルするので、一旦サーバを停止してください。コマンドキー＋Cでキルしてください。

pwd
/Users/ユーザー名/validator
python ./build/build.py jar
cp build/dist/vnu.jar ~/

ホームディレクトリ直下に置いたvnu.jarを使って、一括処理を行います。HTML Validate 一括処理に進んでください。
しかし、マックは便利ですね。必要な環境はほぼ揃っています。ま、Xcodeとコマンドラインツールはインストールしておく必要はありますが。

バージョン：15.04, 14.04LTS　で確認済み

バージョン：15.10　で確認済み updated 15/11/23

解説ページ”W3C Validator in Ubuntu 14.04.1“を参考に進めます。

但し、このサイトの情報もまた一部が古くなっているので、随時変更しています。

sudo mkdir -p /etc/apache2/conf.d
sudo apt-get install apache2 mercurial subversion python openjdk-7-jdk git libapache2-mod-perl2
sudo apt-get install w3c-markup-validator
sudo ln -s /etc/w3c/httpd.conf /etc/apache2/conf-enabled/w3c-markup-validator.conf
sudo vi /etc/apache2/conf-available/serve-cgi-bin.conf

4行目は、バージョン15.04以降は自動的にやってくれるようです。
5行目のviは、お使いのエディタに置き換えてください。編集内容は、以下です。10行目から12行目を追加してください。

<ifmodule mod_alias.c>
  <ifmodule mod_cgi.c>
      Define ENABLE_USR_LIB_CGI_BIN
  </ifmodule>
  
  <ifmodule mod_cgid.c>
      Define ENABLE_USR_LIB_CGI_BIN
  </ifmodule>
  
  <ifmodule mod_perl.c>
      Define ENABLE_USR_LIB_CGI_BIN
  </ifmodule>
  
  <ifdefine ENABLE_USR_LIB_CGI_BIN>
      ScriptAlias /cgi-bin/ /usr/lib/cgi-bin/
    <directory "/usr/lib/cgi-bin">
        AllowOverride None
        Options +ExecCGI -MultiViews +SymLinksIfOwnerMatch
        Require all granted
    </directory>
  </ifdefine>
</ifmodule>

# vim: syntax=apache ts=4 sw=4 sts=4 sr noet

sudo a2enmod cgi
sudo service apache2 restart
sudo ln -s /usr/lib/jvm/java-7-openjdk-amd64 /usr/lib/jvm/java-7-openjdk
sudo vi /etc/environment

編集内容です。

JAVA_HOME=/usr/lib/jvm/java-7-openjdk
PATH=$PATH:$JAVA_HOME/bin

sudo visudo /etc/environment

編集内容です。

Defaults env_keep += "JAVA_HOME PATH"

sudo mkdir /usr/share/html5-validator && cd /usr/share/html5-validator
export JAVA_HOME=/usr/lib/jvm/java-7-openjdk
sudo git clone https://github.com/validator/validator.git
cd validator
sudo python ./build/build.py all

サーバーが立ち上がったら、http://localhost:8888/にアクセスしてみましょう。このページ上部のような画面が見られるはずです。また、http://localhost/w3c-validator/にアクセスすると、W3C Validation Serviceと同様の画面が表示されるはずです。

続いて、コマンドライン用のjarファイルをコンパイルするので、一旦サーバを停止してください。Ctrl＋Cでキルしてください。

pwd
/usr/share/html5-validator/validator
sudo python ./build/build.py jar
cp build/dist/vnu.jar ~/

ホームディレクトリ直下に置いたvnu.jarを使って、一括処理を行います。HTML Validate 一括処理に進んでください。

自動起動の設定(Upstart)

http://localhost:8888/(The Nu Html Checker)の自動起動の設定です。

sudo vi /etc/init/html5-validator.conf

編集内容です。

description "Validator.nu HTML5 Validator"

start on runlevel [234]
stop on runlevel [0156]

chdir /usr/share/html5-validator/validator
exec python build/build.py run
respawn

sudo initctl reload-configuration
sudo initctl list | grep html5-validator

ここで、html5-validator start/running, process xxxxと表示されればOKです。もし、process番号が表示されない場合は、正常に起動していない可能性があります。その場合は、サービスを一旦ストップさせて再起動させましょう。

sudo initctl stop html5-validator
sudo initctl start html5-validator

あと一息です。がんばりましょう。

sudo vi /etc/w3c/validator.conf

systemdの設定

15.0.4以降は、Upstartではなくsystemdを採用しているので、下記のように設定します。

sudo vi /etc/systemd/system/multi-user.target.wants/validator-nu.service

編集内容です。

[Unit]
Description=Validator.nu HTML5 Validator
Requires=NetworkManager-wait-online.service
After=NetworkManager-wait-online.service

[Service]
Type=simple
Restart=always
Environment=LANG=C

WorkingDirectory=/usr/share/html5-validator/validator
ExecStart=/usr/bin/python build/build.py run
Restart=on-failure
RestartSec=5s

[Install]
WantedBy=multi-user.target

sudo systemctl --system daemon-reload
sudo systemctl start validator-nu.service
systemctl -l status validator-nu.service

以下のようになっていれば成功です。

● validator-nu.service - Validator.nu HTML5 Validator
Loaded: loaded (/etc/systemd/system/multi-user.target.wants/validator-nu.service)
Active: active (running) since 月 2015-xx-xx 16:34:58 JST; 24s ago
Main PID: 5512 (java)
 CGroup: /system.slice/validator-nu.service
………

バージョンは、22

w3c-validatorのインストール

sudo dnf install mercurial
sudo dnf install httpd*
sudo vi /etc/selinux/config

3行目でSELINUXを無効にします。書き換える内容は、以下のとおりです。

#SELINUX=enforcing
SELINUX=disabled

続いてファイアウォールも無効にします。Fedoraでの設定の肝は、上記selinuxとこのfirewallの設定です（仮想環境上のOSであり、あくまでも実験機として設定しているので乱暴にも無効としています。実機での構築では、セキュリティ項目は必ず適切に設定してください）。

sudo systemctl stop firewalld
sudo systemctl disable firewalld
sudo dnf install w3c-markup-validator
sudo systemctl start httpd
sudo systemctl enable httpd
   Created symlink from /etc/systemd/system/multi-user.target.wants/httpd.service to /usr/lib/systemd/system/httpd.service.

これで、http://localhost/w3c-validator/にアクセスすると、W3C Validation Serviceと同様の画面が表示されるはずです。

Validator.nuのインストール

まず、Javaのインストールです。
Install Oracle Java JDK/JRE 8u45 on Fedora 22/21, CentOS/RHEL 7.1/6.6/5.11を参考にインスールしてください。

export JAVA_HOME=/usr/java/latest
sudo git clone https://github.com/validator/validator.git
cd validator
sudo python ./build/build.py all

忘れずに、設定ファイルも修正しましょう。

sudo vi /etc/w3c/validator.conf

Allow Private IPs = noとある行を探して、Allow Private IPs = yesと変更してプライベートアドレスでも機能するように指示します。さらに、HTML5 = http://localhost:8888/html5/の行をアンコメントします。これは、調査するファイルがHTML5の場合に、上記で設定したhttp://localhost:8888/(The Nu Html Checker)を使ってチェックさせるための設定です。
http://localhost/w3c-validator/でどこかHTML5で記述されたサイト（例えば、http://html5.jp/）をチェックしてみてください。The error encountered was: 500 Can't connect to localhost:8888と表示されたら、”Validator.nu”との連携が上手くいっていないことになります。selinuxとfirewallが無効になっているかもう一度確認してください。
続いて、コマンドライン用のjarファイルをコンパイルするので、一旦サーバを停止してください。Ctrl＋Cでキルしてください。

pwd
/home/ユーザー名/validator
python ./build/build.py jar
cp build/dist/vnu.jar ~/

ホームディレクトリ直下に置いたvnu.jarを使って、一括処理を行います。HTML Validate 一括処理に進んでください。

自動起動の設定

http://localhost:8888/(The Nu Html Checker)の自動起動の設定です。
systemd用の設定ファイルです。

sudo vi /etc/systemd/system/multi-user.target.wants/validator-nu.service

編集内容です。

[Unit]
Description=Validator.nu HTML5 Validator
Requires=NetworkManager-wait-online.service
After=NetworkManager-wait-online.service

[Service]
Type=simple
Restart=always
Environment=LANG=C

WorkingDirectory=/home/ユーザー名/validator
ExecStart=/usr/bin/python build/build.py run
Restart=on-failure
RestartSec=5s

[Install]
WantedBy=multi-user.target

sudo systemctl --system daemon-reload
sudo systemctl start validator-nu.service
systemctl -l status validator-nu.service

以下のようになっていれば成功です。

● validator-nu.service - Validator.nu HTML5 Validator
Loaded: loaded (/etc/systemd/system/multi-user.target.wants/validator-nu.service)
Active: active (running) since 月 2015-xx-xx 16:34:58 JST; 24s ago
Main PID: 18232 (java)
CGroup: /system.slice/validator-nu.service
………

バージョンは、8.1

w3c-validatorのインストール

https://packages.debian.org/sid/all/w3c-markup-validator/download からソースをダウンロード。最新版は、w3c-markup-validator_1.3+dfsg-2_all.deb。
依存ファイルをあらかじめインストールしてから、本体をインストールします。

sudo aptitude install libhtml-template-perl libset-intspan-perl w3c-sgml-lib libencode-hnextra-perl libhtml-encoding-perl
sudo aptitude install libencode-hanextra-perl libjson-perl libsgml-parser-opensp-perl
sudo dpkg -i /path/to/w3c-markup-validator_1.3+dfsg-2_all.deb

これだけで、http://localhost/w3c-validator/にアクセスできるようになります。

Validator.nuのインストール

sudo aptitude install mercurial python openjdk-7-jdk subversion git libapache2-mod-perl2
sudo vi /etc/apache2/conf-available/serve-cgi-bin.conf

10行目から12行目を追加してください。

<ifmodule mod_alias.c>
  <ifmodule mod_cgi.c>
      Define ENABLE_USR_LIB_CGI_BIN
  </ifmodule>
  
  <ifmodule mod_cgid.c>
      Define ENABLE_USR_LIB_CGI_BIN
  </ifmodule>
  
  <ifmodule mod_perl.c>
      Define ENABLE_USR_LIB_CGI_BIN
  </ifmodule>
  
  <ifdefine ENABLE_USR_LIB_CGI_BIN>
      ScriptAlias /cgi-bin/ /usr/lib/cgi-bin/
    <directory "/usr/lib/cgi-bin">
        AllowOverride None
        Options +ExecCGI -MultiViews +SymLinksIfOwnerMatch
        Require all granted
    </directory>
  </ifdefine>
</ifModule>


# vim: syntax=apache ts=4 sw=4 sts=4 sr noet

sudo systemctl restart apache2.service
sudo ln -s /usr/lib/jvm/java-7-openjdk-amd64 /usr/lib/jvm/java-7-openjdk
sudo vi /etc/environment

編集内容です。

JAVA_HOME=/usr/lib/jvm/java-7-openjdk
PATH=$PATH:$JAVA_HOME/bin

sudo visudo

編集内容です。

Defaults env_keep += "JAVA_HOME PATH"

sudo mkdir /usr/share/html5-validator && cd /usr/share/html5-validator
export JAVA_HOME=/usr/lib/jvm/java-7-openjdk
sudo git clone https://github.com/validator/validator.git
cd validator
sudo python ./build/build.py all

サーバーが立ち上がったら、http://localhost:8888/にアクセスしてみましょう。このページ上部のカテゴリーイメージのような画面が見られるはずです。

sudo vi /etc/w3c/validator.conf

pwd
/usr/share/html5-validator/validator
sudo python ./build/build.py jar
cp build/dist/vnu.jar ~/

ホームディレクトリ直下に置いたvnu.jarを使って、一括処理を行います。HTML Validate 一括処理に進んでください。

systemdの設定

sudo vi /etc/systemd/system/multi-user.target.wants/validator-nu.service
sudo ln -s  /lib/systemd/system/validator-nu.service /etc/systemd/system/multi-user.target.wants/validator-nu.service

編集内容です。

[Unit]
Description=Validator.nu HTML5 Validator
Requires=NetworkManager-wait-online.service
After=NetworkManager-wait-online.service

[Service]
Type=simple
Restart=always
Environment=LANG=C

WorkingDirectory=/usr/share/html5-validator/validator
ExecStart=/usr/bin/python build/build.py run
Restart=on-failure
RestartSec=5s

[Install]
WantedBy=multi-user.target

sudo systemctl --system daemon-reload
sudo systemctl start validator-nu.service
systemctl -l status validator-nu.service

以下のようになっていれば成功です。

● validator-nu.service - Validator.nu HTML5 Validator
Loaded: loaded (/etc/systemd/system/multi-user.target.wants/validator-nu.service)
Active: active (running) since 月 2015-xx-xx 16:34:58 JST; 24s ago
Main PID: 22571 (java)
CGroup: /system.slice/validator-nu.service
………

作業の概要

調査段階

ローカル環境でバリデート

OS別の構築手順

W3C Validatorインストール

validator.nuのインストール

解説ページ”W3C Validator in Ubuntu 14.04.1“を参考に進めます。

自動起動の設定(Upstart)

systemdの設定

w3c-validatorのインストール

Validator.nuのインストール

自動起動の設定

w3c-validatorのインストール

Validator.nuのインストール

systemdの設定

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル