今回取り上げる関数/クラス

  • mx.rpc.remoting.mxml.RemoteObject

本記事中のサンプルを表示するには最新のFlashPlayer9が必要です(本稿執筆時点では【9,0,45,0】が最新)。こちらから最新のFlashPlayer9をインストールしてください。また,インストール後はブラウザの再起動が必要です。インストールされているFlash Playerのバージョンを確認するにはこちら

 今回は前回,分量の都合で紹介できなかった【RemoteObject】クラス(*1)を紹介します。このRemoteObjectというのは要するに,HTTPServiceを拡張したHTTP/HTTPS通信用クラスです。ただ,この「拡張」にはサーバーサイドも対応する必要があります。

 そのため今回は,RemoteObjectを使用することのできるアプリケーション・サーバー・ソフト「ColdFusion MX 7.0.2 (以後,CFと略す)」をサーバーサイドとして多少使用します。サーバーサイドの記述には,「CFML(ColdFusion Markup Language)」という,タグベースの生産性の高い,やさしい言語を使います。つい最近,次期バージョン「ColdFusion 8」(コードネーム:Scorpio)のパブリックベータがlabs.adobe.comで公開され,にわかに盛り上がりだしています。著者も大いに期待しています。

 まずはRemoteObjectの挙動を経験していただくためにサンプルで説明をします。その後,RemoteObjectの仕組みについて詳しく説明します。

 では,実際にサンプルを見てみましょう(図1)。

図1:【RemoteObject】のサンプル(クリックすると別ウィンドウで動作します。ソースはこちら

 上から順に

1-1.RemoteObjectで受信(MXMLのみ)
1-2.RemoteObjectで受信(ASを使用)
1-3.RemoteObjectで送信(MXMLのみ)
1-4.RemoteObjectで送信(ASを使用)
1-5.RemoteObjectとバインディング(実用1)
1-6.RemoteObjectとバインディング(実用2)
1-7.RemoteObjectとバインディング(実用3)

となります。

 1-1.はRemoteObjectを使用した単純な受信処理で,MXMLだけでも実装できてしまいます。ちょっと,MXMLコードを見てみましょう。

図2:「1-1」のMXMLコード

 RemoteObjectの「endpoint」属性と「destination」属性については,「RemoteObjectの仕組み」の章(後述)で説明します。「source」属性はCF側で実行させるCFC(ColdFusion Component)ファイルのパスを指しています。今回の方式(*2)ではウェブ・ルートからのパスをドット・シンタックスで表現したものです。「showBusyCursor」属性を「true」にするとRemoteObjectによるリクエストからそのレスポンスが完了するまでカーソル・アイコンが作業中アイコンにセットされます。

 子タグの「method」もRemoteObjectの属性ですが,RemoteObjectはダイナミッククラス(*3)なので明示的に記述しなくても使用できます。この「loadSomething」関数には固有の正常終了イベントを定義し,下部のTextAreaに受信内容をダンプしています。実際にこの関数をコールしている場所は「execute sample 01」ボタンのクリックイベントです。このように非常に簡単にサーバーサイドのコンポーネントの関数をコールすることができます。では,この関数がコールしているサーバーサイドのコンポーネントは何をしているのでしょうか。そのコードが図3です。

図3:「1-1」からコールされる「LoadSample.cfc」のソース(クリックすると別ウィンドウで表示します)

 構造体を作成し,要素を追加し,その変数をリターンしているだけです。たったこれだけで,Flex側でObject型データを受信することができます。

 1-2.は「1-1」をActionScript化したものです。「1-1」同様に「loadSomething」関数をコールするのはボタンのクリックイベントで,そのコードが図4です。

図4:ActionScriptでの「loadSomething」関数の実行(クリックすると別ウィンドウで表示します)

 前回のWebServiceをActionScriptでコールする内容とほぼ同じように「AbstractOperation」クラス(*4)から実行しています。

 1-3.はRemoteObjectを使用した単純な送信処理で,MXMLだけでも実装できてしまいます。MXMLコードを見てみましょう。

図5:「1-3」のコード(クリックすると別ウィンドウで表示します)

 「1-1」と違うところは「method」の子タグに「arguments」があることです。この「arguments」内で指定した値がサーバーサイドに送信されます。ここでは「This is a pen.」という文字列が送信されます。もちろん,複雑な構造のデータも送信することができます。それについては後ほど。注目すべきは「execute sample 03」ボタンでは引数をセットしていないことです。関数の実行時に引数がセットされなければMXMLで定義した引数が自動的にサーバーサイドに送信されます。これは「1-4」のActionScript版でも同じです。では,サーバーサイド「SendSample.cfc」のコードを見てみましょう(図6)。

図6:「1-4」からコールされる「SendSample.cfc」のソース(クリックすると別ウィンドウで表示します)

 クライアントから送信された引数を「cfargument name="something"」という関数の引数スコープで受け取り,文字列を反転させ,その変数をリターンさせているだけです。関数を普通にコールするような定義でクライアントから要求された関数を実行することができます。HTTPで通信していることを忘れてしまいそうです。

 ちなみに,MXMLでコーディングした引数の名前はCFCの関数の引数と同じである必要はありません。引数名ではなく引数のコーディング順が重要になります。例えば,図5の「something」という引数を「anything」としても正常に引数を渡すことができます。MXMLでコーディングした引数を使用する場合はFlexとCFが通信するときに引数名が省略され引数の値を配列に格納して送信するからです。つまり,引数の名前が同じでも順番を間違えるとCF側で受け取った引数の値がおかしくなりますので注意してください。