| D0605211 | WinXP+IEにおけるFlashムービーのアクティブ化対策 |  |
|
| Name | 憲ちゃん |
| Date | 2006年05月21日 (日) 03時18分 |
| Message | WinXP以降のブラウザで更新プログラムが適用された「IE」では・・・ HTMLに埋め込まれたFlashムービーが再生されても、これまでのように直ちに「ボタン」等が反応せず、 ムービー上にマウスを置くと、ユーザにクリックを促す次のメッセージが表示されます。 ”このコントロールをアクティブ化して使用するにはクリックしてください” したがってFlashのメニューボタン等を各ページに配置しているような場合、ページが変わるたびに、 毎回ムービーをクリックしてからボタンをクリックしなければならないという不便な状態になります。 このような現象を回避する方法については、アドビのサイトの、 ブラウザの更新に備えたアクティブコンテンツ使用Webサイトの準備に詳しく掲載されています。 以下はFlash部分に関する要点で、２種類の方法について説明します。 いずれの方法も「外部JavaScriptファイル」を作成、これをHTMLに読み込んでFlash埋め込みタグを 所定の場所に書き出します。 １．SWFファイルごとに対になる外部JavaScriptファイルを作成して回避する。 これに関しては、 過去記事の■「このコントロールをアクティブ化して・・・」を出さない方法のとおりです。 ２．共通の外部JavaScriptファイルひとつで、サイト内すべてのSWFについて回避する。 ⇒対策実施前のサンプル(sample_a.htm) ※Btnから別ウインドウで開くsample3.htmは対策済 ⇒対策実施後のサンプル(sample_b.htm) activeContent.zip 実施前サンプルは、従来の方法で、Content01.swfとContent02.swfの２つのFlashムービーを、 sample_a.htmに<oblect>及び<embed>を用いて直接埋め込んでいます。 通常この状態のHTMLが既にサイト上にあって、これからの当面の作業としては、 既にあるHTMLファイルを元にして回避策を講じていくことになりますので、 ここではその手順をこのsample_a.htmを用いてご説明していきます。 ------------------------------------------------------------------------ まず最初に、共通の外部JavaScriptファイルである「AC_RunActiveContent.js」を用意します。 「AC_RunActiveContent.js」は、上記アドビサイトからダウンロード又は サンプルの「activeContent.zip」の中のもの（同サイトからDLしたもの）を使用してください。 次に「AC_RunActiveContent.js」ファイルをサイト内の参照しやすいフォルダに置きます。 ひとつのサイトにおける、外部JavaScriptファイルに関しての作業は以上です。 ------------------------------------------------------------------------ ※サンプルは、sample_a.htmを修正したsample_b.htmと同じフォルダに置いています。 ※実際の作業では、修正後のHTMLファイルの名前はそのままです。 ここでは説明用に比較検討する必要があるので、ファイル名を変えて別保存しているだけです。 以降、Flashムービーの埋め込まれたHTMLファイルごとに記述を追加修正していきます。 埋め込みタグの内容が複雑ですと、説明するほうも読まれるほうもややこしくなるので、 まずは簡単な<embed>で埋め込んでいる例でご説明します。 sample_a.htmの中でContent01.swfは、次のようなタグで埋め込んでいます。 <embed src="Content01.swf" quality=high bgcolor=#333366 width=200 height=100> </embed> ------------------------------------------------------------------------ ①まず<head>～</head>内に次のタグを記述します（すべてのHTMLについて同じ記述です）。 <script src="AC_RunActiveContent.js" type="text/javascript"></script> ※ただし、HTMLの保存場所（フォルダ）と「AC_RunActiveContent.js」の位置関係により、 ケースに応じて「AC_RunActiveContent.js」へのパスを正しく記述してください。 ②元の上記タグを<noscript>で囲んで、JavaScript無効のブラウザに備えます。 <noscript> <embed src="Content01.swf" quality=high bgcolor=#333366 width=200 height=100> </embed> </noscript> ③このすぐ上に、以下の<script>～</script>を記述します。 <script type="text/javascript"> AC_FL_RunContent( 'src','Content01','quality','high','bgcolor','#333366', 'width','200','height','100' ); </script> <noscript> <embed src="Content01.swf" quality=high bgcolor=#333366 width=200 height=100> </embed> </noscript> よく見ていただくと・・・ 下の<embed>タグ内の各要素「src」「quality」「bgcolor」「width」「height」について、 「AC_FL_RunContent( )」関数の中に「'要素','内容'」の対で順番に記述している様子が わかると思います。 ※「AC_FL_RunContent( )」関数は「AC_RunActiveContent.js」の中で定義されている関数。 ここで留意するのは・・・ 「src」要素で、swfファイル名の拡張子「.swf」は記載せず前の「ファイル名」のみとします。 以上ですべて完了です。理由はわからなくても、方法はご理解いただけたと思います(*^-^*) ------------------------------------------------------------------------ サンプルはファイル名を変更し、sample_b.htmとして保存していますが、 実際の作業では「上書き保存」してサーバに「上書きアップ」してください。 基本的な方法をご理解いただいたところで・・・ 次に、<object><embed>フルタグの場合の記述についても見ておきます。 sample_a.htmの中のContent02.swfは、次のようなタグで埋め込んでいます。 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" ※改行なし codebase="http://download.macromedia.com/～中略～#version=6,0,0,0" ※改行なし width="200" height="150" id="Content02" align=""> <param name=movie value="Content02.swf"> <param name=quality value=high> <param name=bgcolor value=#996633> <embed src="Content02.swf" quality=high bgcolor=#996633 width=200 height=150 ※改行なし name="Content02" align="" type="application/x-shockwave-flash" ※改行なし pluginspage="http://www.macromedia.com/go/getflashplayer"> </embed> </object> 同様に、これを<noscript>で囲んで、その上に次のように<script>～</script>を記述します。 <script type="text/javascript"> AC_FL_RunContent( 'codebase','http://download.macromedia.com/～中略～/swflash.cab#version=6,0,0,0', 'width','200', 'height','150', 'id','Content02', 'movie','Content02', 'quality','high', 'bgcolor','#996633', 'src','Content02', 'name','Content02', 'pluginspage','http://www.macromedia.com/go/getflashplayer' ); </script> 元の<object><param>及び<embed>の記述に従って各「'要素','内容'」の対を列記していきます。 ※<object><embed>で同じ名称の要素（bgcolor,width,heightなど）があるときは、 ひとつだけ記述します。 ※同様に「movie」及び「src」で、ファイル名の拡張子は記述しません。 そして、フルタグの場合に留意する点は・・・ <object>の「classid」及び<embed>の「type」要素は記述しない、ということです。 なお、サンプルのContent02.swfの「Btn」ボタンをクリックして、 別ウインドウで開く sample3.htm 及びContent03.swf については、 ひとつ下の階層の「folder」フォルダに保存していますので、 sample3.htmにおける上記①の<head>内の記述は、 その位置からみた「AC_RunActiveContent.js」へのパスを記述して・・・ <script src="../AC_RunActiveContent.js" type="text/javascript"></script> このようにしています。 それぞれの具体的な記述内容は、サンプルファイルを参考にしてください。 <関連記事> |
| このページの先頭へへ | |