2006年4月のActiveXパッチがあたったIEでFlashなどを従来通り表示させるためのJavaScript(Flashのバージョン検出機能付き)

Eolasの特許回避のため、2006年4月の月例パッチでInternetExplorerのActiveX周りに変更が加えられました。

具体的には、従来のようにHTMLページ内にobjectタグやembedタグでFlashを表示するように記述した場合、Flash上にマウスカーソルを持って行くと「このコントロールをアクティブ化して使用するにはクリックしてください」 と表示され、そのFlashがクリックを受け付けたり、マウスの位置情報を取得したりするためには(インタラクティブに振る舞うには)、一旦Flash上でクリックなどをしてFlashコントロールをアクティブ化しなくてはならなくなりました。

これの回避方法として、外部JavaScriptによって動的にobjectタグやembedタグを書き出す方法があるのですが、Adobeが公開している対策スクリプトがいまいちだったので、自作しました。

ダウンロードはこちら swfTagWriter107.zip。配布ライセンスはMITライセンスです。

使い方は、Flashを表示しているobjectタグが書いてある部分を、以下のよう書き換えるだけです。

<script type="text/javascript">
//<![CDATA[
var swf = new jp.catalase.SwfTagWriter('fma.swf', 'test01', 720, 200);
swf.writeHTML();
//]]>
</script>
<noscript>
<object data="fma.swf" width="720" height="200" type="application/x-shockwave-flash">
<param name="movie" value="fma.swf" />
</object>
</noscript>

JavaScriptが書き出すタグはXHTML1.0 Validになるようにしています。See also:FlashをXHTMLで表示させるには(embedタグを使わずに表示させるには)

詳しいリファレンスは以下の通り。

関数 jp.catalase.SwfTagWriter
種類 コンストラクタ
説明 FlashTagWriterオブジェクトを作ります
引数
1 swfファイルのパス
2 swfにDOMでアクセスする際のID
3 swfの幅
4 swfの高さ
使用例
<script type="text/javascript">
//<![CDATA[
var swf = new jp.catalase.SwfTagWriter('fma.swf', 'test01', 720, 200);
swf.writeHTML();
//]]>
</script>

生成されるHTMLは以下のようなものになります。

<object type="application/x-shockwave-flash" data="fma.swf" width="720" height="200" id="test01" >
<param name="movie" value="fma-1.swf" />
<param name="loop" value="false" />
<param name="quality" value="high" />
</object>
関数 setRequiredVersion()
種類 jp.catalase.SwfTagWriterのインスタンスメソッド
説明 指定したswfを表示するために最低限必要なFlash Playerのバージョンを指定します。このバージョン未満のFlash Playerがインストールされていた場合、setAltContent()で指定したコンテンツを代わりに表示します。
引数
1 FlashPlayerのメジャーバージョン
2 FlashPlayerのマイナーバージョン
3 FlashPlayerのリリースバージョン
使用例
<script type="text/javascript">
//<![CDATA[
var swf = new jp.catalase.SwfTagWriter('fma.swf', 'test01', 720, 200);
swf.setRequiredVersion(7,0,20);
swf.setAltContent('最新のFlashPlayerをインストールしてください');
swf.writeHTML();
//]]>
</script>
関数 setLoop()
種類 jp.catalase.SwfTagWriterのインスタンスメソッド
説明 指定したswfをループ表示するかしないかを設定します。
引数
1 ループ表示する場合true、しない場合false。デフォルトはfalse。
使用例
<script type="text/javascript">
//<![CDATA[
var swf = new jp.catalase.SwfTagWriter('fma.swf', 'test01', 720, 200);
swf.setLoop(true);
swf.writeHTML();
//]]>
</script>
関数 setQuality()
種類 jp.catalase.SwfTagWriterのインスタンスメソッド
説明 指定したswfの表示品質を設定します。
引数
1 "high", "medium", "low"のいずれか。デフォルトは"high"。
使用例
<script type="text/javascript">
//<![CDATA[
var swf = new jp.catalase.SwfTagWriter('fma.swf', 'test01', 720, 200);
swf.setQuality("low");
swf.writeHTML();
//]]>
</script>
関数 setAltContent()
種類 jp.catalase.SwfTagWriterのインスタンスメソッド
説明 Flash Playerがインストールされていない場合、もしくはIE以外でインストールされているFlashPlayerのバージョンがsetRequiredVersion()未満だった場合に表示するHTMLを指定します。(IEの場合自動アップデートが働くのでFlash Playerがインストールされていない場合のみ代替HTMLを表示します)。
引数
1 代替のHTML
使用例
<script type="text/javascript">
//<![CDATA[
var swf = new jp.catalase.SwfTagWriter('fma.swf', 'test01', 720, 200);
swf.setAltContent('<img src="a.gif" width="720" height="200" alt="alternative content" />');
swf.writeHTML();
//]]>
</script>
関数 addFlashVars()
種類 jp.catalase.SwfTagWriterのインスタンスメソッド
説明 Flash Player 6以降で、Flash Playerに変数を渡すFlashVarsに指定する値を設定します
引数
1 FlashVarsのキー
2 FlashVarsの値
使用例
<script type="text/javascript">
//<![CDATA[
var swf = new jp.catalase.SwfTagWriter('fma.swf', 'test01', 720, 200);
swf.addFlashVars('key1', 'val1');
swf.writeHTML();
//]]>
</script>

