リアルタイムに XHTML の文法やアクセシビリティを検証できる Firefox 機能拡張「Html Validator」

リアルタイムに XHTML の文法やアクセシビリティを検証できる Firefox 機能拡張「Html Validator」

Posted at June 15,2007 1:10 AM
Tag:[Accessibility, Firefox, XHTML]

XHTML の文法チェックには Another HTML-lint gateway や、The W3C Markup Validation Service が有名ですが、そのサイトに行かなければならないのがやや面倒という方に、リアルタイムに XHTML を検証できる Firefox 機能拡張「Html Validator」を紹介します。

「Html Validator」は、XHTML のバリデーション以外に、アクセシビリティのチェックや、ソースコードのクリーンアップ(ソースの自動修正)まで行ってくれるスグレモノで、Firefox ユーザにはポピュラーな機能拡張のひとつです。

すでにご利用の方も、記事後半にデフォルト設定以外の項目について詳細に記しておりますので、より活用できるのではないかと思います。

以下、Firefox をご利用でない方向けに、Html Validator のインストールおよび利用方法について説明します。Firefox は予めインストールしておいてください。

1.Html Validator のインストール

Html Validator :: Firefox Add-ons」にある「インストール」のアイコンをクリック。この操作は Firefox で行ってください。

Html Validator :: Firefox Add-ons

「ソフトウェアインストール」ダイアログが開く(数秒待つと「今すぐインストール」のボタンが表示されます)ので、「今すぐインストール」をクリック。

「ソフトウェアインストール」ダイアログ

アドオン画面が開き、インストールが開始します。終了したら右下の「Firefox を再起動」をクリック。

アドオン画面

Firefox を再起動すると、Html Validator のアルゴリズム選択画面が表示されますので「HTML Tidy」を選択します。

アドオン画面

設定後、開発者のページが表示されます。ドネーションも受け付けているようですので気に入った方はどうぞ。

アドオン画面

2.利用方法

インストールすると、ブラウザ右下に「Html Validator」のアイコンが表示されます。

緑色のアイコンは valid であることを意味します。アイコンにマウスカーソルをポイントすると詳細が表示されます。

正常

警告の場合はアイコンが変わります。

警告

エラーの場合は×マークになります。

エラー

アイコンをダブルクリックすると、さらに詳細を表示できます。

詳細を表示

スクリーンショットの例では、左下ペインに警告の詳細「<body> attribute with missing trailing quote mark」が表示されます。その行をクリックすると該当行の先頭が反転表示され、問題となっている部分が赤色で表示されます。

上の例では「individual-entry-archive"」が赤くなっており、引用符のつけ方が間違っている(class 属性には半角空白を区切り文字として複数の属性値を設定できるところを誤って途中に引用符をつけてしまっている)ことが分かります。

エラー

3.詳細設定

インストールしたデフォルト状態でそこそこのチェックができますが、さらに使いこなすには、メニューバーの[ツール] - [Html Validator options...]できめ細かく設定を行います。

詳細を表示

以下、各設定項目について説明します。

General
Algorithm:アルゴリズム選択。Choose をクリックするとインストール時の画面が表示
アクセシビリティレベルの選択:none(デフォルト)/normal/1/2/3 の5段階で選択
Browser
Enable validation in the Browser:ブラウザで検証可能
Hide Icon:アイコンを表示しない
Show in a status-bar:ステータスバーに表示する内容
Double-click the status-bar icon starts:ステータスバーのアイコンをダブルクリックした時の動作。デフォルトは「Page Source...」。「Cleanup...」を選択すると、エラーや警告を自動修正したソースコードと画面を表示
View Source
Enable validation in the View Source:[表示] - [ページのソース]で検証可能
Highlight lines with errors:エラー行をハイライト表示
Show line numbers:行番号を表示
Show warnings:警告を表示
Filter
Hidden errors and warnings:検証の対象外にしたいエラー・警告を設定します。

アクセシビリティレベルを選択すると、レベルに応じたアクセシビリティのチェックが可能になります。

アクセシビリティレベルの選択

フィルタの設定方法は、エラー・警告になっている行で右クリックし、Hide... を選択。

ダイアログが表示されるので、「はい」をクリック。

該当のエラー・警告が設定画面に埋め込まれるので「OK」をクリック。

削除したい場合は該当のエラー・警告を選択状態にして、右側の「Remove」をクリックします。

設定後は valid アイコンが青色で表示されます。

関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

拡張機能:Html Validator from ISDN64kbps
Html Validator:インストール方法・使い方は、小粋空間さんで。。。  └ XHTML のバリデーション以外に、 [続きを読む]

Tracked on June 15, 2007 7:16 PM

Firefox 機能拡張-検証機能「Html Validator」 from kisatonomori blog
小粋空間さんのところで紹介されてた リアルタイムに XHTML の文法や アクセシビリティを検証できる Firefox 機能拡張 「Html Val... [続きを読む]

Tracked on June 16, 2007 9:11 AM

Html Validator from Display Creeping
そうそう!ホームページやってて、HTMLやる人にはなんか面白いもの見つけたよ。 FireFoxっていうインターネットブラウザが必要だけど… 。 Firef... [続きを読む]

Tracked on June 22, 2007 1:44 PM

Webディレクターの検証ツール : Html Validator for Firefox from Webディレクターのライフハック
立て続けに、同じくFireFoxでの検証ツールをご紹介。TidyをベースにしたH... [続きを読む]

Tracked on September 30, 2007 10:08 PM
コメント

どうもこんにちは。

バージョン0.7.* だと日本語に対応しているのでいいですよ。アルゴリズムなどどう変わっているのかは分かりませんが。

最新バージョンだと日本語に対応していないのが残念です。対応していればドネーションも考えるのですが…。

[1] Posted by やすひさ : June 15, 2007 6:34 AM

yujiroさん!
コレ・・・コレは。。。素人には有難いでちゅが、未熟さが暴露されちゃいます!
いや?ん。。。はずかし?ぃ!ぷっ。
お勉強嫌いの「なろ?王子」。。。これを機会に。。。

[2] Posted by なろ?王子 : June 15, 2007 6:25 PM

>やすひささん
こんばんは。
なるほど、そうでしたか。情報ありがとうございます!
英語だと分かりにくいですからね。

>なろ?王子さん
こんばんは。
是非精進してください!

[3] Posted by yujiro : June 17, 2007 11:54 PM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)