日記

(主に)Flashで一回クリックしないといけなかった、『IE』の『ActiveX』有効化操作が再び不要になる&回避方法の再掲載!

Internet Exploere(IE)を使っている方で、Flashの埋め込みがあるページで、ある時からFlash領域にマウスを乗せると淵にボーダーが出て、 Flash部分を一回クリックしないとFlashが動かない、という事を経験したユーザーの方はいないでしょうか?

これはMicrosoftEolas Technologiesの埋め込みプログラムに関しての特許で法廷で争っていた時に、その回避策として、2006年4月にIEにおけるActiveXコントロールの処理方法を変更した事で起こったことです。


これは当時Web制作業界では結構騒然となった仕様変更でした。
なぜなら、それまで何もしないでFlashが開始されていたものが、ユーザーが一度クリックをする(=ユーザーによって開始されるという状態)事をしないと動かなくなるという事を示していたからです。

具体的には、「object」「embed」「applet」というタグを用いて、HTML に直接埋め込んだ ActiveX コントロールを読み込む際、有効化するためにクリックを求める仕様になったって事です。

その為、当時の多くのWebページでは、それを回避する仕組みを模索してjavascriptによる制御をする、といった仕組みが生まれました。

確か、当時のCSS Niteでもその挙動についての紹介がありましたね!

名村も当時運用をしていたサイトでFlashをつかっているページを全部洗い出して、修正をしたのを覚えています。


ですが、MicrosoftEolas Technologies和解したことに伴って、2006年4月に実装した上記の有効化操作は、まもなく不要になるらしいです。


Microsoftの公式Blogのエントリーの中を見ていたら、MicrosoftのIE 開発部門で上級製品マネージャを務める Pete LePageさんが、


「(以前の仕様に戻す) この変更が、既存の Web ページの修正を必要とせず、開発者が新しいページを作成する必要もないことは、重要な (かつ素晴らしい) ことだ。われわれは、単純に元の動作に戻す。IE の更新後は、現在 ActiveX コントロールの有効化操作を要求するすべてのページにおいて、そうした操作が不要となり、ただ機能するようになる」

とありました。

これで作り手側としてはちょっと楽になるのかな?と思ったりしていますが、回避方法としては今のところ確立はされているので、現場はそれで作っていくのかも?と思ったりもしています。

あっ、せっかくですから、そのIEで「object」「embed」「applet」というタグを使ってFlashを埋め込んだ時に枠が出て、一回クリックしないと動かなくなるのを回避方法を挙げておきたいと思います。
いまさら感もかななりありますし(笑)、手法としては、他にもあると思いますので、1つの方法として自分の備忘録としても、上げておきたいと思います。


必要なスクリプトのダウンロード


まず、
http://blog.deconcept.com/flashobject/#download
http://blog.deconcept.com/swfobject/#download
(kuroyagiさんからコメントでご指摘をいただき、修正いたしました。)

から
java scriptをダウンロードします(Download SWFObject 1.5)
解凍後、「swfobject.js」を任意の場所へコピー。

スクリプトの読み込み


Flashを使いたいページにflashobject.jsを読み込みます。

例)例)例)<script type="text/JavaScript" src="/path/to/swfobject.js">

Flash未対応や、Javascript offの場合の代替
とか

とかの要素をつくる


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");

ってな感じですが、もしまだお使いと御用の方がいたら参考にしてみていただけると嬉しいです!


著者・名村晋治のプロフィール

名村晋治

株式会社サービシンク

代表取締役 / テクニカルディレクター

名村晋治

不動産業界に特化したWebサイト制作・システム開発をおこなうサービシンクでプロデュース、ディレクションからテクニカル・ディレクターまでを担当。
元プロの声優であり、Webディレクターとして22年のキャリアを持つ。
(詳細は下の「詳しいプロフィール」をクリックしてみてください。

Webブランディングの入門教科書」、「変革期のウェブ」を毎日コミュニケーションズから出版してます。

詳しいプロフィール

大学二年生の96年からWebの制作集団ネイムヴィレッジを主催。
大学卒業の99年までの間に100社ほどのサイト制作の企画、ディレクション、デザイン、Perlでの開発、マークアップに携わる。
大学卒業と同時に俳優になるために上京し俳優修業開始。
2000年からは俳優修業の傍ら不動産検索サイトHOME'Sを運営している株式会社LIFULL(旧:ネクスト)に合流。
俳優としては、舞台演劇、プロの声優としても活動したが最終的30歳を目前に足を洗う。

2005年に株式会社LIFULLが自社媒体に注力するためSips業から撤退する事をきっかけとして、代表の井上とシェイクハンドをして退社。

2005年から株式会社ソナーに合流し取締役なども歴任し不動産業界のサイト制作のディレクションからフロント実装を担当。

2010年1月12日から株式会社サービシンクを立ち上げ、代表取締役に就任。
不動産業界に特化したサイト制作のアートディレクション~HTML実装設計~システム設計のすべてに携わるジェネラリスト。
基軸としてはクライアントの商売に寄り添うために、徹底的に思考を巡らせるためのディレクションを行う。
Webブランディングの入門教科書」、「変革期のウェブ」を毎日コミュニケーションズから出版してます。

最新の記事