JavaScript からの Flex へのアクセス
ExternalInterface API を使用すると、ラッパーから Flex メソッドを呼び出すことができます。そのためには、Flex アプリケーションのパブリックメソッドを、呼び出し可能なメソッドのリストに追加します。Flex アプリケーションでは、ExternalInterface API の addCallback() メソッドを使用してローカル Flex 関数をリストに追加できます。このメソッドにより、ActionScript メソッドは、ラッパーの JavaScript または VBScript から呼び出し可能なメソッドとして登録されます。
addCallback() メソッドのシグネチャを次に示します。
addCallback(function_name:String, closure:Function):void
function_name パラメータは、HTML ページのスクリプトから Flex 関数を呼び出すときに使用する名前です。closure パラメータは、呼び出す関数のローカル名です。このパラメータには、アプリケーションのメソッド、またはオブジェクトインスタンスを指定できます。
次の例では、ラッパーで呼び出し可能にする myFunc() 関数を宣言します。
<?xml version="1.0"?>
<!-- wrapper/AddCallbackExample.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp()">
<mx:Script>
import flash.external.*;
public function initApp():void {
ExternalInterface.addCallback("myFlexFunction",myFunc);
}
public function myFunc(s:String):void {
l1.text = s;
}
</mx:Script>
<mx:Label id="l1"/>
</mx:Application>
Flex 関数を HTML ページから呼び出すには、ムービーオブジェクトへの参照を取得します。この値は、<object> および <embed> タグの id および name プロパティと同じ値です。この場合は mySwf です。次に、必要なパラメータをすべて渡して、そのオブジェクトでメソッドを呼び出します。次に例を示します。
<html><head>
<title>wrapper/AddCallbackWrapper.html</title>
</head>
<body scroll='no'>
<SCRIPT LANGUAGE="JavaScript">
function callApp() {
window.document.title = document.getElementById("newTitle").value;
mySwf.myFlexFunction(window.document.title);
}
</SCRIPT>
<h1>AddCallback Wrapper</h1>
<form id="f1">
Enter a new title: <input type="text" size="30" id="newTitle" onchange="callApp()">
</form>
<table width='100%' height='100%' cellspacing='0' cellpadding='0'>
<tr>
<td valign='top'>
<object id='mySwf' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab' height='200' width='400'>
<param name='src' value='AddCallbackExample.swf'/>
<param name='flashVars' value=''/>
<embed name='mySwf' src='AddCallbackExample.swf' pluginspage='http://www.adobe.com/go/getflashplayer' height='100%' width='100%' flashVars=''/>
</object>
</td>
</tr>
</table>
</body></html>
ラッパー内の id および name プロパティのデフォルト値は mxml_filename.mxml.swf です。HTML ページのスクリプト内の Flex アプリケーションへのアクセスに使用する名前にはピリオドを含めることができないので、ラッパー内のデフォルト値を変更する必要があります。詳細については、Flex アプリケーションの id プロパティと name プロパティの編集を参照してください。
ユーザーが Flex アプリケーションを要求する際に使用するブラウザが不明な場合は、ラッパーのスクリプトをブラウザに依存しないようにする必要があります。詳細については、複数のブラウザタイプの操作を参照してください。
Flex アプリケーションに適切な名前の付いた関数がない場合またはその関数が呼び出し可能になっていない場合、ブラウザは JavaScript エラーをスローします。
Flex と Flash Player には、強力なセキュリティ機能が内蔵されており、サイト間のスクリプティングを防ぐことができます。デフォルトでは、Flex 関数を HTML スクリプトから呼び出すことはできません。関数を呼び出し可能として明示的に指定する必要があります。また、HTML ページがアプリケーションと同じドメインにない場合、Flex 関数を HTML ページから呼び出すことはできません。ただし、Flex 関数の呼び出し元のソースを展開することは可能です。詳細については、addCallback() メソッドについてを参照してください。
複数のブラウザタイプの操作
通常、複数のブラウザタイプに対応させるには、HTML ページのスクリプトで記述する必要があります。アプリケーションオブジェクトへの参照を取得する方法は、Internet Explorer と FireFox などの Netscape ベースブラウザとでは異なります。
ブラウザに依存しないスクリプトを記述するには、ナビゲータオブジェクトの名前を確認し、その情報に基づいてアプリケーションへの参照を返します。次のコードでは、主要なブラウザすべてでアプリケーションへの参照を取得します。
<html><head>
<title>wrapper/BrowserAwareAddCallbackWrapper.html</title>
</head>
<body scroll='no'>
<SCRIPT LANGUAGE="JavaScript">
// Internet Explorer and Mozilla-based browsers refer to the Flash application
// object differently.
// This function returns the appropriate reference, depending on the browser.
function getMyApp(appName) {
if (navigator.appName.indexOf ("Microsoft") !=-1) {
return window[appName];
} else {
return document[appName];
}
}
function callApp() {
window.document.title = document.getElementById("newTitle").value;
getMyApp("mySwf").myFlexFunction(window.document.title);
}
</SCRIPT>
<h1>AddCallBack Wrapper</h1>
<form id="f1">
Enter a new title: <input type="text" size="30" id="newTitle" onchange="callApp()">
</form>
<table width='100%' height='100%' cellspacing='0' cellpadding='0'>
<tr>
<td valign='top'>
<object id='mySwf' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab' height='200' width='400'>
<param name='src' value='AddCallbackExample.swf'/>
<param name='flashVars' value=''/>
<embed name='mySwf' src='AddCallbackExample.swf' pluginspage='http://www.adobe.com/go/getflashplayer' height='100%' width='100%' flashVars=''/>
</object>
</td>
</tr>
</table>
</body></html>
Flex アプリケーションの id プロパティと name プロパティの編集
デフォルトでは、Flex アプリケーションのアプリケーションオブジェクトの名前は、ラッパー内の mxml_filename.mxml.swf です。ただし、JavaScript メソッド名、VBScript メソッド名、またはオブジェクト名にはピリオドを使用できません。したがって、ExternalInterface API を使用するには、ラッパーで Flex アプリケーションに割り当てられた id プロパティを編集する必要があります。
ページ上のオブジェクトの名前を変更するには、<embed> タグの name プロパティと <object> タグの id プロパティの値を変更します。
次の例はラッパー内でアプリケーション名を編集する場所を示しています。
<noscript>
// Set the id of the application in the <object> tag.
<object
classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'
codebase='http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab'
width='300'
height='100'
id='MyApp'>
<param name='flashvars' value=''>
<param name='src' value='MyApp.mxml.swf'>
// Set the name of the application in the <embed> tag.
<embed
pluginspage='http://www.adobe.com/go/getflashplayer'
width='300'
height='100'
flashvars=''
src='MyApp.mxml.swf'
name='MyApp'
/>
</object>
</noscript>
<script language='javascript' charset='utf-8'>
// Change the id and name properties in the script block, too.
...
</script>
この例では、ラッパーの <noscript> ブロックの <object> および <embed> タグを示します。<script> ブロック内の <object> および <embed> タグの name と id プロパティも変更する必要があります。これらのよく似た 2 つのブロックは、共に Flex アプリケーションの全機能を実行するために必要です。
Flex アプリケーションオブジェクトの名前を変更した後は、名前を指定して JavaScript からアプリケーションを参照できます。
JavaScript が無効にされたブラウザの処理
場合によっては、クライアントのブラウザが JavaScript をサポートしないことや、ユーザーが JavaScript を意図的に無効にしていることがあります。このユーザーが Flex アプリケーションの実行を試みたときに行われることを、ラッパーの <noscript> タグを使用して定義できます。
解決方法の 1 つは、JavaScript が無効なためアプリケーションの機能を使用できないことをユーザーに伝えるメッセージを挿入することです。次の例では、JavaScript を無効にしているユーザーが Flex アプリケーションの実行を試みると、ユーザーに警告が表示されます。
<html>
<body>
<noscript>
<EM>Your browser either does not support JavaScript or has disabled it. Some features of this application require JavaScript. Click <A HREF="...">here</A> to continue anyway, Otherwise, please enable JavaScript and reload this page.
</EM>
</noscript>
<script src="mysource.js"></script>
</body>
</html>
このページに新しいコメントが追加された場合に、電子メールでの通知を希望する。 | コメントレポート