Wrong HTML

Home > Tidyのオプション設定ソフト

準備

HTML Tidy

まずはTidyがないとどうしようもないので、設定にてTidyの場所を指定してください。Tidyによって整理された文書を日頃使っているエディタで開きたい時はエディタの場所も指定してください。

Internet ExplorerとOpera

TidyConfはInternet ExplorerとOpera(7以降)の右クリックから呼び出せるようにできますので、この機能を利用する時は「組み込み」ボタンを押すことで右クリックで呼び出せるようになります。設定画面5

CSS Validator

CSS Validatorを使用する場合は「CSS ValidatorをWindows 98/2000で動かす」から「site.zip」をダウンロードし、解凍後、CLASSPATHを設定する必要があります。TidyConfはこのCLASSPATHが設定されているものとして動作します。

Win9x系の方はルートフォルダにある「autoexec.bat」へ「set classpath=validator.zipの場所」を追加してください。この時、フォルダ名などにスペースが含まれる場合は「set classpath="c:\css validator\validator.zip"」のように「validator.zip」までのパスを「"」で囲むか、ショートファイルネームを使用してください。また、この作業の前に「autoexec.bat」のバックアップを取っておいたほうがいいかもしれません。

NT系の方はコントロールパネルから「システム」を開いて表示された「システムのプロパティ」から「詳細設定（もしくは詳細）」タブを選択、「環境変数」を押してください。「環境変数」ダイアログが表示されたらユーザー毎かシステム全体か、がありますが、これはユーザーの環境にもよるのでどちらかの「新規」を押し、あとは変数名に「CLASSPATH」、変数値に「validator.zip」の場所を入力すればOKです。

あとは、Javaをインストールしていない方はJRE(Java 2 Runtime Environment)をダウンロードしてセットアップしてください。リンク先の「J2SE v 1.4.1_04 のダウンロード」から「Windows (各国語、米国語を含む)」、のJREです。

設定が終わったらパソコンを再起動させましょう。この設定は一度行えばOKです。

使用法

設定画面

設定画面1、設定画面2、設定画面3、設定画面4, 5, 6

ツールバー

1. HTML Tidyの実行
2. HTML Tidyフォルダ一括チェック実行
3. CSS Validator実行(ローカル)
4. リンクチェック
5. 未使用ファイル検索
6. Internet Explorerで表示しているHTMLのチェック
7. Operaで表示しているHTMLのチェック
8. Mozillaで表示しているHTMLのチェック
9. Netscape Communicatorで表示しているHTMLのチェック
10. 色のチェック
11. 画像変換
12. テーブルの線形化
13. オンラインの各Validatorへアップロード
14. URLを指定して実行
15. 設定
16. フォルダ一括、リンクチェック停止
17. 結果リストのクリア

TidyConfの設定

エディタの場所

HTML Tidyによって整理された文書を開くエディタを指定します。

HTML Tidyの場所

HTML Tidyがある場所を指定します。

エディタ起動オプション

指定したエディタにファイルを開いて指定した行(桁)へキャレットを移動させるオプションがある場合は、HTML TidyとCSS Validatorの結果リストをダブルクリックすることで、エラー、警告の位置でファイルを開くことができます。

エディタによってオプション文字列や指定法が異なるのでエディタのヘルプなどを参考にしながら設定してください。自動設定ではいくつか(現在３つ)のエディタに合わせた設定が自動で行われます。

出力

タグジャンプ用エラー出力を行う

指定したエディタがタグジャンプに対応している場合、HTML TidyとCSS Validatorのエラー、警告の出力をエディタに渡して開かせます。後はエディタ側でタグジャンプのための操作を行うことで、指定位置へ移動します。

TidyConfでもエラー表示を行う

タグジャンプ用のエラー出力をした際にTidyConf側でもリスト表示を行います。エディタとTidyConfの両方に表示されるのが嫌な場合はチェックを外してください。

Tidyによる整形ファイルをエディタに渡す

HTML Tidyがきれいにマークアップし直したHTML文書をエディタに渡すかどうか設定します。エディタで開きたくない場合はチェックを外してください。この設定はHTML Tidyの"Markup"オプションと連動しているのでどちらでも同じ動作となります。

Tidyに上書きされたファイルをエディタに渡す

HTML Tidyの設定で"整形ファイルで上書き(write-back)"を有効にした場合に書き換えられたファイルをエディタで開くかどうか設定します。

タグジャンプ用ファイル、整形ファイルの名前

出力される各ファイルの名前を指定します。整形ファイルの拡張子をHTMLファイルのものにすることで、エディタで編集しやすくなるかもしれません。

未使用ファイルの検索

検索しないファイルの拡張子をカンマで区切って指定してください。

上書き時のバックアップ

ファイルのバックアップを行う

"整形ファイルで上書き(write-back)"オプションを有効にしたときに元ファイルのバックアップを行うかどうか設定します。

