swfobject2.2の使い方

今回は、swfobject2.2の使い方に関する学習メモです。昔は、AdobeのAC_RunActiveContent.jsを使うことが多かったですが、現在では完全にswfobjectが主流なようです。一応、swfobjectのコードを書き出してくれるツールもあるようですが、今回は使用せずにソースコードを編集していきます。

まずは、こちらからswfobjectをダウンロードします。ダウンロードしたzipを解凍すると必要なファイルと簡単なサンプルを用意してくれています。その中でswfobject.jsとexpressInstall.swfを使用したいHTMLファイルと同じディレクトリに入れます。もし、この2つのファイルを違うディレクトリに置きたい場合は、パスが変わってきますので適宜修正して下さい。

swfobject2.2では、staticdynamicという2つの使い方が用意されています。それぞれ利点があるので、順番に見て行きましょう。

static

以前のswfobjectでは、JavaScriptがOffの状態では表示できなかったようですが、swfobject2.2をstaticで使用するとJavaScriptがOffの環境でもFlashのswfを表示させることができます。その分、若干記述量は多くなり、修正する場合は2箇所を修正する必要があるので注意が必要です。

swfobject2.2をstaticで使用する場合、まずHTMLの<head>領域で下記のように記述します。registerObject()の第1引数では、後述するobjectタグのidを指定します。第2引数では必要とするFlashPlayerのバージョンを指定します。第3引数では、expressInstall.swfのパスを指定します。expressInstall.swfは、ユーザーのFlashPlayerのバージョンが低い場合に自動でアップグレードしてくれます。必要ない場合は、第3引数は省略可能です。

HTML & JavaScript

<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("my-id", "9.0.0", "expressInstall.swf");
</script>

次にコンテンツ部分を記述します。IE用とそれ以外のブラウザ用で2箇所objectタグを記述します。paramに関しても2箇所記述する必要があるので若干記述量は多くなりますが、コピペすれば問題ないでしょう。また、内側のobjectタグの内部にFlashを表示できない環境用のHTMLを記述します。

HTML

<object id="my-id" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="640" height="480">
<param name="movie" value="hoge.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#000000" />
<param name="play" value="true" />
<param name="loop" value="false" />
<param name="wmode" value="opaque" />
<param name="scale" value="showall" />
<param name="menu" value="false" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="true" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="hoge.swf" width="640" height="480">
<param name="quality" value="high" />
<param name="bgcolor" value="#000000" />
<param name="play" value="true" />
<param name="loop" value="false" />
<param name="wmode" value="opaque" />
<param name="scale" value="showall" />
<param name="menu" value="false" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="true" />
<!--<![endif]-->
<div>
<p>
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
</p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>

dynamic

次にdynamicでの使い方を見ていきます。swfobject2.2をdynamicで使用する場合、前述のstaticと違いJavaScriptがOffの環境では、仮にユーザーのマシンにFlashPlayerがインストールされていてもFlashを表示できないので注意が必要です。

swfobject2.2をdynamicで使用する場合は、まずHTMLの<head>領域で下記のように記述します。flashvarsでは、swfにパラメータを渡したい場合にJSON形式で指定します。paramでは、指定したいパラメータをJSON形式で指定します。attributesは、objectタグにid等の属性を指定したい場合に同じくJSON形式で指定します。

embedSWF()の第1引数でswfファイルのパスを指定し、第2引数では後述する置き換えたい要素のidを指定します。第3引数はwidth、第4引数はheight、第5引数はFlashPlayerのバージョンを指定します。第6引数以降はオプションで省略可能です。

HTML & JavaScript

<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
var params = {quality:"high", bgcolor:"#000000", play:"true", loop:"false", wmode:"opaque", scale:"showall", menu:"false", devicefont:"false", salign:"", allowScriptAccess:"sameDomain", allowFullScreen:"true"};
var attributes = {};
swfobject.embedSWF("hoge.swf", "my-id", "640", "480", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
</script>

次は、コンテンツ部分の記述です。まず、objectタグで置き換えたい要素のid属性にembedSWF()で指定したidを指定します。このidを指定した要素がswfobjectによって、objectタグに置き換えられます。要素の中にJavaScriptがOffの環境やFlashPlayerをインストールしていない環境で表示させたい内容を記述します。

HTML

<div id="my-id">
<p>
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
</p>
</div>

以上、staticとdynamicの2通りの使い方を見てきましたが、基本的にはstaticの方が良いかなと感じています。ただflashvarsでパラメータを動的に生成する場合等は、dynamicの方が扱いやすいと思います。適宜、使い分けていきたいと思います。