IE9 がリリースされました (英語)。IE に対して他のブラウザーと同じマークアップを使って、サイトが IE9 標準モードで正常に動作することを確認してみましょう。先日には、IE9 に向けてのサイトの準備を説明するブログ (英語) も掲載されました。各自のサイトに影響する可能性のある変更の一覧については、Internet Explorer 9 互換性ガイドを参照してください。また、変更点をさらに詳細に知りたい場合は、Internet Explorer 9 開発者ガイドを参照してください。この記事では、サイトの準備を促進する新しいリソースである Compat Inspector (互換性テスト ツール) を紹介します。

Compat Inspector

Compat Inspector は、実行中にサイトを分析する JavaScript ベースのテスト ツールです。これは、標準モードで問題を引き起こす操作のパターンを報告します。これを使用すれば、大量の資料の内容を覚えていなくても、またサイトのコード全体を検索しなくても、簡単に問題を特定することができます。Compat Inspector は、IE9 の開発過程で、さまざまなサイトに共通する問題を迅速に発見できるようにすることを目的に作成されました。この作成においては、IE チームの多くのメンバーから Compat Inspector のルールを構成する数々のテスト ケースが提供されました。これらのテスト ケースはすべて公開されています。各自のサイトでこのツールを使用する前に、まずは Compat Inspector Test Drive (英語) をお試しください。

Compat Inspector は、サイトを IE9 に移行し、従来のモードではなく IE9 標準モードで実行することを支援するために設計されています。一部の問題に関しては、上記のガイドも参照してください。最初に Compat Inspector を使用し、問題が検出されない場合はドキュメントに戻るという方法をお勧めします。

使用方法

Compat Inspector を使用するには、テスト対象の各ページで、他のすべてのスクリプトの前に次のスクリプトを追加します。

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

メモ: Fiddler (英語) がある場合は、このスニペットを各自の FiddlerScript (英語) に追加することで、アクセスするすべてのページに Compat Inspector を自動的に読み込むことができます (これはページでフレームを使用している場合、特に便利です)。FiddlerScript Editor 拡張機能 (英語) をインストールしていない場合は、インストールすることをお勧めします。

上のスクリプトを適切な位置に配置したら、IE9 でページを開き、Compat Inspector の使用を開始します。正常に動作しないことがわかっている操作を明示的にテストしてみます (実行したコードのみが分析されます)。Compat Inspector は、検出された問題に関連するすべてのエラーと警告の合計数を保持します。ページの右上隅の概要ビューに、次のような結果が表示されます。

エラー 1 件、警告 0 件、情報メッセージ 0 件であることを示す Compat Inspector 合計値ビューのスクリーンショット。

このビューをクリックして展開すると、検出された各問題に関する詳細情報と、関連資料へのリンクが表示されます。

Compat Inspector 詳細ビューのスクリーンショット。このビューには、[Message Log]、[Tests]、[Verifiers] の 3 つのタブがあります。[Help] へのリンクも含まれます。[Message Log] タブにの内容が表示されています。ここには、[Show Errors]、[Show Warnings]、[Show Info Messages]、[Show Duplicates] という名前の 4 つのチェック ボックスがあります。[Show Duplicates] 以外のすべてのチェック ボックスがオンになっています。チェック ボックスの下のコンテンツ領域には、1 つのエラー メッセージが表示されています。メッセージには、 「エラー: createElement API は山かっこ '<>' を受け入れることができなくなりました。これは、他の Web ブラウザーとの相互運用性および DOM Level 3 Core への準拠のために IE9 標準モードで意図的に行われた変更です。」と書かれています。メッセージには、問題の解決に役立つ資料へのリンク、および [Verify] と [Debug] という 2 つのチェック ボックス (現在はオフ) が含まれています。

また、ほとんどのエラーと警告には、[Verify] と [Debug] の 2 つの追加アクションが用意されており、さらに詳細に調査できます。

"Verify" ワークフロー

一部のテスト ケースには、従来の動作をエミュレートする検証ツール ([Verify]) が組み込まれています。これにより、コードを変更する前に問題の根本原因を確認できます。

