日記

(主に)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");

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


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

名村晋治

株式会社サービシンク

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

名村晋治

1996年よりWeb制作に携わり、キャリア25年目のWebディレクター

大学在学中の1996年「Web制作集団ネイムヴィレッジ」を設立し100社を超えるサイト制作の企画、ディレクション、デザイン、マークアップ、システム開発に携わる。

2000年不動産検索サイトHOME'Sを運営している株式会社LIFULL(旧:ネクスト)に合流。
2005年からはWeb制作会社に合流し取締役を歴任。同社ではフロント実装からディレクションまでを担当。

2010年株式会社サービシンクを立ち上げる。 不動産業界に特化したサイト制作の、アートディレクション~HTML実装設計~システム設計のすべてに携わるジェネラリスト。基軸としてはクライアントの商売に寄り添う為に、徹底的に思考を巡らせる為のディレクションを行う。

Webブランディングの入門教科書」、「変革期のウェブ」を「マイナビ出版」から出版。

2000年から「Webディレクター育成講座」を独自開催し、40時間のカリキュラムを通し「仕事を回す事ができる」Webディレクター育成手法には定評があり。
首都圏のみならず地方でも講座実施、参加者は延べ700人を超える。

詳しいプロフィール

もう一つのキャリアとしてプロとして舞台俳優、声優。 1996年から養成所に通い始め2004年に廃業するまでの間はWebディレクターと二足のわらじでの活動。

俳優としては、東京の小劇場でシェイクスピアやマリヴォーといった古典を中心に舞台に出演、またNHK海外ドラマや、洋画等、ゲームでの声優を行っていました。

俳優時代の経験を活かし、演劇の訓練メソッドを利用した「コミュニケーションスキル」向上を目指したセミナー・研修も実施しています。

最新の記事