アクセシビリティ

アクティブコンテンツのアップデートに関する記事

 

ブラウザの更新に備えたアクティブコンテンツ使用Webサイトの準備


アドビ システムズ社

 

作成日:
2006年4月13日
ユーザレベル:
すべて

多くの方がMicrosoft Internet Explorerの変更についての発表を目にしたことでしょう。その結果、埋め込み("アクティブ")コンテンツやアプリケーションを使用したWebサイトがどのような影響を受けるのか、疑問をお持ちのことと思います。アクティブコンテンツには、Macromedia Flash、Shockwave、またはAdobe Acrobatファイルなどが含まれます。おそらく、その準備のために何をすべきか、検討を開始されていることでしょう。

ブラウザの更新がサイトに与える影響

ブラウザの変更が与える実際の影響はどのようなものなのでしょう。このような変更はいつ行われるのでしょうか。明日または来週になっても、ユーザはアクティブコンテンツを表示できるのでしょうか。

ユーザは、Internet Explorerブラウザの更新プログラムを適用するまでは、埋め込みコンテンツやアプリケーションを現在の形式で表示できます。ブラウザの更新プログラムは、最初にオプションのアップデートとして2006年2月にリリースされました。ユーザがブラウザをアップデートした後は、埋め込みまたは"アクティブ"コンテンツと対話する前に、コンテンツをクリックする必要があります。詳細については、Microsoft Developer Network(MSDN)のリソースを参照してください。

一部のサイトはこの変更の影響を受けません。アップデートされたブラウザでは、HTMLファイル内部に記述された<object><embed>、または<applet>タグを使用してコーディングされたアクティブコンテンツを表示する前に、ユーザにクリックを促すメッセージが表示されます。ただし、複雑なFlash検出スクリプトを使用したサイトなど、外部スクリプトファイル(JavaScriptなど)によって生成されたタグを使用するHTMLページは、変化なく正常な動作を続けます。

ブラウザに対する必須の変更の回避策としてサイトを修正したいと考える方は多くいることでしょう。幸いなことに、直ちにサイトに適用できる、いくつかの回避案があります。

必要なファイル

サンプルファイル

ダウンロードJavaScriptファイルのダウンロード(4K ZIP)

メモ:このサンプルアーカイブには次の3つのファイルが含まれています。

はじめに:アクティブコンテンツを表示するための修正

サイトでアクティブコンテンツを含んだHTMLページをアップデートするために使用できる、Adobe開発チーム提供の"実装前後"のコードの例を次に示します。

置き換える必要があるコード

アップデートされたブラウザで、以前のように機能しないコード(単純な<object>タグ)の例を次に示します。

<object classid="clsid:D27CDB6E..." ...>
    <param name="movie" value="foo.swf">
</object>

以降の2つの方法で説明するように、このタグを、HTMLページ外部のコードを呼び出すスクリプトに置き換えると、アップデートされたIEでも引き続き動作します。詳細については、Microsoft Developer Network(MSDN)のリソースhttp://www.microsoft.com/japan/msdn/ieupdate/を参照してください。

このJavaScript修正プログラムについてテストを実施した結果、現在の一般的なブラウザで動作することがわかっています。これがご自分のサイトに適したソリューションであるかどうかを調べるには、アドビのテストマトリックスで確認してください。

外部JavaScriptソリューション1:埋め込みコンテンツが1つまたは数個の場合

サイトで使用している埋め込みコンテンツが1つまたは数個の場合は、次の簡単なソリューションの使用が望ましいかもしれません。このソリューションを実装するには、埋め込みコンテンツが含まれるサイトのページごとに、一意の外部JavaScript(JS)ファイルを作成する必要があります。

メモ:ページ上の埋め込みコンテンツの数が2個以上の場合は、個別のコンテンツごとにタグをdocument.write  する一意の関数を外部JSファイルにおいて作成します(手順1を参照)。また、このソリューションがサンプルファイルに含まれないことに注意してください。次の手順に従って、現在のHTMLコードに含まれるコードから新しいコードを作成してください。

