WebサイトのIE10対応をサポートする「IE10 Compat Inspector」

最新特集【一覧】

防水スピーカーをワイヤレス化、お風呂でのんびり音楽を楽しむ

自作バーコードで音楽CDを管理する

Perfumeが公開したダンスのモーションデータをChromeで扱う

今年中にも登場予定のWindows 8とIE10

　Windows 7の後継となるPCおよびタブレット端末向けOS「Windows 8」は、2012年中のリリースが予定されており、1月24日現在は開発者向けのプレビュー版である「Windows 8 Developer Preview」が公開されている段階だ。

　そのWindows 8に搭載される標準Webブラウザは「Internet Explorer 10（IE10）」。Internet Explorerの次期バージョンであり、HTML5やCSS3、ECMAScript 5、WebSocketなど、IE9では対応していなかった様々な最新の技術をサポートする。

　WebサイトおよびWebアプリケーションの開発者やデザイナーにとって、Windowsに標準搭載されたIEは決して無視できない存在だ。しかしながらIEは、次世代Web技術への対応という点では他のWebブラウザに比べて遅れをとりがちだった。IE10はその差を一気に解消してくれるものとして期待されている。その一方で、あまりに大きな革新が与えられることから、現行のウェブサイトの互換性に対する懸念の声も上がっている。IE9またはそれ以前のバージョンで動作していたサイトが、IE10でも正しく動くかどうか、ということである。

　Windowsを採用している多くの企業がWebブラウザとして標準のIEを使用している現状を考えれば、WebサイトがIE10で正常に動作するかどうかという問題は、他のブラウザよりも深刻である。開発者やデザイナーは早い段階でIE10への対応を確認しておく必要があるだろう。そこで役に立つのがIE10のプレビュー版で利用可能な「Compat Inspector」だ。

　Compat InspectorはJavaScriptベースの互換性テストツールである。最新のIEでサポートされなくなった機能や、非推奨となった機能を使っている場合に、その場所や解決方法を提示するツールだ。もともとはIE9への移行をサポートするために開発されたもので、現在はIE10に対応したものが利用できるようになっている。

Compat Inspectorによる互換性テスト

　Compat InspectorでWebサイトの互換性をテストするには、対象となるそれぞれのページに、次のコードを追加する。このコードは他のJavaScriptコードよりも前に記述しなければならない。

<script src="http://ie.microsoft.com/TestDrive/HTML5/CompatInspector/inspector.js"></script>

　IE10でこのページにアクセスすると、図1のように右上にスコアが表示されるようになる。

図1 IE9/IE10への対応状況のスコアが表示される

　なお、上のスクリーンショットはCompat Inspectorのデモとして公開されているこのページにアクセスした場合のものだ。本来はメニューをクリックするとツールチップが表示されるはずだが、IE9でサポートが廃止された記法を使っているため正常に動作しない。それが赤スコアに「1」として表示されている。

　右上のスコアをクリックすると、図2のようにより詳細な情報を見ることができる。

図2 未対応部分の詳細情報

　ここで、［Verify］にチェックを入れて元のページを再読み込みすると、該当する部分を修正した場合にどのような表示になるかを確認できる。デモページの例では、図3のようにクリックしたメニューにツールチップが表示されるように修正される。

図3 ［Verify］にチェックして再読み込みすると、問題を修正した場合の表示になる

　Compat Inspectorにはデバッグをサポートする機能もある。詳細情報の［Debug］にチェックを入れると、コードの該当箇所にブレークポイントを挿入してくれる。これによって、IE10に付属する開発者ツール（［F12］キーで起動できる）を使ってデバッグする際に、問題箇所の詳細な情報を調べることが可能だ（図4）。

図4 開発者ツールのデバッグ機能とも連携する

IE10を試すには