前提条件: Compat Inspector が詳細情報ビューで開かれており、[Verify] という名前のチェック ボックスを含むエラーまたは警告メッセージが表示されていること。

  1. 確認対象の問題の [Verify] チェック ボックスをクリックします。
    "createElement" エラー メッセージのスクリーンショットの再表示。ここでは、[Verify] という名前のチェック ボックスがオンになっています。
  2. ページを更新します (検証ツールが有効であることを示す通知が表示されます)。
    createElement API が山かっこ '<>' を受け入れなくなったことに対する検証が有効になったことを示す情報メッセージのスクリーンショット。このメッセージには、オンに設定された [Verify] という名前の 1 つのチェック ボックスが含まれます。
  3. 元のエラーまたは警告の原因となった手順を繰り返します。
  4. 問題がまだ発生する場合、
    1. エラーまたは警告メッセージがまだ表示される場合は、残りの各メッセージに対して手順 1 ~ 4 を繰り返します。
    2. 上記を実施できない場合は、Compat Inspector では問題を完全には特定できません。他のヘルプ情報について、IE9 の資料を参照してください。
  5. 問題が発生しなくなった場合は、問題の根本原因が特定されました。
    1. すべての [Verify] チェック ボックスをオフにします。
      "createElement" 情報メッセージのスクリーンショットの再表示。ここでは、[Verify] という名前のチェック ボックスがオフになっています。
    2. ページを更新します。
    3. 下の [Debug] ワークフローに従って、コード内で各メッセージの原因となっている場所を見つけます。
    4. 表示されるエラーまたは警告のメッセージの手順に従って、問題を解決します。
    5. メモ: 疑わしいコードの実行が、"IE だったら" というような条件で制御されていないかも確認します。通常、IE9 は、他の各種最新ブラウザーと同じコードを提供されたときに最も良好に動作します。

 

"Debug" ワークフロー

Compat Inspector では、デバッグ機能 ([Debug]) により、問題のあるコードの場所を特定することもできます。

前提条件: Compat Inspector が詳細情報ビューで開かれており、[Debug] という名前のチェック ボックスを含むエラーまたは警告メッセージが表示されていること。

  1. 調査対象の問題の [Debug] チェック ボックスをクリックします。
    "createElement" エラー メッセージのスクリーンショットの再表示。ここでは、[Debug] という名前のチェック ボックスがオンになっています。
  2. F12 キーを押して開発者ツールを表示します。
    F12 ツールの初期表示を示すスクリーンショット。
  3. [スクリプト] タブに切り替えます。
    F12 ツールで [スクリプト] タブの内容が表示されたスクリーンショット。
  4. [デバッグ開始] をクリックします。
    F12 ツールで [デバッグ開始] ボタンを示すスクリーンショット。
  5. 元のエラーまたは警告の原因となった手順を繰り返します (これにより、スクリプト デバッガーが起動します)。
    F12 ツールで一時停止した JavaScript のスニペットを示すスクリーンショット。コードには、JavaScript ステートメント "debugger;" と共に、Compat Inspector によってブレークポイントが起動されたことを知らせるコメント、およびコール スタックの次の項目を見るための手順が含まれています。
  6. F12 開発者ツールの右側にある [コール スタック] サブタブに切り替えます。
    F12 ツールの [スクリプト] タブの [コール スタック] サブタブを示すスクリーンショット。コール スタックには、(上から下に) "inspectorFunction" と "JScript global code" の 2 つのエントリが含まれます。エントリ "inspectorFunction" が選択されています。
  7. コール スタック内で強調表示されたエントリの下に表示されているエントリをダブルクリックします。
    F12 ツールの [スクリプト] タブの [コール スタック] サブタブのスクリーンショットの再表示。ここでは、エントリ "JScript global code" が選択されています。
  8. F12 開発者ツールの左側を調べて、エラーまたは警告の元になったコードを確認します。
    コードの document.createElement("<div>") を示すスクリーンショット。

 

Compat Inspector のしくみ

Compat Inspector は、IE9 で導入された機能を使用します。Compat Inspector は、その中核部分で ECMAScript 第 5 版 (英語) の getter/setter を使用してネイティブ API をオーバーライドし、ブラウザーが WebIDL (英語) に従って API を正しく公開していることに依存します。Compat Inspector は、これらのオーバーライドを使用して、ページとネイティブ プラットフォームの間のやり取りを追跡します。これにより、Compat Inspector は、問題コードが実行される実行時に問題を報告することができます。

Compat Inspector のインフラストラクチャは、この他の部分でも、必要に応じてさまざまな新機能を使用しています。たとえば、DOM Level 3 Core APIDOM Level 3 イベント API (英語)角を丸くする CSS3 border-radius (英語) などがあります。また、Compat Inspector は、HTML5 ローカル ストレージHTML5 クロス ドキュメント メッセージング (英語)ネイティブ JSON サポート (英語)セレクター API などの IE8 で導入された機能にも依存します。

サイトが正常に動作するようになったら

公開前に、すべてのページから Compat Inspector スクリプトを削除します。Compat Inspector はテスト ツールであり、本番稼働環境で使用すべきではありません。運用開始後も、IE ブログを継続的にご覧ください。新しいテスト ケースが提供される可能性があります。

— Tony Ross、プログラム マネージャー、Internet Explorer