前述の操作を行うための手順は次のとおりです。

  1. 外部JSファイルを作成し、サイトに置きます。この例では、このファイルをfoo.jsと呼びます。このスクリプトは、HTMLファイルに以前に含まれていたobject/embedタグ全体をdocument.writeする必要があります。

    function RunFoo()
    {
        document.write('<object classid="clsid:D27CDB6E..." ...>\n');
        document.write('<param name="movie" value="foo.swf" />\n');
        document.write('</object>\n');
    }
    
  2. 手順1のJavaScriptファイルを参照するJavaScriptインクルード文を、コンテンツを埋め込むWebページの<head>セクションに追加します。

    <script src="[path]/foo.js" type="text/javascript"></script>
    
    
  3. 次のように、各<object><embed>、または<applet>タグを、適切な外部ファイルの呼び出しに置き換えます。

    <script type="text/javascript">RunFoo();</script>
    
    

外部JavaScriptソリューション2:複数の埋め込みコンテンツがある場合

サイトに多くの埋め込みアクティブコンテンツがある場合、または何通りかの方法で埋め込んでいる場合は、このソリューションが大変に有効です。ソリューション1のように、影響を受けるファイルごとに1つのJSファイルを作成するのではなく、埋め込まれたすべてのFlashおよびShockwaveコンテンツ用に1つの外部JSファイルを使用できます。このJSファイルには、メインページから受け取るパラメータに基づいてアクティブコンテンツを埋め込む関数が含まれます。

このソリューションを実装するには、次の3つの手順を実行する必要があります。

  1. 回避策の関数が含まれる外部JSファイルを、Webサイト上の共有の場所にコピーします。この例では、このファイルを AC_RunActiveContent.js か、任意の名前を付けます。

    ダウンロードJavaScriptファイルのダウンロード(4K ZIP)

    AC_RunActiveContent.jsファイルのコードは、このファイルに渡される引数を使用して(手順3を参照)、ドキュメントに書き込む完全なタグ文字列を構築します。

  2. 手順1の共有JavaScriptファイルをを参照するJavaScriptインクルード文を、object/embedタグが含まれるサイト上の各Webページの<head>セクションに追加します。

    <script src="[path]/AC_RunActiveContent.js" type="text/javascript"></script>
  3. ページの<object>および<embed>タグの各インスタンスを、適切な関数呼び出しで置き換えます。Flashコンテンツ用とShockwaveコンテンツ用の2種類の関数呼び出しがあります。

    AC_FL_RunContent(
        "att1Name","att1Value", 
        "att2Name","att2Value", 
        ... 
        "attnName","attnValue" 
    );
    AC_SW_RunContent( 
        "att1Name","att1Value", 
        "att2Name","att2Value", 
        ... 
        "attnName","attnValue" 
    );
    

    メモ:これらの関数を機能させるためにはJavaScriptが有効になっている必要があります。ブラウザでJavaScriptを無効にしているユーザがアクティブコンテンツを表示できるようにするには、JavaScriptをオフにしているユーザーの場合で説明するように、<noscript>タグの内部にある従来の<object><embed>タグを使用して機能する各関数に従います。

    オブジェクトと埋め込みタグをこれらの新しい関数呼び出しに置き換えたら、movieidbgcolorなど、元のタグの適切な属性とその値を含むように引数の組("att1Name"、"att1Value"で表す)を編集します。特定のFlashファイルに関するこのコードの例を、サンプルファイルのダウンロードに含まれる、サンプルファイルSampleActiveContent.htmlにおいて確認できます。

    movie属性を渡すように関数呼び出しを編集する場合は、ファイル拡張子をmovie名と共に入れないでください。movie名は次のように渡します。

    "movie", "foo"

    外部JavaScriptコードによって適切な拡張子が追加されます。

    Flashファイルにパラメータを渡している場合は、元のmovie属性が次のような場合があります。

    foo.swf?username=Bob&color=red

    nameおよびcolor属性を正しく渡すには、次のようにこの属性を引数として関数に入れ、ファイル拡張子を必ず省略します。

    "foo?username=Bob&color=red"

    引数は必ず名前/値の組として挙げてください。偶数個の項目をAC_RunActiveContent.jsコードに渡す必要があります。項目の数が奇数の場合は機能しません。また、このコードは、classidmimeTypeなどの必要なその他の設定を、プレイヤに固有の関数呼び出しの結果として自動的に挿入します。このような必要な設定の1つの値をアップデートする必要がある場合は、これらの値をAC_RunActiveContent.js内の、AC_FL_RunContent()またはAC_SW_RunContent()関数内部で編集します。HTMLページ内部では、オプションのパラメータの引数だけを渡します。

    この方法を使用した、Flashファイルを再生する標準のインラインオブジェクトと埋め込みタグの置き換えの例を次に示します。次のコードを置き換える必要がある場合:

    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="550" height="400" align="middle">
        <param name="allowScriptAccess" value="sameDomain" /> 
        <param name="movie" value="foo.swf" /> 
        <param name="quality" value="high" />
        <param name="bgcolor" value="#ffffff" />
    <embed src="foo.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="foo" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
    </object>

    次の関数呼び出しを代わりに挿入します。

    <script type="text/javascript" >
    AC_FL_RunContent('codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','550','height','400','align','middle','src','foo','quality','high','bgcolor','#ffffff','name','foo','allowscriptaccess','sameDomain','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','foo' );
    </script> 
    
    

