開発者向け情報: ActiveX フィルター

本記事は、マイクロソフト本社の IE チームのブログから記事を抜粋し、翻訳したものです。 

【元記事】ActiveX Filtering for Developers (2011/5/3 4:02 AM)

IE9 Release Candidate で導入した ActiveX フィルターでは、通常のブラウジングとは異なる素晴らしいユーザー エクスペリエンスを提供することに焦点を置き、ユーザーがいつでもフィルターを無効にできるようにしました。また同時に、ActiveX フィルターが有効な状態でも Web サイトの閲覧を楽しめるようにすることも目指しました。たとえば、サイトの互換性問題を最小限に抑え、Web コンテンツが ActiveX フィルターによってブロックされた場合はそのことがユーザーに明確にわかるようにしています。

今回の記事では、IE 9 の最終リリース版で ActiveX フィルターに追加された機能について説明し、Web サイト開発者向けに推奨されるベスト プラクティスをいくつかご紹介したいと思います。

ここで紹介するベスト プラクティスに基づいて Web サイトの更新を行うことで、ActiveX フィルターを使用したブラウジング エクスペリエンスの質を最大限に高めることができます。

msActiveXFilteringEnabled API

多くの Web サイトでは、ユーザーが ActiveX コントロールをインストールしていないことが検知されると、フォールバック コンテンツが表示されるようになっています。

一般的に、コンテンツを表示するには ActiveX コントロールをインストールまたはアップグレードする必要があることを知らせる以下のようなメッセージが表示されます。

YouTube では、アップグレードを求めるメッセージがフォールバックコンテンツとして表示される

ActiveX フィルターによって Web サイトでコントロールの実行がブロックされると、コントロールが既にインストールされている場合でもこれと同じメッセージがユーザーに表示されてしまいます。これは、コントロールがそもそもインストールされていないのか、それとも ActiveX フィルターによってブロックされたのかをサイト自身が判断できないためです。

ユーザーがコントロールを再インストールまたはアップグレードしても、コントロールは依然としてブロックされたままとなり、結局同じメッセージが表示されてしまいます。

IE9 の最終リリース版では、msActiveXFilteringEnabled API が追加されました。この API は、サイトの ActiveX フィルターが有効かどうかを判定する機能で、ユーザーがサイトの ActiveX フィルターを無効にしている場合、または ActiveX フィルターをグローバルに無効にしている場合は false を返します。ベスト プラクティスに関する後出のセクションで、この API の推奨される使用方法について詳しく説明しています。

ページ内フィルター アイコン

Web サイトによっては、ActiveX コントロールが ActiveX フィルターによってブロックされても、フォールバック コンテンツが表示されないものがあります。

IE では、プレースホルダー領域に不完全なオブジェクト アイコンを表示する代わりに、アドレス バーで使われているものと同じフィルター アイコンが表示されます。

ActiveX フィルターが無効の場合、 ActiveX コントロールが正しく表示される

ActiveX コントロールが ActiveX フィルターによってブロックされると、プレースホルダー領域にフィルターアイコンが表示される

IE では、追跡防止によってブロックされたコンテンツのプレースホルダー領域にも同じアイコンが表示されます。アイコンを表示することで、IE によってページのコンテンツがフィルタリングされたことがユーザーに明らかにわかるようになります。これでユーザーは、Web サイトのフィルタリングを無効にしてコンテンツが表示されるようにするには、アドレス バーのアイコンをクリックすればよいということがわかります。

このようにアイコンが表示されなければ、ユーザーは Web ページに壊れたリンクがあると考えて、ページのフィルター オプションを変更すればよいことには気付かない可能性があります。

Web サイト開発者向けのベスト プラクティス

ここからは、Web サイトを ActiveX フィルターに正しく対応させるために Web サイト開発者が従うべきベスト プラクティスをいくつかご紹介します。

ActiveX の代わりにネイティブ オブジェクトを使用する

製品テスト段階で、AJAX 処理が Microsoft.XMLHTTP ActiveX コントロールに無用に依存している Web サイトをいくつか発見しました (例 1、例 2、例 3)。ActiveX フィルターは、スクリプトによるコントロールのインスタンス化をブロックするため、ActiveX コンテンツがないように見えるサイトでも、ActiveX フィルターが有効になっているとレンダリングが正しく行われません。

こうしたサイトは次のようなコーディング パターンを用いて ActiveX 版の XMLHttpRequest オブジェクトを使用していますが、ActiveX フィルターが有効だと処理が正しく行われません。

 // 悪いパターン: 使用しないこと!
var xhr = window.ActiveXObject
    ? new ActiveXObject("Microsoft.XMLHTTP")
    : new XMLHttpRequest();

Internet Explorer は IE7 以降、ネイティブ XMLHttpRequest オブジェクトをサポートしています。そのため、ActiveX フィルターが有効な場合もネイティブ オブジェクトは正しく機能します。Web サイトのスクリプトは、ネイティブ オブジェクトがある場合はそちらを優先的に使用します。次のサンプル コードに、XMLHttpRequest オブジェクトを確実に作成する方法を示します。

 // ベスト プラクティス: 可能ならばネイティブ XHR を使用
