アクセシビリティ
デベロッパーリソース

目次

    
  1. はじめに
  2. Flash Player 8のセキュリティ変更
  3. Flash 8以前の接続メソッド
  4. ExternalInterfaceクラス
  5. ExternalInterface.call()
  6. ExternalInterface.addCallback()

外部APIを使用したFlashとJavaScriptの接続

Flash 8以前の接続メソッド

Flash Player 8より旧いバージョンのFlash Playerでは、Flash側からJavaScriptへの接続には getURL() と fscommand() を使用し、逆にJavaScriptからFlashに接続するには SetVariable() を使用していました。

getURL()の使用

FlashからJavaScriptを呼び出す方法として、最も簡単なのは getURL()を使用することです。Flashから callJavascript() を呼び出すには、以下のActionScriptを使用します。

var msg:String = "''Hello. ^^'";
var callJas:String = 'javascript:callJavascript('+msg+')';
getURL(callJas);

HTML上で、以下のJavaScript関数を <head> タグと <body> タグの間に入力します 。 

<script language="JavaScript">
function callJavascript(str){
alert(str)
}
</script>

Flashで callJavascript() 関数を呼び出して、"Hello. ^^"というメッセージストリングをパラメータとして送ります。すると図１のようなウィンドウが表示されるようになります。

Flashから生成されたメッセージウィンドウ

図１.Flashから生成されたメッセージウィンドウ

注意：SWFをFlash Player 8でローカルテストしたときにセキュリティエラーが発生する場合は、 allowScriptAccess="sameDomain" を allowScriptAccess="always"に変更します。さらに、グローバルセキュリティ設定パネルでSWFファイルへのアクセスを許可する必要があります。

fscommand()の使用

この fscommand() コマンドを使用すると、SWFファイルがFlash Playerと、あるいはFlash PlayerをホストしているWebブラウザのようなプログラムと接続できるようになります。たとえば、以下のActionScriptを使うと、JavaScript関数の callJavascript()が呼び出されます。

var msg:String = "'Hello. ^^'";
var callJas:String = "callJavascript";
fscommand(callJas, msg);

まずFlashでパブリッシュ設定ダイアログボックスを開きます（ControlキーとShiftキーを押しながらF12キーを押します）。次に、HTMLタブにある「テンプレート」ポップアップメニューから「Flash（FSCommandサポート）」を選択し（図２参照）、「パブリッシュ」ボタンをクリックします。

パブリッシュ設定ダイアログボックスの設定

図２.パブリッシュ設定ダイアログボックスの設定

パブリッシュされたHTMLページには、以下のJavaScriptが自動的に含まれています。

<script language="JavaScript">
<!--
var isInternetExplorer = navigator.appName.indexOf("Microsoft") != -1;
// Handle all the FSCommand messages in a Flash movie.
function fscommand_DoFSCommand(command, args) {
    var fscommandObj = isInternetExplorer ? document.all.fscommand : document.fscommand;
    //
    // Place your code here.
    //
}
// Hook for Internet Explorer.
if (navigator.appName && navigator.appName.indexOf("Microsoft") != -1 && navigator.userAgent.indexOf("Windows") != -1 && navigator.userAgent.indexOf("Windows 3.1") == -1) {
    document.write('<script language=\"VBScript\"\>\n');
    document.write('On Error Resume Next\n');
    document.write('Sub fscommand_FSCommand(ByVal command, ByVal args)\n');
    document.write('	Call fscommand_DoFSCommand(command, args)\n');
    document.write('End Sub\n');
    document.write('</script\>\n');
}
//-->
</script>

"Place your code here"の部分には、ユーザが作成したカスタムコードが入ります。つまり、このコードは command と args というパラメータを受け取って処理する必要があります。これらのパラメータは fscommand()を使用してFlashから送信されるものです。

たとえば、次のコードは command と argsを処理することによって、メッセージウィンドウを作成します。

