連載目次へ >>

　最近ではAjaxの流行もあり，JavaScriptのライブラリがかなり充実していますね。これらのライブラリの関数を始めとしたJavaScriptの関数を，Flashムービーから呼ぶことができれば，Flashムービーだけでは実現が難しい処理も意外に簡単にできてしまうこともあります。

ムービーを表示しているHTMLドキュメントのURIを取得する

　あけましておめでとうございます。本年もよろしくお願いいたします。

　さてさて，図1のムービーでは，ムービーを表示しているHTMLファイルのURI（URL）を表示しています。

図1：ムービーを表示しているHTMLファイルのURIを取得するムービー（クリックするとムービーを表示します）

　Flashムービーでは，ムービー自身のURIは「_urlプロパティ」を使って取得できますが，ムービーを表示しているHTMLファイルのURIまでは取得できません。では，図1のムービーはどのようにしてHTMLファイルのURIを取得しているのでしょうか。実は，Flashムービーから，HTML側に用意されたJavaScriptの関数を実行し，その戻り値をFlashムービーで取得しているのです。

「ExternalInterfaceクラス」を利用すればJavaScript側との通信が可能に

　FlashムービーからHTML側に記述したJavaScriptの処理を実行するには，「ExternalInterfaceクラス」を利用します。ExternalInterfaceクラスは，Flashムービーと，Flashムービーを表示しているプレーヤーの「コンテナ」との通信を行うためのクラスです＊1。

　ExternalInterfaceクラスには，次の二つのメソッドが用意されています（表1）。

表1：ExternalInterfaceクラスのメソッド

メソッド	説明
callメソッド	コンテナ側の関数を呼び出す。引数付きで呼び出すことも可能
addCallbackメソッド	ActionScript側の任意の関数を，コンテナ側から呼び出せるように登録する

　コンテナ側，つまり，HTMLに記述したJavaScriptの関数を実行したい場合には「callメソッド」を使用します。それとは逆方向に，HTMLに記述したJavaScriptからActionScriptの任意の処理を実行するには，まず，「addCallbackメソッド」を使ってActionScript側の関数（メソッド）を登録しておきます。，すると，JavaScript側から任意のタイミングでその関数を呼び出して実行できるようになります。どちらの処理でも，引数の受け渡しをすることが可能です。

FlashムービーからJavaScript側の処理を実行する

　それでは，実際にJavaScript側の処理を実行するFlashムービーを作成してみましょう。

　新規Flashドキュメントを作成し，任意のフォルダへと名前を付けて保存します。そしてそのままメニューから[ファイル]-[パブリッシュ]を選択し，とりあえずFlashムービーを表示するHTMLファイルと，Flashムービーを書き出します（図2）。

図2： HTMLファイルを準備する

　この書き出されたHTMLファイルにJavaScriptのコードを追加していくわけですね。また，一度パブリッシュをしたFlashドキュメント側では，再度パブリッシュを行った際に，JavaScriptの記述を追加したHTMLファイルを上書きして元の状態にしてしまわないように，[ファイル]-[パブリッシュ設定]を選択し，[パブリッシュ設定]ダイアログボックスを表示し，[形式]タブの[タイプ]欄の「HTML」のチェックを外しておくのがお勧めです。

　次に，書き出されたHTMLファイルに以下のようなJavaScriptのコードを追加してください＊2。

<script type="text/javascript">
  //引数として受け取った文字列をダイアログに表示する関数
  function showDialog(message) {
    alert("JavaScript：" + message);
  }
  showDialog("JavaScript側からテスト");
</script>

　JavaScript側で作成した関数「showDialog」を実行すると，引数として受け取った文字列を，alertステートメント＊3によってダイアログボックス上に表示します。

　このコードを追加したHTMLファイルをブラウザで表示してみましょう。すると，「JavaScript側からテスト」という文字列が表示されますね（図3）＊4 。

図3： JavaScriptで表示されたダイアログボックス（クリックするとムービーを表示します）

　JavaScript単体での動作が確認できた所で，今度はこの関数をFlashムービーから実行してみましょう。Flashドキュメント側にボタンインスタンス「callButton」，テキスト入力フィールド「textBox」を作成し（図4），1フレーム目のフレーム・スクリプトに，以下のようにコードを記述します。

図4： ボタンとコードを準備する

//ExternalInterfaceクラスが使用できるようにインポート
import flash.external.*;


//ボタン「callButton」をクリック時の処理
callButton.onRelease = function() {
  var s:String = textBox.text;
  //ExternalInterface.クラスのcallメソッドを使って
  //JavaScript側の関数を呼び出す
  ExternalInterface.call("showDialog", s);
};

　Flashムービーをパブリッシュし，書き出されたFlashムービー（swfファイル）と，先ほどJavaScriptのコードを追加したHTMLファイルをWeb上にアップロードして動作確認をしてみましょう。Flashムービー側のボタンを押すと，Flashムービー側のテキスト入力フィールド「textBox」に入力されている文字列が，JavaScriptの関数「showDialog」によって表示されることが確認できますね（図5）＊5。

図5：FlashムービーからJavaScriptの関数を実行したところ（クリックするとムービーを表示します）

　このように，ExternalInterfaceクラスを利用すると，JavaScript側の関数を呼び出すことができます。手順を整理してみると，

1. HTML側にJavaScript関数を用意する
2. ExternalInterfaceクラスが使えるようにインポート＊6

   //ExternalInterfaceクラスが使用できるようにインポート
   import flash.external.*;
   

3. callメソッドに関数名，引数の値を指定して実行

   ExternalInterface.call("関数名", 引数);
   

となります。

JavaScript側の関数から戻り値を受け取る

　JavaScript側から関数の戻り値を受け取りたい場合はどうすれば良いのでしょうか？ 例えば，冒頭のサンプルのようにJavaScriptのステートメントで得たURIを受け取りたい場合や，ActionScript2.0では実装されていない正規表現＊7を使った文字列の置換え結果を得たい場合はどうすれば良いのでしょうか？

　これらの戻り値は，とても簡単に受け取ることができます。例えば，HTMLのURIを返す関数「getURI」をHTML側のJavaScriptに記述してあるとします。

<script type="text/javascript">
  //URIを返す関数
  function getURI () {
    return location.href;
  }
</script>

　この関数の戻り値を受け取りたい場合には，次のようにActionScript側のコードを記述するだけです。

//ExternalInterfaceクラスが使用できるようにインポート
import flash.external.*;


//ボタン「callButton」をクリック時の処理
callButton.onRelease = function() {
  //JavaScript側の関数「getURI」を実行し，戻り値を受け取る
  var s:String = String(ExternalInterface.call("getURI"));
  textBox.text = s;
};

　callメソッドは，呼び出したJavaScript関数が戻り値を持つ場合には，その値を戻り値として返します。ですので，

var s:String = String(ExternalInterface.call("getURI"));

のように記述するだけで，ActionScript側でJavaScript関数の戻り値を受け取って利用できます（図6）。簡単ですね。

図6：JavaScript側の関数の戻り値を受け取る（クリックするとムービーを表示します）

　Flashムービー側のActionScriptではどうにも解決できないけれども，JavaScriptを使えば簡単，という処理はどんどんJavaScript側に任せてしまうことができますね。

（吉岡 梅） 　[2007/01/19]