生成されるHTMLは以下の通り

<object type="application/x-shockwave-flash" data="fma.swf" width="720" height="200" id="test01" >
<param name="movie" value="fma-1.swf" />
<param name="loop" value="false" />
<param name="quality" value="high" />
<param name="flashvars" value="key1=val1" />
</object>
関数 addAttribute()
種類 jp.catalase.SwfTagWriterのインスタンスメソッド
説明 objectタグに設定する属性を指定します
引数
1 属性名
2 属性の値
使用例
<script type="text/javascript">
//<![CDATA[
var swf = new jp.catalase.SwfTagWriter('fma.swf', 'test01', 720, 200);
swf.addAttribute('accesskey', 'a');
swf.writeHTML();
//]]>
</script>

生成されるHTMLは以下の通り

<object type="application/x-shockwave-flash" data="fma.swf" width="720" height="200" id="test01" accesskey="a" >
<param name="movie" value="fma-1.swf" />
<param name="loop" value="false" />
<param name="quality" value="high" />
</object>
関数 addParam()
種類 jp.catalase.SwfTagWriterのインスタンスメソッド
説明 objectタグにの中に入れるparamタグを設定します。
引数
1 paramタグのname属性
2 paramタグのvalue属性
使用例
<script type="text/javascript">
//<![CDATA[
var swf = new jp.catalase.SwfTagWriter('fma.swf', 'test01', 720, 200);
swf.addParam('param1', 'value1');
swf.writeHTML();
//]]>
</script>
関数 doesShowPlayerInstallMsg()
種類 jp.catalase.SwfTagWriterのインスタンスメソッド
説明 Flash Playerがインストールされていない場合に、インストールを促すメッセージを表示するかどうかを指定します。メッセージはsetPlayerInstallMsg()で指定します。
引数
1 表示する場合はtrue、表示しない場合はfalse。デフォルトはfalse。
使用例
<script type="text/javascript">
//<![CDATA[
var swf = new jp.catalase.SwfTagWriter('fma.swf', 'test01', 720, 200);
swf.doesShowPlayerInstallMsg(false);
swf.writeHTML();
//]]>
</script>
関数 setPlayerInstallMsg()
種類 jp.catalase.SwfTagWriterのインスタンスメソッド
説明 Flash Playerがインストールされていない場合に、表示するHTMLです。
引数
1 HTML
使用例
<script type="text/javascript">
//<![CDATA[
var swf = new jp.catalase.SwfTagWriter('fma.swf', 'test01', 720, 200);
swf.doesShowPlayerInstallMsg(true);
swf.setPlayerInstallMsg('<p><a href="http://tinyurl.com/knoal">Flash Playerをインストールしてください</a></p>');
swf.writeHTML();
//]]>
</script>
関数 writeHTML()
種類 jp.catalase.SwfTagWriterのインスタンスメソッド
説明 swfを表示するためのHTMLを書き出します。
引数 なし
使用例
<script type="text/javascript">
//<![CDATA[
var swf = new jp.catalase.SwfTagWriter('fma.swf', 'test01', 720, 200);
swf.writeHTML();
//]]>
</script>
関数 setFlashDetectorSwfUrl()
種類 jp.catalase.SwfTagWriterのインスタンスメソッド
説明 IEにおいて、Flash Player 7未満がインストールされている環境で、リリースバージョンを検出するためのswf(配布ファイル内のFlashDetector.swf)のパスを指定します。 指定しない場合、IEのFlash Player 7未満ではリリースバージョンを検出できません。
引数 なし
使用例
<script type="text/javascript">
//<![CDATA[
var swf = new jp.catalase.SwfTagWriter('fma.swf', 'test01', 720, 200);
swf.setFlashDetectorSwfUrl('FlashDetector.swf');
swf.writeHTML();
//]]>
</script>
関数 jp.catalase.FlashPlayerDetector.isFlashPlayerAvailable()
種類 jp.catalase.FlashPlayerDetectorのクラスメソッド
説明 Flash Playerがインストールされているかどうかを検出します。
引数 なし
使用例
<script type="text/javascript">
//<![CDATA[
alert(jp.catalase.FlashPlayerDetector.isFlashPlayerAvailable());
//インストールされている場合true、されていない場合false
//]]>
</script>
関数 jp.catalase.FlashPlayerDetector.getFlashPlayerVersion()
種類 jp.catalase.FlashPlayerDetectorのクラスメソッド
説明 Flash Playerのバージョンを検出します。
引数 なし
返値 jp.catalase.FlashPlayerDetector.PlayerVersionクラスのインスタンス
使用例
<script type="text/javascript">
//<![CDATA[
var ver = jp.catalase.FlashPlayerDetector.getFlashPlayerVersion();
alert(ver);
//「7,0,20,0」など
//]]>
</script>

