ホーム > WWWページ作成について > CSS ValidatorをWindows XPで動かす

CSS ValidatorをWindows XPで動かす


2009.1.31 高橋 誠

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

目次

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

 CSS Validatorのダウンロードkの指示により、CVSでダウンロードして、どこかのディレクトリたとえばC:\css-validatorにおきます。2009.1.21版で確認しています。TortoiseCVSを使用しました。

Javaのダウンロードと組込

 CSS ValidatorはJava 1.1以降を前提にしていますから、からJDK 6 update 11のページから、Windows(各国語)のJDKをダウンロードして組み込みます。
 どちらにせよ、自己解凍型でインストールは簡単です。
 バージョンアップはそう必要ありませんが、実施するときは前バージョンを削除してから組み込んだほうがいいようです。「アプリケーションの追加と削除」の前バージョンのエントリとかディレクトリが残ってしまいます。

ANTのダウンロードと組込

 コンパイルのためのツールです。Apache-ant-1.7.1をダウンロードしてインストールしました。

コンパイル

 コマンドラインの実行のためには、
C:\css-validator>ant
だけで、必要なライブラリを持ってきてくれます。勝手に持ってこられるのが不安とか、途中で止まったようなときには、C:\css-validator\libというフォルダをつくり、 をコピーしてからANTします。

コマンドラインでの実行

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

Jigsawのダウンロードと組込

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

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

  1. CSS Validatorのダウンロードの指示によりCVSでダウンロードして、C:\jigsaw\jigsaw\www\servlet\に置きます。
  2. C:\Jigsaw\classesにコンパイルに必要なモジュールをコピーします。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;..\classes\commons-collections-3.2.1.jar;..\classes\commons-lang-2.4.jar;..\classes\tagsoup-1.2.jar;..\classes\velocity-1.6.1.jar;
    java -classpath %CLASSPATH% org.w3c.jigsaw.Main -root ..\Jigsaw
    
  3. build.xmlを更新して、上記のjarファイルのありかをlibから/jigsaw/classesに変更して、コンパイルします。
    c:\jigsaw\jigsaw\WWW\servlet\css-validator\>ant jigsaw
    
  4. c:\jigsaw\script\jigsaw.batを実行してJigsawを起動します。
  5. c:\jigsaw\script\jigadmin.batを実行してJigAdminを起動します。ユーザIDとパスワードを入力するダイアログが出てきます。初期ユーザIDとパスワードはどちらもadminです。
  6. JigAdminでhttp-serverを選択します。
  7. servletの下のcss-validatorを選択して、右クリックして、Edit Resourceを選びます。
  8. Edit ResourceのダイアログでHTTPFrame(frame-0)を削除して、css-validatorを右クリックして、Add Frameを選びます。
  9. Add Frameの画面Add FrameのダイアログボックスでClass nameボックスにorg.w3c.jigsaw.servlet.ServletDirectoryFrameを選びokを押します。これで、ServletDirectoryFrame(frame-0)が追加されます。
  10. Edit Resourceを閉じて、css-validatorを右クリックしてAdd Resourceを選びます。
  11. Add Resourceの画面Add Resourceダイアログで、Class nameにorg.w3c.jigsaw.servlet.ServletWrapperをIdentifierとしてvalidatorを指定しokを押します。
  12. ここでできたvalidatorを右クリックして、Edit Resourceを選びます。
  13. Servlet Wrapper Frameの登録の画面Edit Resourceのダイアログで、Servlet Class fieldにはorg.w3c.css.servlet.CssValidatorと指定しcommitを押します。
  14. これで、http://127.0.0.1:8001/servlet/css-validator/validator?uri=http://www.w3c.orgとすると結果が表示されます。
  15. http://127.0.0.1:8001/servlet/css-validator/validator-uri.html.jaを表示させて、uri指定をボックスから行うこともできます。
  16. 自分の頁のローカルコピーをチェックしたいとき等、次のように呼び出すタグを並べたhtml文書を作っておくと便利です。
    <a href="http://127.0.0.1:8001/servlet/css-validator/validator?uri=http://localhost/hogehoge.html">hogehoge</a>
  17. 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を押します。
    5. Jigsawを再起動します。

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. 日本語のコメントがあるとエラーメッセージが出ます。CSSについても、httpレスポンスヘッダにcharasetパラメタがいるとのことです。

ダウンロード

 ここで作ったcss-validator以下をsite.zipにおいておきます。C:\Jigsaw\Jigsaw\WWW\servletの下に展開すればコンパイルしなくても動作するはずです。

参考文献


ホーム(x)