swfobject.js を使って Flash と代替画像を切り替える方法

バナー配信とかでよくあるアレです。flash が使える環境の場合には Flash で広告を配信して Flash が使えない環境の場合には画像を表示するってヤツです。

Flash まわりにあまり詳しくない僕のところにそんな要望が来ました。
ちょっと調べてみたら、やっぱりライブラリが存在していました！　ヽ(＾A＾ )ﾉ　ラッキー☆

Embedding Adobe Flash Player content using SWFObject 2　ってライブラリです。GoogleCode 上で公開されています。

さらに嬉しいことに、「SWFObject v2.0 ドキュメント日本語訳 : Media Technology Labs (MTL) : メディアテクノロジーラボ　ブログ」で日本語訳が公開されていますので、英語が苦手な方でも安心ドキュメント。※最新のドキュメントより若干古いような気がするけど・・・

- スポンサーリンク -

さて、お題目の swfobject.js を使って Flash と代替画像を切り替える方法についてです。

サンプルコード

<script type="text/javascript" src="swfobject.js"></script>

<div id="flash_test01">
<img src="banner01.jpg">
</div>

<script type="text/javascript">
  swfobject.embedSWF("test.swf", "flash_test01", "300", "120", "19.0.0");
</script>

まず初めに swfobject.js を読み込みます。
代替画像を div で囲んで id を定義します。
swfobject.embedSWF メソッドを使って動的に Flash の embed タグを生成します。
swfobject.embedSWF("swf ファイルのパス", "div で定義した id", "横幅", "縦幅", "flashのバージョン");　と指定します。

Flash のバージョンも指定可能なので、特定のバージョン以下の場合に別コンテンツを表示。なんてことにも応用可能です。

表示テスト１（Flashのバージョンを 9.0.0 と指定しているので、ほとんどの環境で Flash が表示されるはず。）

表示テスト２（Flashのバージョンを 12.0.0 と指定しているので、代替画像が表示されているはず。）

いやぁ～実に便利です。というか、長ったらしい object タグと embed タグを書くよりも遙かに便利です。

JavaScript が無効化されていると動作しませんが、今時いいでしょ・・・と思ったら、その考え方は、SWFObject 1.5 まででお終い。SWFObject 2.0 では対応策がサポートされているみたいですね。swfobject_2_1.zip の中に入っている index.html が 2.0 書式版で index_dynamic.html が 1.5 書式版のようです。

v1.5 では JavaScript をオフにしてるユーザーは、とにかく Flash が見れない
という問題を解決するために登場したようです。まぁ JavaScript をオフにするのはユーザーの意識的な行動によるものなので、そこは諦めてもいいだろとは思ったりもしますが、そこもサポートしたのが、「v2.0のオプション１」です。で、旧来のv1.5的な埋め込み方が「v2.0のオプション２（別名：v2.0のダイナミックエンベッド）」というわけです。

まぁ～ぶっちゃけ 1.5 版の書式の方が使いやすいですわ。

より詳しい最新情報が必要な方は、やはりオリジナルドキュメントの
documentation - swfobject - Embedding Adobe Flash Player content using SWFObject 2 - Google Code
を読みましょう！

What is SWFObject?
Why should you use SWFObject?
Why does SWFObject use JavaScript?
Should I use the static or dynamic publishing method?

辺りは日本語訳と結構差分ができているので、読んでおいた方が良いと思われます。

最後に何ですけど SWFObject 2.0 は MIT License なので使ってるよーって明記が必要です。
licenses/MIT_license - Open Source Group Japan Wiki から MIT ライセンスの定義を引用

以下に定める条件に従い、本ソフトウェアおよび関連文書のファイル（以下「ソフトウェア」）の複製を取得するすべての人に対し、ソフトウェアを無制限に扱うことを無償で許可します。これには、ソフトウェアの複製を使用、複写、変更、結合、掲載、頒布、サブライセンス、および/または販売する権利、およびソフトウェアを提供する相手に同じことを許可する権利も無制限に含まれます。
上記の著作権表示および本許諾表示を、ソフトウェアのすべての複製または重要な部分に記載するものとします。
ソフトウェアは「現状のまま」で、明示であるか暗黙であるかを問わず、何らの保証もなく提供されます。ここでいう保証とは、商品性、特定の目的への適合性、および権利非侵害についての保証も含みますが、それに限定されるものではありません。作者または著作権者は、契約行為、不法行為、またはそれ以外であろうと、ソフトウェアに起因または関連し、あるいはソフトウェアの使用またはその他の扱いによって生じる一切の請求、損害、その他の義務について何らの責任も負わないものとします。

- スポンサーリンク -