(主に)Flashで一回クリックしないといけなかった、『IE』の『ActiveX』有効化操作が再び不要になる&回避方法の再掲載!
2007年11月11日
Internet Exploere(IE)を使っている方で、Flashの埋め込みがあるページで、ある時からFlash領域にマウスを乗せると淵にボーダーが出て、 Flash部分を一回クリックしないとFlashが動かない、という事を経験したユーザーの方はいないでしょうか?
これはMicrosoftがEolas Technologiesの埋め込みプログラムに関しての特許で法廷で争っていた時に、その回避策として、2006年4月にIEにおけるActiveXコントロールの処理方法を変更した事で起こったことです。
これは当時Web制作業界では結構騒然となった仕様変更でした。
なぜなら、それまで何もしないでFlashが開始されていたものが、ユーザーが一度クリックをする(=ユーザーによって開始されるという状態)事をしないと動かなくなるという事を示していたからです。
具体的には、「object」「embed」「applet」というタグを用いて、HTML に直接埋め込んだ ActiveX コントロールを読み込む際、有効化するためにクリックを求める仕様になったって事です。
その為、当時の多くのWebページでは、それを回避する仕組みを模索してjavascriptによる制御をする、といった仕組みが生まれました。
確か、当時のCSS Niteでもその挙動についての紹介がありましたね!
名村も当時運用をしていたサイトでFlashをつかっているページを全部洗い出して、修正をしたのを覚えています。
ですが、MicrosoftとEolas Technologiesが和解したことに伴って、2006年4月に実装した上記の有効化操作は、まもなく不要になるらしいです。
Microsoftの公式Blogのエントリーの中を見ていたら、MicrosoftのIE 開発部門で上級製品マネージャを務める Pete LePageさんが、
「(以前の仕様に戻す) この変更が、既存の Web ページの修正を必要とせず、開発者が新しいページを作成する必要もないことは、重要な (かつ素晴らしい) ことだ。われわれは、単純に元の動作に戻す。IE の更新後は、現在 ActiveX コントロールの有効化操作を要求するすべてのページにおいて、そうした操作が不要となり、ただ機能するようになる」
とありました。
これで作り手側としてはちょっと楽になるのかな?と思ったりしていますが、回避方法としては今のところ確立はされているので、現場はそれで作っていくのかも?と思ったりもしています。
あっ、せっかくですから、そのIEで「object」「embed」「applet」というタグを使ってFlashを埋め込んだ時に枠が出て、一回クリックしないと動かなくなるのを回避方法を挙げておきたいと思います。
いまさら感もかななりありますし(笑)、手法としては、他にもあると思いますので、1つの方法として自分の備忘録としても、上げておきたいと思います。
必要なスクリプトのダウンロード
まず、
<del>http://blog.deconcept.com/flashobject/#download</del>
<a href="http://blog.deconcept.com/swfobject/#download">http://blog.deconcept.com/swfobject/#download</a>
(kuroyagiさんからコメントでご指摘をいただき、修正いたしました。)
から
java scriptをダウンロードします(Download SWFObject 1.5)
解凍後、「swfobject.js」を任意の場所へコピー。
スクリプトの読み込み
Flashを使いたいページにflashobject.jsを読み込みます。
例)例)例)<script type="text/JavaScript" src="/path/to/swfobject.js">
Flash未対応や、Javascript offの場合の代替<div>とか<p>とかの要素をつくる
Flashを挿入したい位置にFlash未対応や、Javascript offの場合に表示させるdivをまず作ります。場合によっては代替画像などでもいいと思います。
例)<div id="flashcontents">java scriptをonにしてください。</div>
idは何でもいいです。
1枚のページで複数のswfを貼る場合は、idがダブらないようにしてくださいね。
swf読み込みの関数を呼び出す
<script type="text/javascript">
var fo = new FlashObject("fla/flash.swf", "flash", "210", "194", "6", "#f6efd9");
fo.write("flashcontents");
</script>
中のパラメーターは順番に
・swfファイルの指定
・embedタグでのID(先ほどの代替divのidじゃありません)
・width
・height
・Flashのバージョン。書き出したバージョンを書けばよい。
・背景色
fo.write("flashcontents");のflashcontentsは、先ほどの代替divのidです。
swfのパラメーターの指定
wmodeなどのパラメーターを指定する場合は以下のような記述になります。
<script type="text/javascript">
var fo = new FlashObject("fla/flash.swf", "flash", "210", "194", "6", "#f6efd9");
fo.addParam("quality", "high");
fo.addParam("wmode", "opaque");
fo.write("flashcontents");
</script>
各パラメーターについては、一度Flashでhtmlをパブリッシュして、中のobjectタグのパラメーターを参考にするとよいと思います。
まとめ
まず、DLしたjsファイルを読み込む。
<script type="text/JavaScript" src="/path/to/swfobject.js">
swfを入れる位置には、以下の例のように記述
<div id="flashcontents">
java scriptをonにしてください。
</div>
<script type="text/javascript">
var fo = new FlashObject("fla/flash.swf", "flash", "210", "194", "6", "#f6efd9");
fo.addParam("quality", "high");
fo.addParam("wmode", "opaque");
fo.write("flashcontents");
ってな感じですが、もしまだお使いと御用の方がいたら参考にしてみていただけると嬉しいです!