CSS ValidatorをWindows 2000で動かす


2004.11.26 高橋　誠
　Another HTML-lintでチェックしていると、「スタイルシートを使いましょう。」でCSSによる記述がどんどん増えていきます。ここでCSSについて同様なチェッカーを探したのですが、国内には見当たらず、CSS2のご本家W3Cが提供している、CSS Validatorが、同じところから提供しているHTMLチェッカーと違い、とりあえず日本語のHTML文書でも動作するようなので、使い方をご報告します。
　なお、動かすに当たって、さんからご教示をいただきました。

目次

CSS Validatorのダウンロードと組込

　CSS Validatorのダウンロードからvalidator.zipをダウンロードして、どこかのディレクトリたとえばC:\css-validatorに解凍せずにそのままおきます。CSS Validator version 2.0で確認しています。
　現在、これがCVSに移行したのですが、最新版を取り出してもうまく動きません。site.zipのコピーに前のバージョンをおいておきます。この中に、validator.zipもあります。

Javaのダウンロードと組込

　CSS VAlidatorはJava 1.1以降を前提にしていますから、からJ2SE™ V 1.4.2_06のダウンロードのページから、Windows（各国語）のJREをダウンロードして組み込みます。Windows（各国語）のSDKでも同じですがJREならば15MBちょっとなのにSDKは49MBを越えています。Java関連の雑誌にもCD-ROMが付いているようです。
　どちらにせよ、自己解凍型でインストールは簡単です。
　バージョンアップはそう必要ありませんが、実施するときは前バージョンを削除してから組み込んだほうがいいようです。「アプリケーションの追加と削除」の前バージョンのエントリとかディレクトリが残ってしまいます。

コマンドラインでの実行

  1. 　以上の準備をするとコマンドラインからのCSS Validatorの実行ができます（スタート）−（プログラム）−（アクセサリ）−（コマンドプロンプト）で、いわゆるdos窓を出して、validator.zipを置いた場所をCLASSPATHに設定してから、Javaを呼び出すとCSSのチェックをしてくれます。 
    C:>set CLASSPATH=c:\css-validator\validator.zip
C:>Java org.w3c.css.css.StyleSheetCom http://www.w3.org/
    　ここで、最後の行には、 
    C:\css-validator>Java org.w3c.css.css.StyleSheetCom c:\hobbit\index.html
    のようにファイル名を指定することもできます。
  2. 毎回これだけを入力するのは大変ですから、 
    set classpath=c:\css-validator\validator.zip
Java org.w3c.css.css.StyleSheetCom %1
pause
    というファイルを例えばcsschk.batというような名前で作っておくと便利です。
  3. さらに、これをお好みエディタfor IE5を使って、登録しておくとInternet Explorerの編集ボタンから、チェックが起動できてます。実行コマンドのところにcsschk.batを直接指定します。

Jigsawのダウンロードと組込

　コマンドラインからの実行よりちょっと情報が多くなるので、Jigsawと連動して動作させて見ました。また、エラーメッセージが日本語になります。
  1. Jigsaw release 2.2.4をダウンロードして例えば、c:\に解凍します。ここで、c:\jigsaw\script\install.batを実行します。
  2. c:\jigsaw\script\jigsaw.batを実行するとJigsawが開始されます。ブラウザでhttp://127.0.0.1:8001を参照して、Jigsaw Overviewという頁が見えれば成功です。

JSWDKのダウンロードと組込

  1. CSS ValidatorはJigsawのservletとして動作するので、How do I install a servlet ?によると、Servlet Development Kitを組み込む必要がありますが、特に入れなくても動作するようです。

CSS Validator siteのダウンロードと組込

  1. CSS Validatorのダウンロードからsite.zipをダウンロードして、C:\jigsaw\jigsaw\www\servlet\に解凍します。しばらく、ダウンロードができなくなっているので、site.zipのコピーを置いておきます。日本語の頁は文字化けしないように直して、日本語と英語以外の頁は削除しました。
  2. site.zipを解凍すると、validator.zipが追加されます。これをjigsaw.batのCLASSPATHの定義に追加します。追加後のjigsaw.batは次のとおりです。 
    set CLASSPATH=Jigsaw;..\classes\jigsaw.jar;..\classes\xp.jar;..\classes\sax.jar;..\classes\servlet.jar;..\classes\xerces.jar;..\classes\Tidy.jar;..\jigsaw\www\servlet\css-validator\validator.zip;
