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

SEの竹村です。

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

▼JavaScriptからFlashの関数を呼ぶ - Flash Java Script Integration Kit
https://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は、ちゃんと期待した通りに表示されました。

このように実装しやすい点も含めて、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