更にブラッシュアップしていこうと思っているので、ご意見などはコメント欄まで。

追記 2006/4/26

同様のことをするスクリプトにSWFObjectがあるのですが、以前はFlashObjectと呼ばれていました。ただ、Flashという商標をAdobe法務部が使うことを許さなかったため、SWFObjectに改名したようです。当方も法務部に怒られるのはいやなのでSwfTagWriterに変更しました。

追記 2006/5/1

swfTagWriter106.zipにいくつかバグを見つけたのでswfTagWriter107.zipとしてリリースしました。

16 thoughts on “2006年4月のActiveXパッチがあたったIEでFlashなどを従来通り表示させるためのJavaScript(Flashのバージョン検出機能付き)”

  1. かじさん
    興味深い記事を紹介していただいてありがとうございます。
    wmodeを付け加えることで影響は特にないので(swfを透明にしたければswf.addParam(‘wmode’, ‘transparent’);とすればいいだけなので)、採用させていただきました。
    flashTagWriter104.zipとしてリリースしましたのでどうぞお使いください。

  2. はじめまして。
    「FLASHのFPSを正常に」の記事を書いたwuと申します。

    param name=”wmode”を付けた場合の問題点がいくつか報告されていて、Flash内の入力フィールドなどが記述出来なく(しずらく)なるなどがあります。
    http://blog.graffiti-web.org/archives/2006/04/wmode.html

    配布されるスクリプトの使用者がこの問題を理解しておかないと、wmodeのワナにハマってしまいますので、記述からはwmodeを削除する。または、問題点も目立つところに掲示するのが良いと思います。

  3. katzさん、素早い対応ありがとうございます。
    wuさん、更なる情報ありがとうございます。問題点が浮上してるとは知りませんでした。奧が深い問題ですね…。

  4. 初めまして。
    ちょっとお伺いしたい点があります。

    Flashをscale=noscale WIDTH=”100%” HEIGHT=”100%”で配置している場合は、Flashを表示しているobjectタグが書いてある部分をどう記述すれば良いのでしょうか?
    swfの幅・高さのところに100%と入れてもダメでした。
    ページ背景の色しか表示されない感じです。。。

    どうぞよろしくお願いします。

  5. <script type=”text/javascript”>
    //<![CDATA[
    var swf = new jp.catalase.SwfTagWriter(‘fma-1.swf’, ‘test01’, ‘100%’, ‘100%’);
    swf.addAttribute(‘scale’, ‘noscale’);
    swf.writeHTML();
    //]]>
    </script>

    でどうでしょうか?

  6. katzさん!
    お早いお返事ありがとうございます!

    早速教えて頂いたものでやったところ100%表示にはなったのですが
    noscaleが効いていないようです・・・
    画面全体にFlashムービーが表示される感じですね・・・
    う〜〜ん。。困ってしまいますね・・・(_ _;)

  7. 前の配布スクリプトにバグがあったのでswfTagWriter107.zipをダウンロードしていただいた後で、
    var swf = new jp.catalase.SwfTagWriter(‘fma-1.swf’, ‘test01’, ‘100%’, ‘100%’);
    swf.addParam(‘scale’, ‘noscale’);
    swf.writeHTML();
    でどうでしょうか?

  8. katzさん出来ました!
    この度は本当にありがとうございます。

    なんせFlashページが200ページほどあるサイトを管理していまして・・・
    しかもそれが全部100%表示でnoscaleだったので青くなっていました。

    それではどうもありがとうございました!!

  9. katzさん、度々すみません。
    色々教えて頂いているのにまた一つ問題が出てしまいました。。

    (Win)
    IE/Firefox
    (Mac OSX)
    IE/safari/Firefox/Netscape/Camino/シイラ

    上記のブラウザで確認したところ、
    MacのIEのみFlashのnoscaleが効かないで表示されてしまいます。
    ちなみにMac OS9のIEも同様でした。。
    何か対処法とかあれば幸いなのですが・・
    (サイトの管理的にWin用/Mac用とページを用意するのはなるべく避けたいなと思っていまして)

    それではどうぞよろしくお願いいたします。

  10. ma-さん、
    いろいろ検証していて、おそくなりました。
    swfTagWriterはXHTMLに沿うような形でHTMLを書き出しているのですが、そうするとMacIEではnoscaleを無視してしまうようです。
    swfTagWriterを書き換えることで対処はできそうですが、MacIEはもはやMicrosoftのサポート対象から外れているため、この問題に対処する変更は加えるべきではないと思っています。

    代わりに、簡易な対策方法を紹介しているページを見つけたのでご紹介します。(ただしこの方法はIEのみでしか有効でないため、将来的にFirefoxなどのブラウザで同様のアクティブ化の変更が加えられた場合はまたHTMLの書き換えなどの作業が発生すると思われます)
    http://d.hatena.ne.jp/Mug/20060411/1144761874

    どうしてもswfTagWriterを使って、かつMacIEでもうまく動くようにしたい場合は、仕事としてswfTagWriterのカスタムメードを承りますので、sakai [at] onflow.jpまでメールでご連絡ください。

  11. katzさん

    色々ご対応ありがとうございます。
    実はちょうど昨日自己解決いたしました!
    ちょくちょく覗かせて頂いてたのですが、
    今見るとちょうどkatzさんの書き込み時間と同じくらいに・・(^^;)

    で、どう解決したかと言いますと、
    flaデータ上でタイムラインの1フレームに
    Stage.scaleMode = “noScale”;
    とアクションを記述するだけ。。。
    これでMac/IEも無事100%/noscaleで表示されるようになりました!

    すみません、こんな簡単なことで色々お手を焼かせてしまいまして。。
    このIEの問題のパッチは、知人に他のものも教わっていたのですが、
    こちらのものが一番分かりやすく、やりやすかったので、
    どうしてもこちらのもので押し通したかったんです。

    それではどうも色々ありがとうございました!

  12. ActiveX の例のアラート問題 2

    今回の ActiveX のアップデートで出るアラートは、object や embed タグに対して反応する為、従来通りこのタグで
    埋め込んでいる HTM…

  13. はじめまして♪
    ご相談させていただきたいので、書かせてください。
    わたしは、やっと自分のホームページを作りましたが
    表現上、どうしてもswfを使うことになりJavaScriptも使用しました。
    わたしは、IE6でMacOS8.6マシンとWinMEマシンで確認し
    まだまだ、言語は不慣れのままとりあえず公開したところ問題が発覚しました。
    娘のWinXPマシンでこのことを知りました。
    「このコントロールをアクティブ化して使用するにはクリックしてください」
    その後サイトを検索し、やっと修正方法が分かりホッとしたばかりですが…
    http://qpon.quu.cc/activ/

    すべてのブラウザに当てはまらないのかどうかをぜひ確認したいのです。
    最近、海外からのアクセスがありました。
    あるページから先へ行けていないようなのです。
    何が原因なのか、もし可能ならば調べていただけませんでしょうか?
    わたしの非力なマシンでは、OSも含めいろいろなブラウザでの確認は不可能です。
    よろしくお願いいたします。

    ※追伸:わたしの表現に不適切な箇所があったら、削除してください。

Leave a Reply

Your email address will not be published. Required fields are marked *