java -classpath %CLASSPATH% org.w3c.jigsaw.Main -root ..\Jigsaw
  3. c:\jigsaw\script\jigsaw.batを実行してJigsawを起動します。
  4. c:\jigsaw\script\jigadmin.batを実行してJigAdminを起動します。ユーザIDとパスワードを入力するダイアログが出てきます。初期ユーザIDとパスワードはどちらもadminです。
  5. JigAdminでhttp-serverを選択します。
  6. servletの下のcss-validatorを選択して、右クリックして、Edit Resourceを選びます。
  7. Edit ResourceのダイアログでHTTPFrame(frame-0)を削除して、css-validatorを右クリックして、Add Frameを選びます。
  8. Add Frameの画面Add FrameのダイアログボックスでClass nameボックスにorg.w3c.jigsaw.servlet.ServletDirectoryFrameを選びokを押します。これで、ServletDirectoryFrame(frame-0)が追加されます。
  9. Edit Resourceを閉じて、css-validatorを右クリックしてAdd Resourceを選びます。
  10. Add Resourceの画面Add Resourceダイアログで、Class nameにorg.w3c.jigsaw.servlet.ServletWrapperをIdentifierとしてvalidatorを指定しokを押します。
  11. ここでできたvalidatorを右クリックして、Edit Resourceを選びます。
  12. Servlet Wrapper Frameの登録の画面Edit Resourceのダイアログで、Servlet Class fieldにはorg.w3c.css.servlet.CssValidatorと指定しcommitを押します。
  13. これで、http://127.0.0.1:8001/servlet/css-validator/validator?uri=http://www.w3c.orgとすると結果が表示されます。
  14. http://127.0.0.1:8001/servlet/css-validator/validator-uri.html.jaを表示させて、uri指定をボックスから行うこともできます。
  15. 自分の頁のローカルコピーをチェックしたいとき等、次のように呼び出すタグを並べたhtml文書を作っておくと便利です。
    <a href="http://127.0.0.1:8001/servlet/css-validator/validator?uri=http://localhost/hogehoge.html">hogehoge</a>
  16. Jigsawの停止のためには、次のバッチファイルでJigKillを呼出します。 
    set CLASSPATH=Jigsaw;..\classes\jigsaw.jar;..\classes\xp.jar;..\classes\sax.jar;..\classes\servlet.jar;..d:\css;.
java org.w3c.jigsaw.admin.JigKill -u admin -p admin http://127.0.0.1:8009/

Jigsawの追加設定

　ローカルに使う分にはあまり関係ないのですが、Jigsawの機能を少し見つけたのでご参考まで。
  1. 言語によるファイルの選択が出来ます。例えば、validator.html.jaとvalidator.html.enを使い分けたい場合、
    1. JigAdminでhttp-serverを選択します。
    2. 代表の名前をvalidator.htmlとして追加するために、servletの下のcss-validatorを選択して、右クリックして、Add Resourceを選びます。
    3. Add Resourceダイアログで、Class nameにorg.w3c.tools.resources.FramedResourceをIdentifierとしてvalidator.htmlを指定しokを押します。
    4. ここでできたvalidator.htmlを右クリックして、Edit Resourceを選びます。
    5. Edit Resourceのダイアログ、validator.htmlを右クリックして、Add Frameを選びます。
    6. Add FrameのダイアログボックスでClass nameボックスにorg.w3c.jigsaw.frames.NegotiatedFrameを選びokを押します。これで、NegotiatedFrame(frame-0)が追加されます。
    7. 追加された、NegotiatedFrame(frame-0)を選択すると、一番下にValiantsという箱が出てくるのでその右のeditをクリックします。
    8. クリックしてでてくるダイアログのchoiceに、validator.html.jaとか、validator.html.enを入力して右から左矢印をクリックするとValiantsに追加されます。言語は特に指定しなくてもサフィクスからデフォルトにしてくれるようです。
    9. http://127.0.0.1:8001/servlet/css-validator/validator.htmlを呼び出すと、validator.html.jaが表示されます。
    10. Internet Explorerだと、(ツール)-(インターネットオプション)の(全般)の中の(言語)で(英語)を先頭にすると、上記の場合、validator.html.enが表示されます。
  2. ディレクトリの代表文書の設定：http://127.0.0.1:8001/servlet/css-validator/を呼び出したときに、その下のvalidator.htmlを表示させることが出来ます。
    1. JigAdminでhttp-serverを選択します。
    2. servletの下のcss-validatorを選択して、右クリックして、Edit Resourceを選びます。
    3. Edit Resourceのダイアログで、ServletDirectotyFrame(frame-0)を選びます。
    4. indexの箱にvalidator.htmlを書き込み、Commitを押します。

