CLOVER🍀

That was when it all began.

W3CのNu Html CheckerとCSS Validatorをローカルで動かす

HTMLやCSSのチェックに使われる、Nu Html CheckerとCSS Validatorというものがあります。

こういうやつですね。

Ready to check - Nu Html Checker

The W3C CSS Validation Service

それぞれURLを指定したり、ファイルをアップロードしたり、対象を直接テキストで入力してチェックすることができるサービスです。

これらのローカル環境での構築手順が公開されているので、ちょっと試してみたいと思います。

Nu Html Checker

Nu Html Checkerでは、以下のページの「How to to run your own copy of the Nu Html Checker」の部分に概要が書かれています。

About the Nu Html Checker

Webベースで動かす方法、コマンドラインで使う方法、Grunt、gulpのプラグインなどとして使う方法などがあります。

今回は、Webベースで動かす方法とコマンドラインで使う方法の2つを見ていこうと思います。

WebベースでNu Html Checkerを動かす(Standalone)

Nu Html Validatorの環境構築方法は、GitHub上のリポジトリのREADME.mdに書かれています。

GitHub - validator/validator: The Nu Html Checker – Helps you catch unintended mistakes in your HTML, CSS, and SVG

Web-based checking with vnu.war or vnu.jar

Standloneで動かす場合は、こちら。JARファイルからMainクラスを起動する形になります。

Standalone web server

リポジトリのreleasesから、対象のzipファイルをダウンロードして展開。

$ wget https://github.com/validator/validator/releases/download/16.1.1/vnu.jar_16.1.1.zip
$ unzip vnu.jar_16.1.1.zip

distというディレクトリの中に、vnu.jarというファイルが現れます。

実行。8888は、リッスンポートです。
※スタックサイズが足りないようなら、「-Xss」を指定

$ java -cp dist/vnu.jar nu.validator.servlet.Main 8888

今回はドキュメントどおり、リッスンポートを8888としたので、http://localhost:8888でアクセスすることができます。

オンラインのものはバージョンが16.2.27で、ローカルで構築したものはバージョンが16.1.1で、微妙にreleasesで公開されているバージョンが古いですが…。

WebベースでNu Html Checkerを動かす(Tomcat)

Nu Html CheckerはWAR形式でも提供されているので、Tomcatなどのコンテナで動かすことができます。

Web-based checking with vnu.war or vnu.jar

Deployment to servlet container

今度は、WARファイルをダウンロードします。

$ wget https://github.com/validator/validator/releases/download/16.1.1/vnu.war_16.1.1.zip
$ unzip vnu.war_16.1.1.zip

distディレクトリの中にあるvnu.warファイルを、ROOT.warという名前でTomcatに配置します。

## もともとあるROOTは削除
$ rm -rf /path/to/webapps/ROOT*
$ cp dist/vnu.war /path/to/webapps/ROOT.war

ドキュメントを見ると、「vnu.war」という名前のままでもよさそうに見えますが、そうしてしまうとスタイルシートなどが取得できずにレイアウトが崩れます…。

コマンドラインでNu Html Validatorを動かす

最後は、コマンドラインで使う方法。

Usage

スタンドアロンで使った時と同じJARファイルを使って、コマンドラインでNu Html Checkerを動かすことができます。

$ wget https://github.com/validator/validator/releases/download/16.1.1/vnu.jar_16.1.1.zip
$ unzip vnu.jar_16.1.1.zip

「java -jar」で実行し、引数にはチェック対象のファイルまたはディレクトリを与えます。

$ java -jar dist/vnu.jar [files or directories]

ディレクトリを与えた場合は、再帰的に階層をたどってくれますが、全ファイルをチェックしようとするのでHTMLのみにしたい場合は「--skip-non-html」というオプションを付与します。

$ java -jar dist/vnu.jar --skip-non-html [files or directories]

その他のオプションは、ドキュメントを参照のこと。

また、HTTPクライアントとしても実行できるようです(こちらは未確認)。

HTTP client options

コマンドラインで使えるのh便利なのですが、使ってみた感じ、ツール自体が継続できないようなエラーに遭遇してしまうとそこでストップしてしまうようなので、ちょっと微妙かも…と思いました…。

