Another HTML-lint 導入ガイド
Another HTML-lint とは?
Another HTML-lint は、いしの k16 さん作の HTML 文法チェッカです。HTML 文書が DTD に従ってマーク付けされているかチェックできるのはもちろん、アクセシビリティやブラウザ実装との互換性の問題など、かなり細かい点までチェックすることができます。
非常に高機能なチェッカですが、嬉しいことに原則としてフリーです。ありがたく使わせていただきましょう。
※非営利目的の使用ならばフリーなのですが、営利目的の使用はフリーではないので注意してください。Web制作会社が業務に使う場合、パソコン教室で使う場合などが該当するそうです。その場合のライセンスは 15,000円です。
※非営利の個人はフリーで使えますが、作者にビールをおごることが推奨されています。:-)
Another HTML-lint の使い方概要
Another HTML-lint には、大きく分けて2種類の使い方があります。ゲートウェイ経由で使う方法と、直接スクリプトを実行する方法です。
ゲートウェイ経由で使う
本家のゲートウェイサーヴィス (openlab.ring.gr.jp)にアクセスし、入力フォームに URL や文書そのものを入れて submit するという方法です。インストール作業も何もなしに気軽に利用できるのがメリットです。インターネット上で公開されているものをチェックする場合はこれを使うと良いでしょう。
ただし、企業などで Web 制作に利用する場合、公開前の内容がインターネットを流れるのは危険です。そのような場合はローカルマシンやイントラネットでゲートウェイを動作させるか、あるいは後述の直接使う方法を利用しましょう。
直接スクリプトを実行する
Another HTML-lint のチェッカ本体は htmllint.pm という Perl スクリプトです。ゲートウェイではこれが CGI を通して呼ばれますが、CGI と関係なく動作させることも可能です。
htmllint.pm の動作には Perl5.004 以降が必要ですので、Perl がない場合は Perl のインストール作業も必要となります。インストール作業は少し面倒になりますが、一度入れてしまえばチェックは簡単に、かつ素早くできるようになります。さらに、マクロやバッチファイルと組み合わせて凝った使い方もできるようになります。
頻繁にチェックするなら、後者の使い方がお勧めです。ここでは後者の使い方を説明します。
Another HTML-lint を導入する
本家で紹介されているサイト (openlab.ring.gr.jp)などを参考に、各自で最も利用しやすい方法で導入していただければ良いのですが、初心者(?)向けに、私の導入方法を書いておきます。
Active Perl のインストール
Another HTML-lint の動作には Perl5 が必要ですので、まず Perl5 を導入します。私の場合は、Active Perl (aspn.activestate.com) を入れています。Windows2000 なら、msi ファイルをダウンロードしてきて右クリックして「インストール」を選び、後は適当に指示に従うだけです。
※Cygwin で Perl を使うという手もありますが、そのようなスキルのある人にはこの文書はそもそも不要でしょう。
Jcode.pm
Another HTML-lint は日本語の処理に Jcode.pm というモジュールを使っていますが、これは Perl5 の標準モジュールではありませんので、別途にインストールする必要があります。Perl5.8 以降では標準で Encode モジュールがついていますが、Another HTML-lint はあくまで Jcode を参照しますので、Jcode を入れておく必要があります。ちなみに最近の Jcode は、単なる Encode のラッパーになっているようです。
Active Perl には PPM というパッケージマネージャがついているのですが、どうも PPM 経由では古い Jcode しか入れられないようですので、CPAN 経由で入れるのが良いでしょう。コマンドラインから以下のようにして起動します。
perl -MCPAN -e shell
すると CPAN のプロンプトが表示されるので、まず CPAN 自体をアップデートするべく
install Bundle::CPAN
……とします。かなり時間がかかりますが、勝手にいろいろ入れてくれます。
※よくわからないうちにいろいろ入るのは、それはそれで怖い気がしますが、こだわらない方向で……。
それが終わったら、
reload cpan
install Jcode
とすると、Jcode.pm がインストールされます。すべてが終わったら
quit
として終了します。
※quit コマンドを打たないでコマンドプロンプトを閉じてしまったりすると、ロックファイルが残ってしまい、次から CPAN が動かなくなってしまいます。そのような場合は、Perl のインストールフォルダ (たいてい c:\Perl) に .lock というファイルができているはずなので、これを削除してやれば OK です。
Another HTML-lint のダウンロード
Perl と Jcode がインストールできたところで、いよいよ本体のダウンロードに入ります。Another HTML-lint: Download (openlab.ring.gr.jp) からファイルを取ってきます。
アーカイブは何種類かありますが、注意したいのは、圧縮形式が違うだけではないということです。それぞれ中身が違います。Windows の場合は htmllint.lzh をダウンロードする必要があります。
適当なフォルダを作って LZH ファイルを展開してください。以下、C:\Web\htmllint に展開されているものとして話を進めますが、展開場所が異なる場合は適宜読み替えてください。
バッチファイル作成
このままでも、コマンドプロンプトから perl c:\web\htmllint\htmllint ファイル名 などとすればチェックできますが、それでは面倒ですのでバッチファイルを作っておきます。以下のようなファイルを作ります。
@ECHO OFF IF %1.==. GOTO WARN IF EXIST %1\NUL GOTO DIR REM 以下は単一ファイルをチェックするときの指定 perl c:\web\htmllint\htmllint -d ak,ab,ct,nae,nc,dm,tb,fak -e bv,ost,de,oet,ul -stat c:\web\bat\stat.txt %1 %2 %3 %4 %5 %6 %7 %8 %9 > c:\web\bat\lint.txt GOTO END :DIR REM 以下はあるディレクトリ以下の全ファイルをチェックするときの指定 perl c:\web\htmllint\htmllint -d dac,dtc,cw,dt,uu,be,fak,nl,ct,nae,nc,dm,tb -e ost,oet,mx,bv -stat c:\web\bat\stat.txt %1 %2 %3 %4 %5 %6 %7 %8 %9 > c:\web\bat\lint.txt GOTO END :WARN perl c:\web\htmllint\htmllint -warnings > c:\web\bat\lint.txt perl c:\web\htmllint\htmllint -listwarnings > c:\web\bat\warn.txt :END start "c:\windows\notepad.exe" c:\web\bat\lint.txt
※-d -e オプションはチェック項目の指定です。私の趣味で上記のようにしていますが、お好みに合わせて適宜変更してください。設定ファイル htmllint.env で指定する事もできますが、ディレクトリを渡して大量ファイルをチェックするときには警告を抑制したかったりするので、私は上記のようにしています。
※ここでは作業ディレクトリを c:\web\bat としていますが、これまた適宜変更してください。
これに htmllint.bat とでも名付けて、お好きな場所 (htmllint と同じディレクトリや、バッチファイルを置いてあるディレクトリなどがお勧めです) に保存します。そうしたら、デスクトップにこのバッチファイルへのショートカットを作っておきます。
これで準備完了です。あとは、そのショートカットにファイルをドロップするだけでチェックできます。フォルダをドロップすると、フォルダ内の全てのファイルをチェックしてくれます。
バッチファイル内には perl を呼び出している指定が 2箇所ありますが、前者がファイルを渡されたとき、後者がフォルダを渡されたときの挙動となります。上記の例では、ディレクトリを渡してチェックするときに警告の数が少なくなるようにしてあります。
秀丸と連携させてみる
私は秀丸ユーザですので、チェック結果のテキストファイルも、チェックする HTML ファイルも秀丸で開いています。ここでは、秀丸と Another HTML-lint を効率的に連携させる方法についてメモしておきます。
ダイレクトタグジャンプ
前に挙げたバッチファイルを使ってチェックすると、チェック結果は lint.txt というファイルに出力されます。この内容はダイレクトタグジャンプに対応しています。秀丸で lint.txt を開いたら、エラーの表示されている行で F10 キーを押してみてください。これだけで、エラーのあるファイルのその行にジャンプすることが出来ます。これはびっくりするほど便利なので、是非活用してください。
これは秀丸に限らず、ダイレクトタグジャンプのできるテキストエディタであれば何でも利用可能です。
秀丸から lint する
秀丸で HTML を書いたり編集したりしていて詰まったときに、ちょっと現在のソースを lint してみたくなることがあるかもしれません。そんな時には秀丸のマクロで Another HTML-lint を使えるようにしておくと便利です。
上記の導入を行った上で、以下のような内容のテキストファイルを作ります。
run "perl c:\\web\\htmllint\\htmllint -d ak,ab,ct,nae,nc,dm,tb,fak -e bv,ost,de,oet,ul -stat c:\\web\\bat\\stat.txt " + "\x22" + filename + "\x22" + " > c:\\web\\bat\\lint.txt";
openfile "c:\\web\\bat\\lint.txt";
これを htmllint.mac というファイル名で保存し、秀丸のあるディレクトリ (たいていは "C:\Program Files\hidemaru\") に置きます。それから秀丸を起動し、[マクロ(M)] - [マクロ登録(E)...] を選択すると、「ファイル名」のプルダウンの中に htmllint.mac が追加されているはずです。これを選び、適当な名前をつけます。"HTML-lint" で良いでしょう。すると [マクロ(M)] メニューの中に [HTML-lint] という項目が追加されます。
あとは、[マクロ(M)] - [HTML-lint] を実行すると、現在編集中のソースを Another HTML-lint でチェックすることが出来ます。
さらに、ブラウザから使えるようにしたりする方法もありますが、そのようにしたい場合は、各解説サイト (openlab.ring.gr.jp)を適宜参照してください。
警告一覧
htmllint.pm 3.36 の警告一覧です。-d オプションや -e オプションの後ろには、下記の「警告名」もしくは「略称」を指定することができます。
| 種別 | 警告名 | 略称 | メッセージ | 
|---|---|---|---|
| over-limit-whines | エラーの数が XX個を超えたのでチェックを打ち切ります。 | ||
| cant-get-url | u | <TAG> の XX 属性の URI `XX` はインタネット上に存在しないかアクセスできません。XX | |
| required-doctype | qd | 最初の記述が DOCTYPE宣言ではありません。 | |
| prectrl-doctype | pcd | DOCTYPE宣言の前に何か制御文字が含まれています。 | |
| unknown-doctype | ud | 不明な DOCTYPE宣言です。XX | |
| doctype-case-mismatch | dcm | DOCTYPE宣言に指定されている公開識別子の大文字小文字が正しくありません。 | |
| unsupported-doctype | usd | XX は Another HTML-lint ではサポートされていない DOCTYPE宣言です。XX | |
| expired-doctype | xd | XX はすでに廃棄されたHTMLです。使わないようにしましょう。 | |
| obsoleted-doctype | od | XX はあまり薦められないHTMLです。XX を使いましょう。 | |
| doctype-mismatch | dm | 指定されている XX は DOCTYPE宣言と一致しません。DOCTYPE宣言を無視します。 | |
| misplaced-doctype | md | DOCTYPE宣言は文書の先頭でなければなりません。 | |
| lower-case-doctype | lcd | DOCTYPE宣言中の `XX` は小文字で書かなければなりません。 | |
| upper-case-doctype | ucd | DOCTYPE宣言中の XX は大文字で書かなければなりません。 | |
| empty-systemid | esi | DOCTYPE宣言にはシステム識別子が必要です。 | |
| illegal-systemid | isi | DOCTYPE宣言に指定されているシステム識別子が正しくありません。 | |
| systemid-case-mismatch | sicm | DOCTYPE宣言に指定されているシステム識別子の大文字小文字が正しくありません。 | |
| ignore-declaration | id | SGML宣言や DTD宣言などと思われる <XX ~> は無視します。 | |
| marked-section | mks | マーク区間 <![XX[ ~ ]]> は、多くのブラウザは理解できません。 | |
| badstr-in-marked-section | bsmk | マーク区間中に `XX` を書くことはできません。 | |
| unclosed-marked-section | ucmk | XX行目のマーク区間 <