Internet Explorerとの連携

　Internet Explorerでローカルに見栄えを確認してから、文法チェックを起動する方法をいくつか紹介します。
右クリックからの起動
　うりゅそふとさんのIE MenuExtで登録すると、Internet Explorerで表示している画面上の右クリックのときのメニューを追加できます。これによって、もう一つのInternet Explorerを起動して、htmllint.htmlを呼びだす方法を、緋さんが紹介されています。これを少し変更して、CSS Validatorの起動ができるようにしてみました。
  1. AN HTTPDで、チェックしたいhtmlファイルの入っているディレクトリ、たとえばc:\hobbitを/hobbitという仮想ディレクトリに対応させます。
  2. cssvalid.zipを解凍して、cssuri.htmlを取り出し、ドライブレターC:をソースファイルのある場所に修正して、c:\htmllintの下に保存します。Windows 2000で、SP2を適用していないと、不良のためvar uri = uri.replace(/html#.+/,"html");が動作しないので、SP2を適用するかこの行を削除してください。 
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang=en>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<META HTTP-EQUIV="Content-Script-Type" content="text/javascript">
<title>CSS Validator</title>
<LINK REL="contents" HREF="./index.html">
</head>
<body>
<script type="text/JavaScript" defer><!--
        var uri = external.menuArguments.location.href;
        var uri = uri.replace("file:///C:","http://localhost");
        var uri = uri.toLowerCase();
        var uri = uri.replace(/html#.+/,"html");
        var uri = "http://localhost:8001/servlet/css-validator/validator?uri=" +  uri + ";warning=2";
        window.open (uri, "CSSValidator");
--></script>
</body>
</html>
  3. IE MenuExtを起動して、
    • 名前(N)：CSS Validator(&C)
    • ファイル(F)：C:\htmllint\cssuri.html
    と指定します。「アイテムの表示方法」は「通常時」をチェックします。
　これで、参照中のローカルファイルの上で右クリックするとメニューにCSS Validator(C)が追加されているはずです。これを選ぶと参照中の頁がチェックでき、日本語のエラーメッセージが出ます。
「お気に入り」からの起動
　やはり緋さんが紹介されています「お気に入り」からの起動手順を少し変えて、リンクのチェックができるようにしてみました。
  1. 適当な頁をCSS Validatorという名前で「お気に入り」に追加します。
  2. 「お気に入りの整理」で上で作ったCSS Validatorを右クリックして「プロパティ」を選びます。
  3. URLに
    javascript: var uri = location.href; var uri = uri.replace("file:C:", "http://localhost"); var uri = uri.toLowerCase(); var uri = "http://localhost:8001/servlet/css-validator/validator?uri=" + uri + ";warning=2"; window.open (uri, "CSSValidator"); eval();
    を指定します。OKを押すと「プロトコル"javascript"には登録されたプログラムはありません。この対象を維持しますか?」と聞いてきますが、「はい」といいます。
　これで、「お気に入り」でCSS Validatorを選ぶと参照中のローカルファイルに対応するローカルサーバの内容をチェックしてくれます。Windows 2000のSP2以降では、次の「Netscape 6.0との連携」で紹介したスクリプトでも動作しました。

Netscape 6.0との連携

Bookmarkからの起動
　緋さんが紹介されていますお気に入りからの起動手順で、Netscape 6.0でもチェックができました。上記のIE対応のスクリプトでも動きますが、ページ内のタグに飛んだとき等#の後に名称を指定してるとオプション指定が無効になるのでこれを削除するコーディングを追加してみました。Windows 2000 SP1以前のIEでは、正規表現では使えませんでしたが、SP2ではこれも使えました。
  1. (Bookmark)-(Manage Bookmaks)でManage Bookmarksを呼び出します。
  2. Manage Bookmarksで(File)-(New Bookmark)を呼び出し、URLに
    javascript: var uri = location.href; var uri = uri.replace("file:///C:", "http://localhost"); var uri = uri.toLowerCase(); var uri = uri.replace(/html#.+/,"html"); var uri = "http://localhost:8001/servlet/css-validator/validator?uri=" + uri + ";warning=2"; window.open (uri, "CSSValidator"); eval();
    を指定します。
  3. name:にCSS Validatorなど分かりやすい名前を付けます。
　これで、BookmarkでCSS Validatorを選ぶと参照中のローカルファイルに対応するローカルサーバの内容をチェックしてくれます。

Opera 6.0との連携

Bookmarkからの起動
　himuraさんが紹介されていますお気に入りからの起動手順で、Opera 6.0でもチェックができました。ローカルファイルの参照の場合のuriがちょっと違います。
  1. (Bookmark)-(Add page here)でBookmark propertiesを呼び出します。Addressに
    javascript: var uri = location.href; var uri = uri.replace("file://localhost/C:", "http://localhost"); var uri = uri.toLowerCase(); var uri = uri.replace(/html#.+/,"html"); var uri = "http://localhost:8001/servlet/css-validator/validator?uri=" + uri + ";warning=2"; window.open (uri, "CSSValidator"); eval();
    を指定します。
  2. Title:にCSS Validatorなど分かりやすい名前を付けます。
　これで、BookmarkでCSS Validatorを選ぶと参照中のローカルファイルに対応するローカルサーバの内容をチェックしてくれます。もちろんローカルファイルを見ていないときに起動するとそのページをチェックします。

秀丸エディタとの連携

　やはり緋さんが紹介されています秀丸エディタからのマクロによる起動手順を少し変えて、リンクのチェックができるようにしてみました。
  1. cssvalid.zipをダウンロードして解凍して、次の内容のcssvalid.macを取り出し、秀丸エディタと同一のフォルダに置きます。$baseの値はhtmlの格納されている場所に従い修正します。また、CSS Validatorの起動オプションもお好みに合わせ修正します。 
    $msie = "C:\\Program Files\\Internet Explorer\\IEXPLORE.EXE";
$lint = " http://localhost:8001/servlet/css-validator/validator?uri=";
$file = filename2;
$base = "C:\\";

#off = strstr($file, $base);

if (#off != -1) {
  #rlen = strlen($file) - strlen($base);
  $file = rightstr($file, #rlen);
  #off = strstr($file, "\\");
  while (#off != -1) {
    $file = leftstr($file, #off) + "/" + rightstr($file, #rlen - #off - 1);
    #off = strstr($file, "\\");
  }
  $file = "http://localhost/" + $file;
}
run $msie + $lint + $file + ";warning=2";
endmacro;
  2. 秀丸の（マクロ）−（マクロの登録）でCSS Validator等の分かりやすい名前を付けます。
  3. 秀丸の（マクロ）のプルダウンメニューにCSS Validatorが追加されているのでこれを指定することで、Internet Explorerを呼び出しチェック結果が表示できます。

おまけ

  1. HTMLファイルの一部を次のとおり日本語化しました。cssvalid.zipをダウンロードして解凍して、validator-ja.zipを取り出し、解凍するときJigsawをインストールしたドライブを指定してください。W3Cにも送ったのですが、エンコードをいじって、metaタグの訂正を忘れたので文字化けになっています。それを指摘もしたのですが・・・
  2. これを組み込んだあと呼び出すときは、http://127.0.0.1:8001/servlet/css-validator/validator-uri.html.jaと指定してください。

CSS Validatorの改造

　肝心のソースの日本語の表示は出来ないのですが、ちょっとした改造というかモジュールの整理をしてみました。

注意事項

  1. 2000/7/26版から日本語のメッセージになりました。
  2. シフトJIS等2バイト文字があるhtmlソースでもうまく処理してくれるのですが、結果の表示に出て来るcssソースの漢字はすべて文字化けになります。入力時にUnicodeに変換できればいいはずなんですが、どこをいじればいいのか分かりません。
  3. 取り込むファイルがないときはエラーになりますが、classの未定義はエラーになりませんでした。
  4. Jigsaw WebDAV Package (based on 2.1.2)を使うと下記のエラーメッセージが出ましたが、Jigsaw 2.2.0で訂正されたようです。
    Can't write ([5/Feb/2001:06:09:32 -9] validator: init) to logfile [\auto\ender\u\ender\0\w3c\bmahe\Jigsaw\DAVDistrib\Jigsaw\Jigsaw\logs\servlets] : \auto\ender\u\ender\0\w3c\bmahe\Jigsaw\DAVDistrib\Jigsaw\Jigsaw\logs\servlets (指定されたパスが見つかりません。)

エラーメッセージ

　あまり難しいCSSはつかっていないのですが、これまで遭遇したメッセージの解説です。
URI : エラーとなったCSSの存在する場所
行番号: nn コンテキスト : クラス名
文法解析エラーが発生しました - color=silver,direction=45)
　「IE独自仕様のfilterなんか知らないよ」ということのようです。
URI : エラーとなったCSSの存在する場所
行番号: nn コンテキスト : .nobdr 次のプロパティが正しくありません : border
値が多すぎるか、もしくは値が解析できません : 0 0 0 0
　.nobdr {border: 0em 0em 0em 0em}
なんて書いていたら、「borderのオペランドは一つだよ」と怒られました。

警告メッセージ

行番号: n Level : 1 空白文字を含むフォントファミリー名は引用符で囲む必要があります。引用符を省略した場合、名前の前後の空白文字は無視され、また名前の途中に含まれる連続した空白文字は全て一つの空白文字に変換されます : クラス名
　Times New Romanのような空白を含むフォント名は" "で囲みましょう。そうでないと前後の空白は無視されて、途中の空白は一つの空白とみなされます。
行番号: n Level : 2 一般フォントファミリー名(generic font family)を最後の選択肢として付け加えておく事を推奨します : ＜クラス名＞
　Times New Romanのようなシステム固有のフォント名だけでなく、serif、sans-serif等の総称ファミリ名も指定しておくと、それぞれのシステムで適切なフォントが選ばれることになっています。実装は追いついていないようですが。
行番号: n Level : 1 指定された全面色(color)に対応する背景色(background-color)が指定されていません : ＜クラス名＞
　background-colorで背景色をしていしているのにcolorで文字の色を指定していません。ユーザスタイルシートの指定によっては、文字が見にくくなります。colorだけ指定しても同様のメッセージが出ます。
行番号: n Level : 1 二つのコンテキスト＜クラス名1＞と＜クラス名2＞で、同じ色が前面色(color) と背景色 (background-color) に使われています
　クラス1とクラス2のcolorとbackground-colorは同一です。間違えて同じにしていませんか？
行番号: n Level : 1 ＜プロパティ＞が再定義されています :＜クラス名＞
　同じクラスに二回以上プロパティを指定しています。main.cssで決めたプロパティを取り込んでいるhtmlで一部だけ変更するように意識してこれをやることもあります。

参考文献

ホーム(x)
ValueClick掲載サイト ValueClickの掲載サイトになって、広告収入をゲットしよう！