SWFObject: Flash/FlexをWeb ページに貼りつけるのに便利なJavaScriptライブラリ

Objectタグと、Embedタグを併用する様のMacromedia(Adobe)の標準のFlashの埋め込み方は既にご存知のことと思います。Flashのソフト上からパブリッシュした際のデフォルトの出力方法になっているので、互換性も高く、多くのブラウザをカバーしています。

しかしながら、プラグイン検出がないので、ユーザーによっては、コンテンツ表示が崩れたり、見れなかったり、プラグインをインストールしていないIEユーザーには「ActiveXをインストールしますか?」というダイアログボックスが表示されたり、Mozillaベースのブラウザでも、似たような問題が起きるいくつかの問題点があります。

特に、embedというタグは、どのバージョンのHTML、XHTMLにもありません。しかし、object タグの仕様の違い(あるいは、サポートしていない、バグの多さ)の為に、保険としてembedタグが使われています。HTMLにswfファイルを埋め込む際にembedタグやobjectタグを使わずにSWFObjectを使うという方法があります。それでは、今回紹介する「SWFObject」というFlash/FlexをWeb ページに貼りつけるのに便利なJavaScriptライブラリです。swfobject_logo

ライセンスは「MIT License」ですから、使い手が良いものとなっています。

[使用方法]

1)、次のURLから最新版をダウンロードして解凍したのちサイト内に設置。(http://code.google.com/p/swfobject/downloads/list )、まず利用するページにてswfobject.jsを呼び出す。


2)、swfを挿入するブロックをid付きで設置しておく

javascriptが有効じゃなかった時のコンテンツ

実際の呼び出し(ヘッダでもどこでもいいので)


3)、flashvarsやparamタグに値を渡したり、objectタグにidなどの属性をつけたりするには

swfobject.embedSWF(”swfのURI”, “挿入するID”, “幅”, “高さ”, “プレイヤーのバージョン”, “expressInstall.swfのURI”, flashvarsオブジェクト, paramsオブジェクト, attributesオブジェクト);

という記述になる。上記のflashvarsオブジェクトとかは以下のような感じで記述して渡してあげるといい。

var flashvars = { name1 : ‘hello’, name2 : ‘hoge’ };
var params = { menu : ‘false’ };
var attributes = { id : ’swfPlayer’, name : ’swfPlayer’ };

渡す値がないって場合には

var flashvars = {};

というように空のオブジェクトで渡すとか、

var flashvars = null;

でもいいみたい。
ちなみに”expressInstall.swfのURI”っていうのはswfobjectをダウンロードして解凍したら一緒に入っているのでそれも合わせてサイト内に設置しておく。

[関連リンク]

http://code.google.com/p/swfobject 公式サイト

http://blog.deconcept.com/swfobject/ 作者のブログ

http://www.adobe.com/jp/devnet/flashplayer/articles/swfobject.html SWFObject 2を用いたFlash Playerのバージョン検知とSWFファイルの埋め込み

http://blg.emzah.com/archives/295  SWFObjectを使う場合のご注意。

http://phpspot.org/blog/archives/2006/10/flashhtmljavasc.html  Flashプレイヤーの検出とHTML埋め込みを簡単に行えるJavaScriptライブラリ「SWFObject」

http://www.drk7.jp/MT/archives/001481.html  swfobject.jsを使って Flash と代替画像を切り替える方法

http://www.scratchbrain.net/blog/ver2/entries/000481.html  SWFObject (1.5と2.0)のFlash Playerバージョンチェック注意

2 thoughts on “SWFObject: Flash/FlexをWeb ページに貼りつけるのに便利なJavaScriptライブラリ”

Leave a Reply

Your email address will not be published. Required fields are marked *