Flex2でWebアプリ開発（最終回）
より短いXMLコードでサーバ通信させるFlex2

クラスメソッド
成瀬　勉
2007/4/18

Flexアプリケーションで「サーバ通信」を行う方法と、XMLの操作が簡単に短いコードで、パフォーマンスが向上させる「E4X」を紹介

　前回「データバインディングでオブジェクト間のデータ受け渡し」では、データバインディングについて紹介しました。

　今回はFlexアプリケーションで「サーバ通信」を行う方法と、XMLの操作が簡単に、より短いコードで、パフォーマンスが向上させる「E4X」について紹介します。

■サーバ通信

　Flexでサーバ通信を行う場合RPCサービスを利用します。RPCサービスには以下のものが用意されています。

・HTTPService

　HTTPによるGET、POSTを使用してデータの送受信を行います。

・WebService

　SOAPを使用してWebサービスとのデータの送受信を行います。

・RemoteObject

　リモートのJavaクラスに直接アクセスすることができます。

　使用するにはFlex Data Serviceが必要です。

■HTTPServiceによる通信の例

　では実際にHTTPServiceによる通信の例を見ていきましょう。サンプルはYouTubeAPIを利用したビデオ検索アプリケーションです。なお実際にこのサンプルを実行するには、YouTubeデベロッパーIDの登録が必要です。

画面1YouTubeAPIを利用したビデオ検索アプリケーション

■F2YouTube.mxml

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"       xmlns:net="flash.net.*"      layout="vertical"       >      <mx:Script>           <![CDATA[                import mx.controls.Image;                import mx.controls.Alert;                import mx.managers.CursorManager;                import mx.rpc.events.FaultEvent;                import mx.rpc.events.ResultEvent;                                private function searchVideo():void{                     var param:Object = new Object();                     param.method = "youtube.videos.list_by_tag";                     param.dev_id = 取得したデベロッパーID;                     param.tag = searchText.text;                                          searchVideoService.send(param);                                          CursorManager.setBusyCursor();                     enabled = false;                                     }                                private function searchResult(event:ResultEvent):void{                     CursorManager.removeBusyCursor();                     enabled = true;                                          resultDataGrid.dataProvider = event.result.video_ list.video;（本来は1行）                }                                private function searchFault(event:FaultEvent):void{                     CursorManager.removeBusyCursor();                     enabled = true;                     Alert.show(event.message.toString());                }           ]]>      </mx:Script>            <mx:HTTPService id="searchVideoService"            url="http://www.youtube.com/api2_rest"            result="searchResult(event)"            fault="searchFault(event)"           resultFormat="e4x" />      <mx:Panel            width="100%" height="100%" layout="vertical"            paddingBottom="5" paddingLeft="5" paddingRight="5"  paddingTop="5">（本来は1行）           <mx:HBox>                <mx:TextInput id="searchText"                      enter="searchVideo()"/>                <mx:Button id="searchButton"                      label="ボタン"                      click="searchVideo()"/>           </mx:HBox>           <mx:DataGrid height="100%" width="100%" id="resultDataGrid"                rowHeight="60">                <mx:columns>                     <mx:DataGridColumn dataField="title" />                     <mx:DataGridColumn dataField="thumbnail_url"  itemRenderer="{new ClassFactory(Image)}" />（本来は1行）                     <mx:DataGridColumn dataField="author" />                     <mx:DataGridColumn dataField="length_seconds" />                     <mx:DataGridColumn dataField="comment_count" />                </mx:columns>           </mx:DataGrid>      </mx:Panel> </mx:Application>

　HTTPServiceを使用するために、<mx:HTTPService>タグを記述します。urlに対象のサービスのURLを指定します。RPCサービスでは通信が正常に完了したときと失敗したときに、それぞれresultイベントとfaultイベントが送出されます。

　従って、それぞれのイベントハンドラをsearchResult()、searchFault()として定義します。

　検索キーワードを入力して、エンターキーもしくは検索ボタンを押下した際に呼ばれるイベントハンドラsearchVideo()内では、サービスに必要な引数をオブジェクトに格納し、HTTPServiceのsend()メソッドを呼び出します。send()メソッドはサービスに要求を送出するためのメソッドです。

　Flexアプリケーションにおいてのサーバ通信はすべて非同期で行われます。つまり、通信の完了を待たずに処理を続けることができます。このためユーザーの2重操作などを防ぐ処理や、通信中であることが分かるような表示を行うことが望ましいのです。

　このサンプルではCursorManagerを用いてマウスカーソルを通信中であることを表すアイコンに変更し、かつアプリケーション全体を操作できないように設定しています。

■ECMAScript for XML

　実際にサービスに要求を送信し、resultイベントが正常に呼び出されたら、今度は結果の内容を画面に表示します。

　resultイベントではResultEventオブジェクトが引数として渡されます。サービスの結果はResultEventオブジェクトのevent.result内に格納されます。今回使用したサービスでは結果はXML形式で渡されます。

　ここで、FlexアプリケーションでXMLを扱う便利な方法としてE4Xというものがあるので紹介します。

■E4X

　E4XとはECMAScript for XMLのことで、ECMAScript 3の拡張として開発されたXMLを扱うための仕様です。XMLの操作が簡単に、より短いコードで、パフォーマンスが向上させるために、ECMAScriptでXMLをネイティブにサポートする規格です。

　簡単にいえば、XMLの階層構造を.（ドット）によってたどることができ、属性へのアクセスを@（アットマーク）で指定することができます。

　また特定のノードを条件によって抽出することができるため、非常に容易にXMLを扱うことができます。

　HTTPServiceのresultFormat属性にe4xを指定することにより、結果をE4Xで扱うことが可能になります。

　先ほど述べたとおり結果のXMLはevent.resultに格納されています。

　このサービスでは検索結果のビデオ情報はvideo_list以下のvideo要素ですので、これをE4Xで指定するには、

event.result.video_list.video

とします。

　E4Xで要素名を指定したときに同階層に同じ要素名が複数ある場合は、XMLListとして取得できます。

　これをDataGridのdataProviderに渡すと、あらかじめDataGridColumnで設定したdataFieldの値に応じて結果が反映されることになります。

　今回はHTTPServiceのみ紹介しましたが、RPCサービスの基本的な記述はすべて同じですので、それぞれ特徴を踏まえて、場合に応じて最良のものを選択していくのがよいでしょう。

　「Flex2でWebアプリ開発」の連載では、Flex2の特徴的な機能を用いたサンプルの作成を通して、基本的なFlex2アプリケーションの開発手法を解説してきました。最終回では、YouTubeと連携できる簡単なWebアプリの作成の仕方を紹介しましたが、いかがでしたでしょうか？ みなさんのWebアプリケーション開発の助けになると幸いです。

プロフィール：成瀬　勉（なるせ つとむ） クラスメソッド株式会社　エンタープライズサービス部門アーキテクト Macromedia FLASH MX 2004 Developer認定技術者 FlashエンジニアとしてWeb製作を経たのちWebアプリケーション開発に携わる。FlexやWPFなどのRIA開発および技術調査を日々行っている。 クラスメソッド株式会社での主な開発実績は、旭化成の電子ファイリングシステム、ひまわり証券のオンライントレードシステム、ベルシステム24の営業支援システムなど。 ブログ（C:\narun）も更新中。会社でRIA仲間募集中。

---

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）