バックアップファイルを上書きする

バックアップファイルを上書きするか設定します。チェックを外した場合はファイル名に重複しない番号が付いたファイルが作成されます。(例: index2.backup)

バックアップファイルの拡張子

バックアップ用ファイルの拡張子を指定します。

ブラウザ

Internet ExprorerとOperaの右クリックメニューへTidyConfを起動するメニュー項目を追加、削除を行います。

"ブラウザで開く"はTidyConfがブラウザから呼び出されたときに結果をブラウザで開くかどうか指定します。

ショートカットキー

TidyConfはショートカットキーを自由に設定することができます。設定を変更したい動作をリスト中から選択、ダブルクリックで設定ダイアログが開くので、好きなキーを割り当ててください。重複チェックなどは行わないので注意してください。

起動時のタブ表示

起動時に作成するタブを選択します。TidyConfの起動にストレスを感じない環境なら有効にしてもいいかもしれません。あまり意味のない項目ですね・・・。

フォルダ一括

サブフォルダも含める

HTMLファイルの検索をサブフォルダまで行うかどうか選択してください。

HTMLファイルの検索だけ行う

検索されたファイルを全て一気にHTML Tidyで検証せずに、結果用のコンボボックスから選択されたときのみにします。チェックを入れたほうが軽いと思います。

リンクチェック

分割処理を行わない。

チェックするリンク項目を2分割して同時に処理しないようにします。チェック完了までに時間がかかりますが動作はいくらか軽くなります。

エラーだけ表示

リンクチェック終了後にリストに表示される結果をエラー箇所だけにします。

ローカルファイルのみ

リンクチェックをローカルファイルのみ行います。

結果リストの出力

タグジャンプ用と違って単純なリストの出力です。このオプションは"タグジャンプ用エラー出力を行う"より優先されますが、デフォルトではこの出力は行わないようにしてあるので設定しなければ、今までタグジャンプ用の出力を行っていた場合でも影響はないと思います。

TimeOutまでの時間

リンクチェック時に時間切れとなる時間をミリ秒で指定してください。この時間が過ぎると結果に"TimeOut"と表示されます。

画像変換

変換する画像をオリジナルサイズのまま変換するか、縦もしくは横のどちらかが指定サイズ以下になるまで縮小してから変換するかの設定です。オリジナルのままだと環境によっては恐ろしく時間がかかります。

JPEG

変換した画像をJPEGとして保存する時の設定です。

HTML Tidyの設定

Tidyを使用してHTMLをチェックする場合は、設定で各オプションを決める必要がありますのでTidyでよく使いそうなオプションを参考に設定してください。

ブラウザとの連携

ブラウザからURLを取得してチェックする場合はもちろんブラウザが起動していないといけません。この時チェックするファイルはローカルになくても取得してきてチェックできます。

各Validatorへ送る

実行画面

オンラインで利用できる、W3C Markup Validator、Another HTML Lint、WDG HTML Validator、CSS Validatorへローカルファイルをアップロードしてチェックできます。ファイルを選択後、しばらくすると結果が表示されます。

設定画面ではオンラインと同様の設定ができますので、各Validatorのサイトなどで設定値を確認して設定してください。

色のチェック

色の明度差と色の差異チェックは前景色と背景色を選ぶだけでその差を数値で表示します。この数値の算出にはTechniques For Accessibility Evaluation And Repair ToolsのCheckpoint 2.2を参考にしています。明度差では125以上、色の差異は500以上の数値を基準に色の組み合わせを考えてみてください。

第一、第二、第三色盲の方の見え方に近い色で選択された色を表示することもできるので、これも参考にしてみてください。

背景、前景のどちらかの「クリック位置の色」ボタンを押した後でモニター上の任意の場所をクリックすると、クリックした場所の色を取得できます。この際、「メインウィンドウを最小化」にチェックが入っていると、TidyConfのメインウィンドウが最小化されますのでクリックしやすいと思います。

画像変換

また、ダイアログで選択された画像ファイルをグレイスケールと第一、第二、第三色盲の方の見え方に近い色で変換して表示するものです。画像の配色チェックなどにご利用ください。グレイスケール以外の変換は少し時間がかかります。変換した画像は右クリックメニューからビットマップ、Jpegとして保存できます。Jpegの圧縮率などは設定ダイアログから調整してください。

HTMLファイルのイメージ変換

これはHTMLをInternet Explorerで表示したときのイメージを変換します。

ダイアログでHTMLファイルを選択した場合は、まずサイズを指定するウィンドウが開きますので、正しいサイズを測るために"画像サイズ取得"ボタンを押してください。

