ホーム » ビジネスブログ » RIA (システム開発) »

JavaScriptからFlashの関数を呼ぶ:getURLでなくExternalInterfaceを使用する利点

2008年5月13日

JavaScriptからFlashの関数を呼ぶ:getURLでなくExternalInterfaceを使用する利点

投稿者 竹村

SEの竹村です。


弊社のGoogle Analyticsを確認すると、下記の記事が結構見られているようです。

▼JavaScriptからFlashの関数を呼ぶ - Flash Java Script Integration Kit
http://www.ark-web.jp/blog/archives/2006/02/javascriptflash_1.html

上記のブログでは、JavaScriptとFlashを連携させるために「osflash: Flash JavaScript Integration Kit」を使用していました。ですが、この記事は2006年と古くなっており、現在私が実際に利用しているライブラリとは異なるため、新たに記事を書くことにしました。


さて、現在ではJavaScriptとFlashを連携させるために利用するツールとして「ExternalInterfaceクラス」を利用します。このクラスは Flashバージョン8以上 が必須となりますが、利用方法がFlash Java Script Integration Kitと同じくらい簡単なため、可能な限りこちらを使うことをお薦めします。

また、ExternalInterfaceでJavaScriptとアクセスする利点を今回案件を通じて見つけたので、そのご紹介をしつつ、使い方を簡単に説明します。

まずは、FlashからJavaScriptの関数を呼び出すのに、Flashの古くから利用できる getURL() という関数を使用します。
例えば、下記のように使用して実行します。下記のgetURLのサンプルはこちら

■index.htmlの記述抜粋
<script type="text/javascript">
function hello() {
  alert('hello from flash');
}
</script>

■ActionScriptの記述抜粋
getURL("javascript:void(hello());");

上記の場合は、引数無しでJavaScriptを呼び出していますが、これが引数ありで呼び出す場合、Object型を渡すのは getURL() を利用する場合に工夫が必要です。
なぜなら、まずは普通にActionScriptで組んだサンプルをご覧ください。

■index.htmlの記述抜粋
<script type="text/javascript">
function receive_from_flash(oObject) {
  var sText = '';
  for (var i in oObject) {
    sText += i +":"+ oObject[i] +"\n";
  }
  alert(sText);
}
</script>

■ActionScriptの記述抜粋
var oObject:Object = {test1:'foo', test2:'bar'};
getURL("javascript:void(receive_from_flash("+ oObject +"));");

期待するalertは以下のように表示されることでした。

test1:foo
test2:bar

ですが、実際に走らせてみるとエラーが出ます。
エラー内容はFirebugsで見ると下記のように表示されます。

(×) missing ] after element list
void(receive_from_flash([object Object]));

これは、getURLで式が評価されるときに oObject が下記のように [object Object] となったためです。

getURL("javascript:void(receive_from_flash([object Object]));");

では、どうすればよいかというと、oObjectを展開して渡せばよいのです。つまりこうです。

getURL("javascript:void(receive_from_flash({test1:'foo',test2:'bar'}));");

ただ、これは渡すObjectが大きい時は結構面倒ですね。ObjectにObjectが入れ子していて、さらにArrayが入ってきて…となると展開するのは面倒です。


この煩雑さからも、ExternalInterfaceの場合は解放されます。

先ほどのFlashからJavaScriptへ値を渡すコードのExternalInterfaceを使用して組んだサンプルをご覧ください。

■index.htmlの記述抜粋
<script type="text/javascript">
function receive_from_flash(oObject) {
  var sText = '';
  for (var i in oObject) {
    sText += i +":"+ oObject[i] +"\n";
  }
  alert(sText);
}
</script>

■ActionScriptの記述抜粋
import flash.external.*;
var oObject:Object = {test1:'foo', test2:'bar'};
ExternalInterface.call("receive_from_flash", oObject);

結果のalertは、ちゃんと期待した通りに表示されました。

alert.gif

このように実装しやすい点も含めて、JavaScriptとFlashの連携には ExternalInterface を利用するとよいでしょう。詳しい使い方や、仕様については下記を参考にされるとよいと思います。


参考資料:
第35回 FlashムービーとJavaScriptを連携させてみよう
http://itpro.nikkeibp.co.jp/article/COLUMN/20070118/259015/

外部APIを使用したFlashとJavaScriptの接続
http://www.adobe.com/jp/devnet/flash/articles/external_interface.html
上記のFlash Paper版
http://www.himco.jp/articles/pdf/external_interface.swf

投稿者 竹村 : 2008年5月13日 10:50

カテゴリー: RIA (システム開発)

タグ: JavaScript Flash Integration Kit osflash ExternalInterface getURL ExternalInterface.call


Movable Type用高機能メールフォーム生成プラグイン A-Formの詳細へ
Movable Type用会員限定サイトプラグイン A-Memberの詳細へ
Movable Type用予約サイト構築プラグイン A-Reserveの詳細へ
ARK-Web×CSR(企業の社会的責任)

アークウェブの本

Zen Cartによるオンラインショップ構築・運用テクニック―オープンソース徹底活用

Zen Cartによるオンラインショップ構築・運用テクニック―オープンソース徹底活用

内容充実のZen Cart公式本(v1.3対応)がついに発表です。アークウェブのスタッフをはじめZen-Cart.JPの中心メンバーが共著で執筆しました。続きを読む

Movable Type プロフェッショナル・スタイル

Movable Type プロフェッショナル・スタイル

ビジネスサイト構築におけるCMSとしてのMTの活用方法について、豪華執筆陣による実践的MT本です。八木が共著で執筆しました。続きを読む

Web屋の本

Web屋の本

Web 2.0時代の企業サイトの構築・運用などの戦略を考える「Web屋の本」 (技術評論社)を、中野・安藤が執筆しました。続きを読む

新着はてブ

Loading

アーカイブ

応援しています

  • キッズ・セーバー
  • ソロモン・リリーフ ─ソロモン諸島を応援する有志による、震災復興支援プロジェクト─

    (終了しました)

RSS配信

 

サービスおよびソリューション一覧


最新情報・投稿をチェック


このページのトップに戻る

Photo by A is for Angie

Powered by Movable Type Pro 6.0.1