八角研究所 : FlashをHTMLに貼るライブラリ swfobject 2 を使う

FlashをHTMLに貼るライブラリ swfobject 2 を使う

Flash を HTML に貼る時によく使われるのが、swfobject という JavaScript ライブラリです。既に多くのFlash系サイトで使われています。swfobject の資料を探すと、1.5 系のものが多く見つかりますが、本稿執筆時点での最新版は、2.1 です。そこで、本稿では、2.1 で変更になった使い方や、最新機能の魅力を紹介してみようと思います。

swfobject について

swfobject は、Flash/Flex を、Web ページに貼りつけるのに便利な JavaScript ライブラリです。ライセンスも、MIT Licenseということで、使い手が良いものとなっています。以前、本連載の中で「Flash や Flex をHTMLに貼るコードの考察」として、Flash や Flex を HTML に貼る場合、どのようにしたら良いのかを考察してみました。この中で、swfobject を紹介しました。このときは、swfobject 1.5 について紹介しましたが、バージョンがあがり、2.1 になったので、改めて使い方を紹介します。

(参考) Flash や Flex をHTMLに貼るコードの考察

swfobjectの入手

swfobject は、google code のプロジェクト swfobject からダウンロードすることができます。2.1の時点で、３つダウンロードファイルがありますが、基本的には「swfobject_2_1.zip」をダウンロードして使います。

http://aoikujira.com/demo/hakkaku/rc/20080907_web-swfobject.png

swfobject
http://code.google.com/p/swfobject/

基本的な使い方

基本的な使い方が、swfobject 1.5 のときと変わっています。2.x になって、よりシンプルに記述できるようになりました。

ここでは、たとえば、hoge.swf という名前のFlashファイルをページ中に埋め込むことを考えてみます。

まず、swfobject のアーカイブを解凍します。そして、HTMLに貼り付けたい Flash ファイル「hoge.swf」と、アーカイブの中にある「swfobject.js」というファイルを、Webにアップロードします。

そして、HTMLファイルには、次のように記述します。

<html><body>

<!-- ここに Flash が表示される -->
<div id="idhoge"></div>

<!-- ここからFlashの表示用のコード -->
<script type="text/javascript" src="swfobject.js"></script>

<script type="text/javascript">
  swfobject.embedSWF("hoge.swf", "idhoge", "300", "200", "9.0.0");
</script>

</body></html>

→実際に表示してみたところ

以下、詳しく解説します。

swfobject では、まず、Flashファイルを表示する div タグを用意します。そして、この div タグには、id をつけておきます。

<!-- ここに Flash が表示される -->
<div id="idhoge"></div>

次に、swfobject が使えるように、ライブラリの取り込みを行います。（src属性を指定してjsファイルのパスを指定します。ここでは、swfファイルと同じパスに置いた場合を想定しています。）

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

最後に、実際に、Flashファイルを表示するためのコードを一行記述します。

<script type="text/javascript">
  swfobject.embedSWF("hoge.swf", "idhoge", "300", "200", "9.0.0");

</script>

基本的な、swfobject.embedSWF() の引数は、次のようになっています。

swfobject.embedSWF("表示したいFlashファイル", "表示するid",
    "Flashの幅", "Flashの高さ", "要求するFlashのバージョン");

追加オプション

Flashファイルを貼り付けるときに、パラメータを渡したい場合が多くあります。そんなときは、embedSWF() メソッドにさらに次のパラメータを続けます。

swfobject.embedSWF("Flashファイル","表示id","幅","高さ","Flashバージョン",
  "expressInstall.swf",
  flashvarsオブジェクト,
  paramsオブジェクト,
  attributesオブジェクト);

ちなみに、flashvars は、Flash自身に渡すパラメータで、paramsオブジェクトは、Flashプラグインに渡すパラメータです。params オブジェクトには、背景を透明にするとか、全画面表示を許可するなどの指定を行います。

例えば、スケールモードの指定や全画面表示を許可する場合には、次のように記述します。params オブジェクトには、オブジェクトの初期化の方法を利用して記述します。

var flashvars = {};
var params = {
  scale:'noScale',
  salign:'lt',
  menu:'false',
  allowfullscreen :'true'
};
var attributes = {};
swfobject.embedSWF("hoge.swf", "idhoge", "300", "200", "9.0.0",
  "expressInstall.swf", flashvars, params, attributes);

ちなみに、"expressInstall.swf"というのがありますが、これは、swfobject に付属のswfファイルで、Webにアップロードしておきます。これにより、Flash のバージョンが低い時に、自動アップデートを実行させることができます。

貼り付けコードのジェネレータを使おう

さて、swfobject のもう１つの魅力は、自動で HTML のコードを生成するジェネレータにあります。ジェネレータを使うには、ダウンロードページにある「swfobject_generator_1_1_html.zip」を使います。（あまり意味がないと思うのですが）AIR版もあるのでインストールして使うこともできます。

このジェネレータを使うことで、静的なHTMLコードと、JavaScriptによる動的なコードの２種類を生成することができます。

swfobjectのジェネレータ

まとめ

以上、swfobject 2.1 の使い方を紹介しました。Flash を HTML に貼り付けるのには、Flash CS3以前の方法を使うのは、なかなか面倒です。そこで、swfobject を使うことで、気軽に Flash ファイルを貼り付けることができます。

Flash ファイルをHTMLに貼り付けたい場合には、参考にしてください。

Posted by クジラ飛行机 | 2008年09月17日 10:25 | permalink

このサイトについて

株式会社八角研究所のWEBサイトですよー。いろんなものを創り出すことのできる環境をコツコツ構築中。いったい、いつになったらできるのか。この技術情報サイトもそのための活動の一環のつもり。

執筆者紹介

クジラ飛行机

くじらはんど(http://kujirahand/)にて、日本語プログラミング言語「なでしこ」(IPA未踏ユース採択)、テキスト音楽「サクラ」(OSPオンラインソフト大賞入賞)など多くのオンラインソフトを開発。著書に「Flexプロフェッショナルガイド」「なでしこ公式バイブル」、「一週間でマスターするActionScript3.0」など。