Ajax開発にベンリ!「Html Validator」でJavaScript実行後のHTMLを検証

杉山貴章(オングス)
2008-08-11 07:00:00
  • このエントリーをはてなブックマークに追加

 前回はウェブサイトの構築をサポートするアドオン「Web Developer」を紹介したので、それに関連して今回はHTMLの文法をチェックし、修正するのに便利な「Html Validator」を紹介しよう。

Html Validator

 Html Validatorは、その名の通りHTMLの文法を検証するための拡張機能だ。

 Web Developerに付属している検証機能はW3Cのオンラインサービスにアクセスするだけのものだが、Html Validatorは自身でパーサーを持っており、ローカルの環境だけで検証を行うことができる。サーバから送信された生のソースコードだけでなく、そこに含まれるJavaScriptを実行した後のソースコードの検証が行える点も、大きな特徴だ。

 加えて、Html ValidatorをインストールするとFirefoxのソースコード表示機能が拡張され、エラー発生箇所の表示や、エラー内容の表示などが行われるようになる。ソースビューワーがHTMLデバッガになってしまうわけだ。さらに、自動で修正候補のHTMLを生成する機能なども備えている。

 ただし、Firefox Add-onsのサイトに掲載されているのはWindows版のみ。その他のプラットフォーム向けのものについては、公式サイトのダウンロードページで入手できる。最新版はWindows以外ではLinux(32bits/64bits)、Mac OS X(Intel/PPC)、FreeBSD 7、OpenBSD(32bits/64bits)をサポートしている。

2種類のバリデータで文法をチェック

 Html Validatorにはアルゴリズムの異なる2種類のバリデータが搭載されている。

 ひとつはHTML Tidyをベースとしたもので、もうひとつはvalidator.w3.orgと同じアルゴリズムを使ったSGMLパーサー。Html Validatorをインストールすると、最初にどちらのバリデータを使うか選択するダイアログが表示される(図1)。もちろん併用も可能で、後から設定によって変更することもできる。

図1 使用するバリデータを選択する 図1 使用するバリデータを選択する

 この拡張が有効になっている場合、ウェブページを表示した際にステータスバーの右側に検証結果を示すアイコンが表示される。このアイコンにマウスカーソルを合わせると、どのバリデータで検証した結果かがわかる。図2はSGMLパーサーでのもの。

図2 SGMLパーサーでの検証結果 図2 SGMLパーサーでの検証結果

 アイコンをダブルクリックするとページのソースコードが表示されるが、ソース表示機能は大幅に拡張されて図3のようなデザインになっている。

図3 ソースビューワーがHTMLデバッガに 図3 ソースビューワーがHTMLデバッガに

 左下にエラーや警告の一覧が表示され、どれか1つを選択するとその箇所のソースにカーソルが移動する。この例ではimgタグにalt属性が指定されていないと怒られているようだ。

 右下に表示されているのはエラーの詳細。ここの[ページの文法を修正]をクリックすると、図4のようにエラーや警告を修正したHTMLを自動で生成してくれる。さすがに具体的な値などは自分で書かなければならないが、修正結果のプレビューも見られるので、これを参考にしてソースを直していけばいいだろう。

図4 修正候補のHTMLを自動生成 図4 修正候補のHTMLを自動生成

 SGMLパーサーで指摘された部分を直したら、今度はHTML Tidyから警告が出た(図5)。両方のバリデータを併用している場合、最初にSGMLパーサーでチェックされ、問題が無ければHTML Tidyでチェックされる。

図5 HTML Tidyでの検証結果 図5 HTML Tidyでの検証結果

 この警告部分も修正すると、図6のように全てのチェックを通過できた。

図6 全てのチェックを通過 図6 全てのチェックを通過

JavaScript実行後のHTMLを検証

 Html Validatorの大きな特徴のひとつが、サーバから送られてきた静的なHTMLだけでなく、ページに含まれるJavaScriptを実行した後のメモリ上のHTMLも検証することができる点である。この機能によって、Ajaxを利用した動的なページの検証を行うことができる。

 JavaScript実行後のHTMLを検証するには、ステータスバーのアイコンを右クリックして[上級]−[今すぐ文法をチェック]を選択する(図7)。

図7 JavaScript実行後のHTMLもチェックできる 図7 JavaScript実行後のHTMLもチェックできる

 するとソースビューワーが開いて検証結果が表示される。この例の場合、元のページは72個のエラーを含んでいたが、検証結果では図8のように23個になっていた。表示されているページの生のHTMLとは異なるソースがチェックされているのがわかる。

図8 エラーの数が異なる点に注目 図8 エラーの数が異なる点に注目

 そのほか、図7にも表示されているように、W3Cのオンラインサービスを利用するためのショートカットも用意されている。オプションのメニューなどが日本語化されている点もうれしい。

  • 新着記事
  • 特集
  • ブログ