"画像のサイズ"に表示してあるHTMLのサイズが表示されます。これはウィンドウサイズを変更すると変更されます。このときの画像のサイズは表示領域ではなく、HTML全体のものです。この大きさを参考にしながら"縮小する"か"画像を切り取る"か選択してください。縮小する場合は縦と横のサイズ差が大きい場合は短いほうが小さくなりすぎて見にくくなるので注意してください。切り取りのほうは指定サイズで画像を切り抜いてから変換します。どちらにしてもPCのパワーと相談しながら指定してください。"OK"を押すと変換されます。

IEのスクロールバーが画像に入ってたり、なかったりするのはご愛嬌ということで勘弁してください(汗

テーブルの線形化

実行画面

指定されたHTML文書中のTable要素のセルを縦に並べて表示します。これによって音声ブラウザで読まれる順番でテーブルの内容を確認できます。画像は表示されずAlt属性の値が表示されます。

例として次のような表があったとします。

区の名前	人口	世帯数
足立区	618,948	267,840
荒川区	172,504	80,190
板橋区	499,349	239,680

これを読み上げるとすると、Table要素のdir属性が指定されていなければ、1番上の行のセルから順に左から右へという方向で読み上げられます。その順番で1列に並び替えて表示させます。結果を上から読んでいき、意味が通れば良いということです。

区の名前
人口
世帯数
足立区
618,948
267,840
荒川区
172,504
80,190
板橋区
499,349
239,680

読み上げブラウザの中にはひとつずつ関連付けられたヘッダーなどを読み上げるものもあるかもしれませんが、そこまでは（今のところ）表示させませんのでご了承ください。

ひとつのHTML文書中に複数のTableがある場合は「前を表示」「次を表示」ボタンが有効になりますので、切り替えて確認してください。

CSSとリンク

CSS(実行画面)とリンク(実行画面)のチェックはダイアログでファイルを選択するだけでチェックされます。

リンクチェックは選択されたHTML文書のA要素のHref属性とIMG要素のSrc属性の値を読み取り、リンク先があるかどうかのチェックを行います。リンク先にアンカー名が含まれている時は名前付けが行われているかどうかもチェックします。「状態」に「200(OK)」と表示されれば問題はありません。もし「状態」に300〜500番台が表示されたらなんらかのエラーですのでリンク先を確認してください。表示されるエラー番号はHTTP 1.1のステータスコードと同じ（はず）です。

また、リンクチェックはHTTPの項目だけチェックし、その他の項目では"このプロトコルには対応していません。"と表示されます。

これらもローカルである必要はありませんが、リンクチェックのほうは環境によっては時間がかかります。また、CSS Validatorはオンラインの方も利用できるのでお好きなほうを使ってください。

未使用ファイル検索

ダイアログから選択したファイルのリンク(とファイルの参照)とそこから繋がる全てのリンクを抜き出してフォルダ内のファイルを使用しているか検索します。選択したファイルがあるフォルダのサブフォルダはもちろんですが、上の階層が出てきたときにはそのフォルダのファイルも検索の対象とします。抜き出すファイルは

• AとLink要素のhref属性
• Img, Script, Frame, Iframe, Input要素のsrc、またはlongdesc属性
• Blockquote, Q, Ins, Del要素のcite属性
• Body要素のbackground属性
• Object要素のdata, classid属性
• Applet要素のcode属性
• CSSファイルのurl('')で指定してあるもの

となっています。HTMLファイルはファイル名が*.*htm*のものCSSは*.cssのファイルをリンク抜き出しの対象としています。適切にリンク設定がなされていれば簡単にチェックできるはずです。

設定では検索の対象としないファイルの拡張子を指定できますのでHTML,CSSからは呼ばないファイル(拡張子がplのものやCGIのデータ用datなど）の拡張子を設定しておけば結果のリストには表示されません。

結果表示のリストには使用されていないファイルが一覧表示され、右クリックのメニューからファイルの移動、エクスプローラなどからファイルがあるフォルダを開けるようにしてあります(フォルダを開く、はリスト上のファイル名をダブルクリックでもできます)。

起動時にチェックする

起動時のオプションスイッチで起動直後に各チェックができます。HTMLの文法チェックだけを行うならオプションスイッチは必要ありません。「/css」でCSSチェックを、「/link」でリンクチェック、「/unused」で未使用ファイルのチェックができます。またスイッチを半角スペースで区切って複数指定すれば指定しただけのチェックができます（例:TidyConf.exe /css /link C:\Index.html）。この時にTidyを動かしたいなら「/tidy」を渡してください。HTML、CSS、リンクチェックの全てを行いたいときは「/all」でも可能です。

また、/w3c、/lint、/wdg、/cssuに続けてファイル名かURLを渡せば各Validatorでチェックできます。この際、複数のValidatorを指定した場合の結果は、ひとつはTidyConfで、残りはIEで表示されます。

ヘルプ

「ヘルプ」にはこのサイトでのHTMLの要素の説明とほぼ同様のものが見れますので、ちょっと忘れてしまった時などに見てみてください。