Tweet

Flexアプリを3つのパブリック・クラウドと連携する方法

Adobe CS5の新しい中核を担うFlex 4のフレームワーク。ワークフローを初めRIA開発現場がどう変わるかを、Flash Builder 4やFlash Catalyst、Adobe AIR 2などの技術・ツール・フレームワークなどの機能を紹介しながら解説する連載（編集部）

RIAとクラウドの連携は、何がメリットなのか？

　クラウド・コンピューティングを活用してサービス提供することが、最近増えてきています。理由として、サービス構築のツールの提供や、クラウドサービスの低価格化が影響しています。しかし、HTMLやテキストフォーマット通信で提供しているサービスでは、クライアント側からのアクセスが多くなると、転送量が多くなります。すると、レイテンシが増加し転送コストが大きくなるなどの問題が出てきます。

　そこでクライアント側をRIAにすると、基本的にデータのやりとりのみになるので、転送量を抑えてレイテンシを小さくすることができます。本稿では、そんなパブリック・クラウド上のWebサービスとRIAの連携について具体的な方法を紹介します。クライアント側はFlex、パブリック・クラウド側は、Amazon EC2やGoogle App Engine、Windows Azureを扱います。

　また、Flexとクラウドを連携するときの通信フォーマットには、Flexと最も相性が良いAMFを選択することをお勧めします。まずは、AMFについて解説します。

XMLやJSONより速い通信フォーマット「AMF」とは

　AMFとは、「Action Message Format」と呼ばれるバイナリフォーマットです。仕様書は下記で公開されています。

• AMF0
• AMF3　

　AMFがFlexとクラウド連携に最適な理由を簡単にいうと、バイナリなのでテキストフォーマットに比べると転送量を少なくして通信の高速が低コストで実現できるからです。以下で3つの理由に分けて、詳細に説明します。

□ AMFを勧める理由【その1】軽量

　AMFは、バイナリデータです。データをバイナリにシリアライズすることで、軽量化を図っています。XMLやJSONベースのテキストフォーマットに比べると、XMLだと約1/10、JSONだと約1/4軽量になります。大規模データなどを扱う場合に、特に効果を発揮します。

□ AMFを勧める理由【その2】高速

　送信するデータが軽量なので、データ転送量が少なくなり高速な通信ができます。

□ AMFを勧める理由【その3】低コスト

　XMLやJSONに比べて、ActionScriptオブジェクトへの変換コストが非常に低いです。また、Flash Playerでは内部的に自動クラスマッピングを行うので、開発コストも抑えられます。

サンプルFlexアプリの概要

　今回作成するサンプルは、3つのクラウドのWebアプリケーション上に公開されているサービスに接続するFlexアプリケーションです。仕様としては、入力された文字をサービスに送信して、その結果を表示するシンプルなものです。

□ Flash Builderでサンプルの見た目を確認してみよう

　サンプルのMXMLコードを以下に示します。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx"
               >
    <fx:Declarations>
        <s:RemoteObject id="echoRO"
                        destination="echo"
                        endpoint="http:///gateway.aspx"
                        >
            <s:method name="execute"/>
        </s:RemoteObject>
        <s:CallResponder id="echo_result"/>
    </fx:Declarations>
    
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            
            import samples.echo.model.Echo;
            import samples.echo.model.Word;
            private function clickHandler(event:MouseEvent):void{
                var word:Word = new Word();
                word.text = wordTxt.text;
                echo_result.token = echoRO.execute(word);
            }
        ]]>
    </fx:Script>
    
    <s:layout>
        <s:VerticalLayout verticalAlign="middle"
                          horizontalAlign="center"/>
    </s:layout>
    <s:HGroup verticalAlign="middle">
        <s:RichText text="Word:"/>
        <s:TextInput id="wordTxt"/>        
    </s:HGroup>
    <s:Button label="Send Word"
              click="clickHandler(event)"/>
    <s:RichText text="{echo_result.lastResult as Echo}"/>
</s:Application>

　Flash Builderなどの開発環境をダウンロード してコードやUIの見た目を確認してみてください。Flash BuilderはEclipseベースのスタンドアロン版と、Eclipseプラグイン版があるので、後ほど説明する各パブリック・クラウドごとの開発環境／Eclipseプラグインとも相性が良いです。以下の記事が、環境構築の参考になると思います。

Flash Builder 4でAdobe AIRアプリを作ってみた 業務用Flashアプリ開発ツールの新機能を試す　新機能の目玉「データ中心型開発」とは何なのか？ 簡単なRSSリーダーのサンプルを作りながら、新機能をイロイロ紹介 「リッチクライアント ＆ 帳票」フォーラム 2010/3/24

　本稿で作ったFlexアプリケーションは、こちらからダウンロードできます。.fxp形式なので、Flash Builderなら簡単にインポートできると思います。

□ 接続URLの修正

　FlexアプリケーションからWebアプリケーション／サービスへの接続URLは、開発時とデプロイ時で設定を変更します。

        <s:RemoteObject id="echoRO"
                        destination="echo"
                        endpoint="【Webアプリケーション／サービスの接続URL】"
                        >
            <s:method name="execute"/>
        </s:RemoteObject>

　どのように変えるかは、次ページから、以下のように各パブリック・クラウド別に説明します。サービスの開発とデプロイを行って、Flexアプリケーションと連携してみましょう。

• 【1】Amazon EC2＋BlazeDS 4でクラウドFlex
• 【2】Google App Engine＋T2でクラウドFlex
• 【3】Windows Azure＋AMF MessagingでクラウドFlex

1-2-3-4

INDEX
Flexフレームワークで変わるRIA開発の現場（5） Flexアプリを3つのパブリック・クラウドと連携する方法
	Page1 RIAとクラウドの連携は、何がメリットなのか？ XMLやJSONより速い通信フォーマット「AMF」とは サンプルFlexアプリの概要
	Page2 【1】Amazon EC2＋BlazeDS 4でクラウドFlex
	Page3 【2】Google App Engine＋T2でクラウドFlex
	Page4 【3】Windows Azure＋AMF MessagingでクラウドFlex AMFは、AndroidやiPhoneなどモバイルにも有効

リッチクライアント＆帳票 全記事一覧へ

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