困ったら、ヘルプで確認。

$ java -jar dist/vnu.jar --help

CSS Validator

続いて、CSS Validator。こちらの場合は、以下のページの「Can I install and run the CSS Validator myself?」に記載があります。

About the W3C CSS Validation Service

手順自体は、リンクからたどれる以下のページで。

Download and Install the CSS Validator

こちらは、Webベースで動かす方法と、コマンドラインで動かす方法があります。

準備

CSS Validatorの場合は、自分でソースコードからビルドする必要があります。リポジトリは、こちら。

GitHub - w3c/css-validator: W3C CSS Validation Service

ビルドに必要なものは、JDK、Git、Apache Antですね。

とりあえず、cloneしてディレクトリに移動しておきます。

$ git clone https://github.com/w3c/css-validator.git
$ cd css-validator
WebベースでCSS Validatorを動かす

Tomcatなどの、コンテナで動かす方法。

以下のページの「Installation of the CSS validator under Tomcat」に沿って、環境を作ります。

Download and Install the CSS Validator

ビルドは、warタスクで。

$ ant war

カレントディレクトリに、「css-validator.war」というファイルができます。

あとはTomcat上にデプロイすればよく、Nu Html Checkerと違って別にROOT.warにこだわる必要もないのですが、今回は合わせておきました。

$ rm -rf /path/to/webapps/ROOT && \
$ cp css-validator.war /path/to/ROOT.war

Tomcat起動後、http://localhost:8080へアクセス。

OKそうです。

コマンドラインでCSS Validatorを動かす

最後は、コマンドラインで使う方法。

以下のページの「Command-Line use」に沿って、環境を作ります。

Download and Install the CSS Validator

ビルドは、jarタスクで。

$ ant jar

カレントディレクトリに、「css-validator.jar」というファイルが作成されます。

これ、HTTPクライアントとして動作するっぽいので、引数にURLを与えるとそのページで参照されているCSSを解析して

$ java -jar css-validator.jar [url]

結果を出力してくれます。

困ったら、ヘルプで確認。

$ java -jar css-validator.jar --help

まとめ

Nu Html ValidatorとCSS Validatorを、ローカルで動かせるように環境を作ってみました。コマンドラインで使うようにいきたいところですが、途中で止まったりすると困るのでちょっと一工夫要りそうですね。

とりあえず、手順はだいたいわかりましたよっと。

オマケ(Docker)

Nu Html ValidatorとCSS Validatorを、Tomcatで動かすためのDockerfileを作成したので、貼っておきます。

先に注意点ですが、パッケージでインストールするTomcatを使用するため、「docker run」時に以下の設定を足しておかないと起動しません。

--cap-add SYS_PTRACE

Nu Html Validator。

FROM java:8

EXPOSE 8080

ENV VNU_VERSION 16.1.1

RUN apt-get update && \
    apt-get install -y tomcat8 unzip sudo && \
    cd /opt && \
    mkdir validator-nu && \
    cd validator-nu && \
    wget -q https://github.com/validator/validator/releases/download/${VNU_VERSION}/vnu.war_${VNU_VERSION}.zip && \
    unzip vnu.war_${VNU_VERSION}.zip && \
    rm -rf /var/lib/tomcat8/webapps/ROOT && \
    sudo -u tomcat8 cp dist/vnu.war /var/lib/tomcat8/webapps/ROOT.war

# Note.
# docker run --cap-add SYS_PTRACE
ENTRYPOINT service tomcat8 start && tailf /dev/null

CSS Validator。

FROM java:8

EXPOSE 8080

RUN apt-get update && \
    apt-get install -y tomcat8 ant git sudo && \
    cd /opt && \
    git clone https://github.com/w3c/css-validator && \
    cd css-validator && \
    ant war && \
    rm -rf /var/lib/tomcat8/webapps/ROOT && \
    sudo -u tomcat8 cp css-validator.war /var/lib/tomcat8/webapps/ROOT.war

# Note.
# docker run --cap-add SYS_PTRACE
ENTRYPOINT service tomcat8 start && tailf /dev/null