if (window.XMLHttpRequest) {
    // IE7 以降、Gecko、Webkit の場合は、ネイティブ オブジェクトを使用
    var xmlHttp = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
    // ...偽の場合は ActiveX コントロールを使用
    var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else {
    // XMLHTTPRequest は使用不可
}

このコード サンプルの場合、ActiveX コントロールをインスタンス化するのは最終手段です。できるだけネイティブ オブジェクトを使用することで、サイトの機能に対する ActiveX フィルターの無用な影響を抑えることができます。

こうした対応をする多くの Web サイトが、上記の悪いパターンを用いて XMLHttpRequest オブジェクトをインスタンス化する初期バージョンの jQuery を使用していました。最新バージョンの jQuery 1.5.1 はこの問題に対応しているので、Web サイト開発者にはこちらに更新していただくことをお勧めします。

フォールバック コンテンツを正しく表示する

ActiveX フィルターによってコントロールがブロックされると誤ったフォールバック コンテンツが表示されるため、ユーザーを混乱させる可能性があることについては先ほど説明しました。

ActiveX フィルターが有効かどうかを判定する新しい API を使用して、ActiveX コントロールがインストールされていないのか、それともバージョンが古いのかを判断するようにしてください。

ActiveX フィルターが有効になっている場合は、フォールバック コンテンツを一切表示しないことをまずお勧めします。これにより、フィルター アイコンがプレースホルダー領域に表示されるようになり、ユーザーにとっても前述のようなメリットがあります。

フォールバック コンテンツをサイトに表示したい場合は、カスタム メッセージを表示し、コンテンツを表示するにはフィルターを無効にするようユーザーに通知することができます。次のサンプル コードに、新しい API を使用した ActiveX フィルターのチェック方法と、コントロールがブロックされている場合にカスタム ページを表示する方法を示します。

 <object type="application/x-shockwave-flash" data="test.swf">
      <script type="text/javascript">
       // ベスト プラクティス: ActiveX フィルターが有効かどうかをまず検出する
        if (typeof window.external.msActiveXFilteringEnabled != "undefined"
                && window.external.msActiveXFilteringEnabled() == true) {
            document.write("ActiveX Filtering has hidden this content.");
        }
        else {
          // ブラウザーが IE 以外、または IE だが ActiveX フィルターが無効
            document.write("Please install the Flash plug-in to view this content.");
        }     </script>
</object>

本来のコンテンツを別の方法でページに表示させることもできます。たとえば、ActiveX フィルターの Test Drive デモは、ActiveX フィルターが有効なサイトでは HTML5 ビデオ形式でビデオを表示します。

開発者の皆様には、ActiveX フィルターが有効になっていることを検知した場合に、ユーザーを別の Web ページに移動するのは避けることを推奨します。

IE は、新しい Web ページに ActiveX コントロールが存在しなくてもアドレス バーにフィルター アイコンが表示されたままにするというロジックになっているので、ユーザーはフィルターを無効にしてから、前のページに戻ることになります。すると新しい Web ページが別ドメインにある場合、ユーザーは誤ったドメインに対して ActiveX フィルターを無効化してしまうことになります。

Web サイトで ActiveX フィルターをテストする

ActiveX フィルターに関するサイトの互換性問題は、簡単に特定し、テストを通じて解決できる場合もあります。例として、次のサイトは、ActiveX フィルターが有効だとレイアウトに影響が生じます。

上記のサイトでは、フィルター アイコンが、ブロックされた ActiveX コントロールのプレースホルダーに正しく表示されています。またコントロールの 1 つが実際のサイズとは異なる既定のサイズで宣言されています。IE は既定のサイズでプレースホルダー オブジェクトをページに表示します。このため、プレースホルダーのサイズが合わず、他のコンテンツのレイアウトが崩れてしまいます。

コントロールの既定のサイズは実際のサイズと一致しない。 Web ページの残りのコンテンツのレイアウトは、実際のサイズによって決まる

開発者の皆様は、ActiveX フィルターとの互換性について Web サイトの検証を行い、ここで説明したような問題を特定してください。これにより、Web ページの ActiveX コンテンツのみを ActiveX フィルターでブロックして、ページの残りのコンテンツを正しく表示することができます。

ActiveX フィルターへの対応

IE9 Release Candidate で ActiveX フィルターをリリースして以来、ユーザーの皆様のフィードバックを元に、エンドユーザーと開発者の双方にとって使い勝手が良くなるようこの機能に適切な拡張を加えてきました。

たとえば、フィルター アイコンを ActiveX コントロールのプレースホルダー オブジェクトに表示するようにしたことで、ActiveX フィルターによってページのコンテンツがブロックされたことをユーザーに知らせることができるようになりました。またユーザーはアドレス バーのフィルター アイコンを使ってフィルターを無効にすることができます。

Web サイトを ActiveX フィルターとスムーズに連携させるために、Web サイト開発者はこの記事で紹介したベスト プラクティス、すなわち、「できるだけ ActiveX コントロールではなくネイティブ実装されたオブジェクトを優先的に使用し、正しい方法でネイティブの XMLHttpRequest オブジェクトをインスタンス化する jQuery 1.5.1 にサイトを更新すること」、「新しい API を使用してサイト上の ActiveX フィルターが有効かどうかを確認し、より適切なフォールバック コンテンツを表示すること」、そして「Web サイトの ActiveX フィルターとの互換性を徹底的に検証し、細かなレイアウトの問題を特定すること」に従うことをお勧めします。同時に、開発者の皆様には、コメント欄でご自身のベスト プラクティスをぜひ披露していただければと思います。

—Herman Ng、プログラム マネージャー、Internet Explorer