swfobject2.xの使い方

FlashをHTMLに貼り付ける方法の中でswfobjectsというJavaScriptでswfを表示させる方法が便利です。今更な感じもしますが、ボクが使ってて気になったところ、例えば表示した時、一瞬Flashの場所が抜けて、あとから表示することによってガクガク表示したり、swfのキャッシュをクリアにするなど、個人的に問題と思ったところを補う形で紹介したいと思います。

まずはさっそくソースコードのコピペ場所を！

//swfobject.jsを呼び出す
<script type="text/javascript" src="swfobject.js"></script>
//表示させるswfコンテンツの設定
<script type="text/javascript"><!--
var flashvars = {hensu: value};
var params = {allowscriptaccess: "always"};
var attributes = {id: "myFlashContent",name: "myFlashContent"};
swfobject.embedSWF("content.swf?u=20091210", "flashContent", "400", "200", "9.0.0", "expressInstall.swf", flashvars, params,attributes);
//--></script>
//FirefoxでFlashコンテンツに触ったときに出る、
//点線（フォーカスのアウトライン）を消す。
<style type="text/css"><!--
object {outline: none;}
--></style>
//実際に表示させる場所に書くHTMLと代替コンテンツ
<div style="height:200">
	<div id="flashContent">
	<h1>代替コンテンツ</h1>
	</div>
</div>

swfobject.jsを呼び出す記述

swfobject.jsはgoogle codeからダウンロードできます。
配布元：swfobject – Project Hosting on Google Code
http://code.google.com/p/swfobject/

ページ右側に「Featured downloads」というところから、swfobjectのzipファイルをダウンロードします。zipを解凍すると「swfobject.js」がありますので、それを任意の場所にアップしてソースコード2行目の記述を、必要であればパスを換えてHTMLに書きます。

//swfobject.jsを呼び出す
<script type="text/javascript" src="swfobject.js"></script>

flashvarsの使い方

swfobject.embedSWFが実際にFlashを表示させる関数です。その関数の引数にいろいろパラメータを渡すことによっていろんなことができます。flashvarsは変数の値をswfに送るための記述です。もちろん、変数を渡す必要がなければ省略できます。

var flashvars = {hensu1: value1, hensu1: "変数２"};

この「flashvars」のなかに入れる値は、変数をActionScriptへ渡すために記述です。phpやJavaScriptなどのプログラムからFlashへ何か値を渡したいときに、

var value1 = "値だよ";
var flashvars = {hensu1: value1, hensu2: "変数２"};

このように書けば「hensu1」というグローバル変数のなかに「”値だよ”」という文字列StringがFlashにわたることになります。ActionScript内の記述では、この「hensu1」と「hensu2」に対して「var hensu1 = new Sting();」や「var hensu1 = “”;」などを書く必要はありません。というのも、変数「hensu1」に格納された値「”値だよ”」がswfにわたってからFlashが再生されるので、せっかく渡った値がリセットされてしまうことになります。Flash内で動作確認する際は「flashvars」が渡す値を仮でActionScript内の変数として書いてデバッグをし、実際にHTMLをブラウザでFlashの動作確認する際にはコメントアウトをしておきましょう。

paramsの設定方法

objectタグの中に設定するparamsが必要であれば追加して書くことが可能ですが省略もできます。FlashPlayerを投下させる意味のある「wmode」の設定が、たとえばJavaScriptで作られたドロップダウン式のメニューとFlashがかぶっている場合に、この「wmode」が良く使われると思います。しかし、wmodeをtransparentにすると日本語入力などのコンテンツに使用すると、文字が入力できないというバグがあるみたいなので使う時には注意してください。
参考サイト：wmode を transparent に設定した際の注意点
http://www.adobe.com/jp/support/kb/ts/228/ts_228635_ja-jp.html

▼pramsのソースコードサンプル

var params = {
	play: "true",
	loop: "false",
	menu: "false",
	quality: "best",
	wmode: "transparent",
	allowscriptaccess: "always"
};

attributesの使い方

objectタグにidとnameを設定する時にこのattributesを使います。いろいろ調べても情報がなく、どういった使い方をするのかよくわかりませんが、、、おそらくIE4やN3などの古いブラウザで表示するのに必要そうな雰囲気がします＾－＾；

var attributes = {id: "myFlashContent",name: "myFlashContent"};

swfobjectができること

１．Internet Explorer（IE）においてのActiveX コントロールのアクティブ化
　いわゆる、IEでみたときにFlashを一回クリックしないと動作しないし触れないのを回避できます。
　ActiveX コントロールのアクティブ化(Microsoft)
　http://msdn.microsoft.com/ja-jp/library/ms537508(VS.85).aspx
　アクティブコンテンツのFAQ(Adobe)

２．FlashPlayer未インストールのユーザーに対しての代替コンテンツの表示

３．再生に必要なFlashPlayerのバージョンが満たされてなかった時に、代替コンテンツを表示させるか、Express Installを用いて最新版のFlashPlayerをインストールしてもらうのを促す。
参考サイト：Express Install 適用ガイド(Adobe)
http://www.adobe.com/jp/devnet/flashplayer/articles/expressinstall.html

４．Flashコンテンツが重要なコンテンツの場合、h1タグを用いて見出しを設置できるSEO対策。

５．パラメータを変数としてswfに渡すことができる。

swfobjectの注意点

・違うドメインへページ遷移するとき
getURLするときは、paramsにallowscriptaccess: “always”を追加する必要がある。
・wmodeの注意点
文字を入力するコンテンツの場合、FlashPlayerの透過を設定するwmode: “transparent”にすると文字が入力できない。
・swfobject.embedSWFの引数に入れる順番は決まっています。
例えば、flashvarsは使わないがparamsを使いたい時には、flashvarsの場所をnullにする必要があります。
▼引数なしの場合のサンプル

var flashvars = null;
var params = {allowscriptaccess: "always"};
swfobject.embedSWF("content.swf?u=20091210", "flashContent", "400", "200", "9.0.0", "expressInstall.swf", flashvars, params);

▼同じようにexpressInstallを使わない場合

swfobject.embedSWF("content.swf?u=20091210", "flashContent", "400", "200", "9.0.0", "", flashvars, params);

おまけ設定

・outline:noneのCSSでFlashの回りに点線を消してしまう。
CSSでobjectのoutlineをnoneにしています。これはFirefoxでFlashを表示させた時、そのコンテンツに対してクリックすると周りに出る点線を消す設定です。キーボードのTabを押すと、ページ内でクリックできる箇所にフォーカスをあてているこの点線を、swfobjectが表示させるobjectタグに対して設定しています。

・Flashに指し換わるdivの上に高さを設定したdivを挟む。
フルFlashコンテンツであれば問題ありませんが、パーツで使用するFlashがswfobjectで展開される前の状態では、一瞬、上下にガクガク表示する現象があります。これはネットの環境やパソコンの性能に左右されるかもしれませんが、ここで予め高さを設定し、backgroundで色や背景画像を設定しておけば見た目に変なことが起きることがありません。