FABridgeを試してみた⇒swfobject2.0＋Firefox＋FABridge⇒上手く動かない疑惑。
FlashムービーをロードするためのJavaScriptライブラリ「swfobject - Google Code」の現バージョンである2.0RC1を使って表示したFlashムービーが、FlashムービーをJavaScriptから操作するAdobe製ライブラリ「FABridge」と組み合わせて使えない。どうやらブラウザをFirefoxにすると発生する現象のようだ。俺が今丁度その問題に直面している。
ということで、この件について色々検証してみた。
FABridgeの準備。
まず、FABridgeを使う準備。まずはインストールから。
Flex SDKを使ってる場合、SDK_HOME/frameworks/javascript以下にソースが置いてあるので、クラスパスを通すだけ。Flex Builder利用の場合は知らん。そんな高価なアプリ持ってる人は羨ましいですねぇとしか思えない。
で、次はコーディング。ActionScript3.0(*.as)だけで片付ける場合は、
JavaScript から Flash を操作できるツール、Flex-Ajax Bridge(FABridge) を試してみました。
JavaScript から Flash を楽々操作できる FABridge [てっく煮]
を参照してコードを書いてください。ただし、FABridgeインスタンスを格納する変数の位置は、てっく煮にあるコンストラクタ内のローカル変数ではなく、クラスのメンバのほうが良いと言う噂もある。FABridgeのサンプルソースはメンバにしてあった。こんな感じ。
public class Main extends Sprite{
import flash.display.*;
import bridge.FABridge;
private var bridge:FABridge;
public function Main(): void {
bridge = new FABridge();
・・・
確認は一切してないので、ローカル変数でOK論の方が正しい可能性大。
Flexを使う場合は、<mx:Application>タグの直下に、
<fab :FABridge xmlns:fab="bridge.*" />
と書き入れればいい。
次にhtmlの準備。結構簡単。
このようなタグを入れればいい。処理の部分には、メソッドを呼びつけたりプロパティをgetしたりする処理を記入。メソッドはpublicなものならそのままアクセス可能。プロパティはsetXXX/getXXXに変わってるらしい。
swfobjectの準備
次に、swfobject.jsを準備。「swfobject - Google Code」からgeneratorと本体をダウンロードし、解凍する。で、generatorの方のindex.htmlを開き、必要事項を入力してGenerateボタンを押すだけという超簡単な仕組み。何も変更せずにいきなりボタンを押すと、以下のコードが出来上がる。
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("myFlashContent", "9.0.0");
</script>
</head>
<body>
<div>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="600" id="myFlashContent">
<param name="movie" value="untitled.swf" />
<!--[if !IE]>-->
</object><object type="application/x-shockwave-flash" data="untitled.swf" width="800" height="600">
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</div>
</body>
</html>
これで出来上がるのは、オプション1とか呼ばれてる代物。標準準拠マークアップを直接ページに埋め込んだ上で何がしかしているらしい。詳しくは「SWFObject v2.0 ドキュメント日本語訳 : Media Technology Labs (MTL) : メディアテクノロジーラボ ブログ」を参照のこと。
swfobjectバージョン1.5の時代だと、埋め込みタグは動的に生成されていた。バージョン2.0では、この機能はオプション2とか呼ばれてる。あらかじめhtml内部に適当なidを持つ<div>タグを生成し、そこにJavaScriptでFlashムービーを組み込む。
＋
これで、Flashムービーが埋め込まれる。
Firefox登場で、FABridgeストップ祭！
と言うことで、上記の手順を経て作成したFlashムービーとhtmlファイルをFirefoxでロードし、早速FABridgeでFlashムービーを操作する。すると、Firebug上にこんなメッセージが出る。
var flexApp = FABridge.flash.root();
swfobjectのオプション1でもオプション2でも同じメッセージが出る。一方IEだと問題なく動作する。swfobjectのバージョンを1.5にした場合も、問題なく動作する。
Firebugで見たところ、swfobject1.5だと以下のタグがHTMLに埋め込まれることによってFlashムービーがロードされている。
<embed id="ビューワ" width="800" height="600" quality="high" bgcolor="#ffffff" style="" src="untitled.swf" type="application/x-shockwave-flash"/>
</div>
見てわかるように、元の<div>タグが生きている。
一方swfobject2.0のオプション２の場合、このようになる。
元の<div>タグが消去され、代わりに<object>タグが入ってる。この差が原因だろうか？誰か解決して下さい。俺はswfobject1.5を使います。
そこまでわかっているならObjectに置き換えするパッチ作ると良いですよ
コメント by 匿名 — 2008年12月10日 水曜日 @ 12:32:20
>匿名 さん
コメントありがとうございます。
一見分かってるように見えるかもしれませんが、
ただ事実を列挙しただけで、
「こうなってるから後はこの部分を直せばいい」
とかはわからないんですよ。
コメント by 太郎 — 2008年12月11日 木曜日 @ 1:21:40