CSS ValidatorをWindows XPで動かす

目次

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

Javaのダウンロードと組込

ANTのダウンロードと組込

コンパイル

C:\css-validator>ant

• JigsawのJigsaw.jar。
• commons-collections-3.2.1のcommons-collections-3.2.1.jar。
• commons-lang-2.4のcommons-lang-2.4.jar。
• velocity-1.6.1のvelocity-1.6.1.jar
• Xerces-J-bin.2.9.1のxercesImpl.jarとxml-apis.jar

コマンドラインでの実行

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のダウンロードと組込

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のダイアログボックスでClass nameボックスにorg.w3c.jigsaw.servlet.ServletDirectoryFrameを選びokを押します。これで、ServletDirectoryFrame(frame-0)が追加されます。
10. Edit Resourceを閉じて、css-validatorを右クリックしてAdd Resourceを選びます。
11. Add Resourceダイアログで、Class nameにorg.w3c.jigsaw.servlet.ServletWrapperをIdentifierとしてvalidatorを指定しokを押します。
12. ここでできたvalidatorを右クリックして、Edit Resourceを選びます。
13. 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の追加設定

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との連携

右クリックからの起動

　うりゅそふとさんの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パラメタがいるとのことです。

ダウンロード

参考文献

• Cascading Style Sheets, level 2 CSS2 Specification(W3C)Kazuteru OKAHASHI訳 本家W3CのCSSと邦訳です。
• 本家W3CのCSS Validatorです。
• Javaを使って動作するWWWサーバJigsawです。
• 平山 宗平さんのUsed Another HTML-lintのIntenet Explorerから起動するのは便利です。アイデアを使わせていただきました。
• 緋さんのAnother HTML-lint の導入及び UserAgent との連携はテキストでなくWWW頁になるので便利です。アイデアを使わせていただきました。