Dockerを利用して自前のマークアップバリデーターを数分で立ち上げる

WCAG 2.0達成基準 4.1.1を満たしている事を確認するためにも、ウェブページをバリデートすることは重要な作業の一つと考えています。

ただ、HTML5でマークアップを行いDreamweaverHTML Validator for Firefox and Mozillaなどでバリデートすると、作業中のソースがW3Cのオンラインサービスに送信されるので、特に未公開コンテンツの場合はちょっと...となってしまうかもしれません。また、テストサーバーにIP制限をかけていたり、会社からThe W3C Markup Validation Serviceを利用する事ができない(なぜ?)、といったこともあります。

以前W3C Markup ValidatorとValidator.nuをローカル環境(Mac)にインストールという記事も書きましたが、これも慣れていないと結構敷居の高い作業です。また、僕のように諸事情で作業マシンが変わってしまうとまたやり直しです...。

そんな中、偶然Docker Hub Registrymagnetikonline / html5validatorを見つけました。W3C Markup ValidatorValidator.nuが含まれており、素早く自前のマークアップバリデータを立てる事ができます。

ひとまず手軽に試す事ができるAmazon EC2で動作させてみました。

作業手順

  1. EC2インスタンスのセットアップ
  2. yum install -y dockerでDockerをインストール
  3. service docker startでDockerを起動
  4. docker pull magnetikonline/html5validatorを実行してイメージをダウンロード
  5. docker run -dp 80:80 magnetikonline/html5validatorを実行してhtml5validatorコンテナイメージからコンテナを起動

以上、10分程で完了してしまいます。Dockerさえ入っていれば簡単で便利すぎるという印象です。EC2インスタンスに割り当てたElastic IPにアクセスすれば、下記のようにマークアップバリデーターが表示されます。 html5validatorコンテナイメージを利用して立ち上げたマークアップバリデーターの表示例

MacへのDockerのインストール〜バリデーターの立ち上げ

実はDockerを触り始めたのはごく最近で、まだMacには環境を準備していませんでした。Installing Docker on Mac OS Xに解説があったので試してみたところ、Macでも簡単にDockerが利用できるようになりました(以前は面倒だったようです)。

  1. Releases · boot2docker/osx-installerから.pkgをダウンロードしてインストール
  2. アプリケーションの中のBoot2Dockerを実行(僕はコマンドラインで作業をしました)
  3. ターミナルにexport DOCKER_HOST=tcp://192.168.59.103:2375のような表示が出るので、IPアドレス(192.168.59.103)を控えておく。
  4. docker pull magnetikonline/html5validatorを実行してイメージをダウンロード
  5. docker run -dp 80:80 magnetikonline/html5validatorを実行してhtml5validatorコンテナイメージからコンテナを起動
  6. 3.で控えたIPアドレスにブラウザでアクセス

参考:複数ページを一括でチェックするには

以前オリジナルテンプレート・ビルド環境2013年版の作成メモで触れていますが、自作のgrunt-simple-xmlsitemapでサイトマップを作り、Site Validatorを使ってチェックしています。

※Site Validatorでalternate validation serverの設定が必要です。ENV['W3C_MARKUP_VALIDATOR_URI'] = 'http://example.com/validator'と書けばよいらしいのですが、実はRubyに詳しくなくてどこに書けばよいか分からず、gemでインストールされたファイルを直接書き換えてしまっています(汗)。→2014年9月7日に解決しました

参考:気になるツール

先日gulp.jsのプラグインを眺めていると、gulp-htmlhintを見つけました。これも検証に利用できるのでしょうか。要研究。

この記事のタグ