SWFObject を使う

そこで、使いたいのが、Flash を手軽に画面に表示してくれる JavaScript のライブラリ SWFObject です。このライブラリは、YouTube、フォト蔵をはじめ、多くのFlashを利用するWebサイトで採用されています。

なぜこのライブラリが使われているのかと言うと、前述の IE の枠が表示される問題も回避できるのも理由ですが、Flash のバージョン判定も行うことができ、、Flash playerのアップデートを自作のswf内で処理できるという「Express Install」にも対応しています。また、Flash に値を渡す方法なども用意されています。加えて、ライブラリのライセンスも、MITライセンスであるので、自由に利用することができる点も選ばれている理由でしょうか。

ここでは、SWFObject のダウンロードから、利用方法までをまとめてみます。

SWFObject の入手

SWFObjectは、次のサイトからダウンロードすることができます。

- deconcept > SWFObject: Javascript Flash Player detection and embed script

また、このドキュメントを翻訳した日本語のページが以下にあります。

- trick7.com blog

簡単な使い方

SWFObjectの簡単な使い方は、次のようになります。例えば、example.swf というファイルを表示する例です。上記サイトより、ダウンロードしたファイルに梱包されている swfobject.js と、表示したいFlashファイル example.swf を同じディレクトリに配置したという前提です。

<!– (*1) ライブラリの取り込み –>
<script type="text/javascript" src="swfobject.js"></script>

<!– (*2) Flashを表示する箇所を指定する –>
<div id="flashcontent">
※ここに Flash Player がインストールされていない場合の処理を書く。
※一般的には、Flash Player のダウンロードサイトへのリンクを記述。
※SEO対策用のキーワードを入れる場合もあるみたいです。
</div>

<!– (*3) Flash を表示するコード –>
<script type="text/javascript">
 var so = new SWFObject("example.swf", "example", "600", "400", "7", "#F0F0F0");
 so.write("flashcontent");
</script>

上記の例は、分かりやすく冗長に書いています。基本的に、３つのパートから成ります。まずは、コード中の(*1) にあるように、swfobject.js の取り込みを行います。

次に、コード中の(*2) ですが、これは、Flash を表示する部分（Flashの表示に置き換わる部分）を決めます。div などのタグに、任意の id (ここでは、flashcontent)を指定します。そして、タグの内側には、Flash が表示できなかった場合の処理などを、記述しておきます。

そして、コードの(*3)の部分で、Flash を表示するスクリプトを書きます。スクリプト部分の１行目は、SWFObject というオブジェクトを生成している部分で、２行目で実際に Flash の表示タグを書き込みます。

SWFObject の生成は、以下のような引数を指定して行います。

new SWFObject(
  [SWFファイル名],
  [embed id],
  [横幅],
  [高さ],
  [Flashのバージョン],
  [背景色]);

任意の値を渡す場合

Flash に任意の値を渡したい場合には、次のように「addVariable」メソッドを使用します。

<script type="text/javascript">
 var so = new SWFObject("example.swf", "example", "600", "400", "7", "#FFFFFF");
 so.addVariable("var1", "value1");
 so.addVariable("var2", "value2");
 so.write("flashcontent");
</script>

Flashの表示パラメーターを指定する場合

また、背景を透明にするかどうか、Flashのムービー再生クオリティを指定する場合など、Flash表示のパラメーターを指定する場合には、「addParam」メソッドを使用します。

<script type="text/javascript">
 var so = new SWFObject("example.swf", "example", "600", "400", "7", "#FFFFFF");
 so.addParam("quality", "low");
 so.addParam("wmode", "transparent");
 so.write("flashcontent");
</script>

まとめ

このように、HTMLに、Flash や Flex のファイルを表示する際には、JavaScript のライブラリである、SWFObject を使うのが便利です。しかし、YouTubeの動画配布用コードのように、最低限の、object タグ、embed タグを記述することで用を成してしまう場合もあります。状況に応じて、必要な方法を選択することが賢いやり方だと思います。