JavaScriptをオフにしているユーザの場合

前述のいずれの方法でもJavaScriptを使用しています。ブラウザでJavaScriptを無効にしているサイト閲覧者もわずかにいます。このようなユーザには埋め込みコンテンツはまったく表示されないので、前述の技術はこのようなユーザには適切ではありません。留意すべき点は、JavaScriptを無効にしている多くのまたはほとんどのIEユーザは、ActiveXサポートも無効にしていることです。ただし、ActiveXを無効にしているユーザのブラウザには、FlashおよびShockwaveコンテンツは表示されません。埋め込みコンテンツ用のJavaScriptの技術に移行しても、ユーザエクスペリエンスは変化しません。または影響を受けません。したがって、JavaScriptを無効にし、ActiveXを有効にしているユーザだけについて考える必要があります。

JavaScriptを無効にし、ActiveXを有効にしているわずかな割合のユーザに対応するには、<object>および<embed>タグをHTMLに直接挿入します。ただし、これらのタグは<noscript>タグの内部に挿入します。<noscript>タグは、JavaScriptを無効にしているユーザの予防策としての代替コードを提供する標準タグです。<noscript>タグにネストされた標準の埋め込みFlashムービーの例を次に示します。

<noscript>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="550" height="400" id="foo" align="middle">
    <param name="allowScriptAccess" value="sameDomain" />
    <param name="movie" value="foo.swf" />
    <param name="quality" value="high" />
    <param name="bgcolor" value="#ffffff" />
<embed src="foo.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="foo" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</noscript>

JavaScriptを無効にしているユーザが、前述のコードに類似したコードを使用するページを訪問した場合は、アップデートされたブラウザのアクティブコンテンツをクリックする必要があります。クリックした後は、以前と同様にコンテンツと対話することができます。

他のタイプのアクティブコンテンツのソリューション

この記事に付属のサンプルファイルには、AC_ActiveX.jsという名前のJavaScriptファイルも含まれます。前述の方法を使用してFlashまたはShockwaveコンテンツを表示する場合は、このスクリプトは必要ありません。ただし、他のタイプのアクティブコンテンツをWebページで使用している開発者は、このスクリプトを使用し、アクティブ化するためのユーザクリックなしで、他のタイプのコンテンツを表示することができます。これを、幅広いコンテンツで機能する一種の汎用スクリプトと考えてください。このスクリプトは、前述の手順で説明したAC_RunActiveContent.jsとほとんど同様に使用できます。

このスクリプトを実装するには、最初に次のコードを使用して、HTMLページの<head>セクションに外部ファイルを挿入します。

<script src="[path]/AC_ActiveX.js" type="text/javascript"></script> 
<script src="[path]/AC_RunActiveContent.js" type="text/javascript"></script>

次に、Flash/Shockwaveの方法と同様に、<object>および<embed>コードを置き換えて、属性と値の組をコンテンツに合うように変更します。

<script type="text/javascript">
     AC_AX_RunContent( 'classid','clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFB','width','150','height','100','src','fakefile.foo' );
</script>

メモ:また、これに類似したコード例が、サンプルファイルダウンロードに含まれるサンプルHTMLファイル、 SampleActiveContent.htmlにもあります。

引き続きご利用ください:アクティブコンテンツデベロッパーセンター

アドビは、いずれかの方法を使用してサイトに修正プログラムを正しく実装できると信じています。しかし、さらに確実にすべく、公開されたあらゆる情報のご提供を続けてゆきます。アクティブコンテンツの表示に関連するアップデートや新しい方法を紹介していきますので、このサイトを引き続きご利用ください。

著者について

この記事は、アドビ システムズ社の著作物です。