function fscommand_DoFSCommand(command, args) {
var fscommandObj = isInternetExplorer ? document.all.fscommand : document.fscommand;
//
if(command=="callJavascript") {
    alert(args)
}
//
}

やり取りの際には fscommand() が内部でVBScriptを使用しているので、そのページ上にある他のVBScriptとの間で干渉を起こすことがあります。また、 fscommand() によって送られるのは１つの args ストリングパラメータに限られるため、２つ以上のパラメータを送るにはJavaScriptの split() 関数を使用しなければなりません。

以下のコードは、２つの引数を渡すために fscommand() を使用した例です。Flashで以下のコードを入力します。

var msg:String = "'Hello. ^^'#Glad to see you.*^^*";
var callJas:String = "callJavascript";
fscommand(callJas, msg);

ここで使われている # は、送信する２つの引数の間でセパレータとしての役目を果たしています。このJavaScriptコードは以下のとおりです。

function fscommand2_DoFSCommand(command, args) {
  var fscommand2Obj = isInternetExplorer ? document.all.fscommand2 : document.fscommand2;
  //
  if(command=="callJavascript") {
  arg = args.split("#")
  alert(arg[0]+'\n'+arg[1])
  }
  //
  }

上記のコードでは、ストリングを # セパレータで分けたうえで、 \n を使用してメッセージウィンドウ内の新しい行にテキストが配置されるようにしています。すると図３のようなウィンドウが表示されるようになります。

２つの引数が表示されたメッセージウィンドウ

図３.２つの引数が表示されたメッセージウィンドウ

注意：前述の例で説明したように、ローカルテストの際にFlash Player 8でセキュリティエラーが発生しないようにするために、 allowScriptAccess="sameDomain" を allowScriptAccess="always"に変更します。

SetVariable()の使用

JavaScriptでFlashと接続するには、いくつかある所定のメソッドのうちどれかひとつを使うという方法しかありません。 SetVariable() は、その中でも最もよく使われているメソッドです。これを使うことで、JavaScriptからそのページに埋め込まれているSWFに対してストリングの値を送ることができます。次に、ActionScriptでは、 watch() メソッドを使用することによって、新しい値が送られてきたときに必ずcallback関数を呼び出すことができます。では、この例を見てみましょう。

Flashで以下のコードを入力します。

 // An  empty string variable
var testValue:String = "";
 // The callback function to be executed when the variable changes 
 watchCallback = function (id, oldval, newval):String {
 // Here you place the new value in a text field for display
 result_txt.text = newval;
 return newval;
 };
 _root.watch("testValue", watchCallback);

上記のコードによって watchCallback() が、 testValue の値が変わったとき必ず呼び出されます。この watchCallback() が呼び出されると、新しい値が_rootの result_txt.text に割り当てられます。

HTML内の <body> セクションに、以下のコードを挿入します。 

<input type=button value="Pass the variable to Flash" onClick="callJavascript()">
<form name="inputValue">
  Value <input type="text" name="vars" size="10" >
</form>

HTML内のテキスト入力部分に入力された値は、 vars プロパティの中に保存されます。このプロパティは inputValueという形式になっています。「Flashに値を送信」ボタンをクリックして、 callJavascript() 関数を呼び出します。

JavaScriptコードは以下のとおりです。

<script language="JavaScript">
  function callJavascript(){
  var sendText = inputValue.vars.value
     window.document.myMovie.SetVariable("testValue", sendText);
  }
  </script>

上記のコードで、 window.document.FlashID にはFlashオブジェクトのリファレンスが入ります（ここでは表示していません）。このリファレンスで SetVariable(variable, value) を呼び出すと、 sendText の値が testValueという名前の変数として送信されます。 

window.document.setVariable.SetVariable("testValue", sendText);

図４は、その結果を表示したものです。

HTMLページからJavaScript経由で値をFlashに送信

図４.HTMLページからJavaScript経由で値をFlashに送信

ページ 3 / 6
前のページ
次のページ