Validator」を紹介しよう。Validatorは、その名の通りHTMLの文法を検証するための拡張機能だ。Validatorは自身でパーサーを持っており、ローカルの環境だけで検証を行うことができる。サーバから送信された生のソースコードだけでなく、そこに含まれるJavaScriptを実行した後のソースコードの検証が行える点も、大きな特徴だ。ValidatorをインストールするとFirefoxのソースコード表示機能が拡張され、エラー発生箇所の表示や、エラー内容の表示などが行われるようになる。ソースビューワーがHTMLデバッガになってしまうわけだ。自動で修正候補のHTMLを生成する機能なども備えている。Add-onsのサイトに掲載されているのはWindows版のみ。その他のプラットフォーム向けのものについては、公式サイトのダウンロードページで入手できる。7、OpenBSD(32bits/64bits)をサポートしている。Validatorにはアルゴリズムの異なる2種類のバリデータが搭載されている。Tidyをベースとしたもので、もうひとつはvalidator.w3.orgと同じアルゴリズムを使ったSGMLパーサー。Validatorをインストールすると、最初にどちらのバリデータを使うか選択するダイアログが表示される(図1)。併用も可能で、後から設定によって変更することもできる。使用するバリデータを選択するこの拡張が有効になっている場合、ウェブページを表示した際にステータスバーの右側に検証結果を示すアイコンが表示される。このアイコンにマウスカーソルを合わせると、どのバリデータで検証した結果かがわかる。図2はSGMLパーサーでのもの。SGMLパーサーでの検証結果アイコンをダブルクリックするとページのソースコードが表示されるが、ソース表示機能は大幅に拡張されて図3のようなデザインになっている。ソースビューワーがHTMLデバッガに左下にエラーや警告の一覧が表示され、どれか1つを選択するとその箇所のソースにカーソルが移動する。この例ではimgタグにalt属性が指定されていないと怒られているようだ。右下に表示されているのはエラーの詳細。ここの[ページの文法を修正]をクリックすると、図4のようにエラーや警告を修正したHTMLを自動で生成してくれる。具体的な値などは自分で書かなければならないが、修正結果のプレビューも見られるので、これを参考にしてソースを直していけばいいだろう。Tidyから警告が出た(図5)。Tidyでチェックされる。Tidyでの検証結果この警告部分も修正すると、図6のように全てのチェックを通過できた。Validatorの大きな特徴のひとつが、サーバから送られてきた静的なHTMLだけでなく、ページに含まれるJavaScriptを実行した後のメモリ上のHTMLも検証することができる点である。この機能によって、Ajaxを利用した動的なページの検証を行うことができる。JavaScript実行後のHTMLを検証するには、ステータスバーのアイコンを右クリックして[上級]−[今すぐ文法をチェック]を選択する(図7)。JavaScript実行後のHTMLもチェックできるするとソースビューワーが開いて検証結果が表示される。この例の場合、元のページは72個のエラーを含んでいたが、検証結果では図8のように23個になっていた。表示されているページの生のHTMLとは異なるソースがチェックされているのがわかる。エラーの数が異なる点に注目そのほか、図7にも表示されているように、W3Cのオンラインサービスを利用するためのショートカットも用意されている。オプションのメニューなどが日本語化されている点もうれしい。permission.×このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。