BlazeDSを使った翻訳チャットシステム

BlazeDS Flex ActionScript3.0

うちの研究室にはブラジルの方や中国の方がいますので、翻訳チャットがあったら便利だろうなぁってことで簡易チャットをFlexとBlazeDSを用いて作ってみました。
こんな感じに動作します。

まだまだプロトタイプですが、なにかグローバルなシステムを感じさせるシステムとなっていると思います。

簡単な設置方法

BlazeDSのインストール方法

  • chatサービスの追加

C:\blazeDS\tomcat\webapps\blazeds\WEB-INF\flex\messaging-config.xml
にちょっと追加します。

<?xml version="1.0" encoding="UTF-8"?>
<service id="message-service"
    class="flex.messaging.services.MessageService">
    <adapters>
        <adapter-definition id="actionscript" class="flex.messaging.services.messaging.adapters.ActionScriptAdapter" default="true" />
        <!-- <adapter-definition id="jms" class="flex.messaging.services.messaging.adapters.JMSAdapter"/> -->
    </adapters>
    <default-channels>
        <channel ref="my-polling-amf"/>
    </default-channels>
    <destination id="chat"/><!--←追加-->
</service>

こうするとchatっというIDでFlexからアクセスすることができます。

Flexでのプロジェクトの作成方法

アプリケーションサーバーの種類を「J2EE」に設定
リモートオブジェクトアクセスサービスを使用にチェックを入れる。

ルートＵＲＬにblazedsが動いているＵＲＬを指定する。
ポート番号が合っているかチェック
＃設定を検証ボタンでちゃんとBlazeDSが動いているかチェックできます。

BlazeDSが動いている方は
http://localhost:8400/blazeds/
にアクセスしてページが表示されればＯＫ
Flexなソースコードはこちら

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="initApp()" viewSourceURL="srcview/index.html" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #FFFFFF]">
<mx:Script>
<![CDATA[
import mx.messaging.messages.*;
import mx.messaging.events.MessageEvent;
import mx.messaging.*;
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;
import com.adobe.serialization.json.JSON;
import mx.effects.easing.*;
//初期化関数
private var consumer:Consumer;
private var producer:Producer;
private function initApp():void{
    producer = new Producer();
    producer.destination = "chat";
    consumer = new Consumer();
    consumer.destination = "chat";
    consumer.subscribe();
    consumer.addEventListener( MessageEvent.MESSAGE , handleMessage );
}
//メッセージ送信
private function sendMessage():void{
    var message:IMessage = new AsyncMessage();
    message.body.name = myName.text;
    message.body.msg  = myMsg.text;
    message.body.lang = langBox.selectedItem.value;
    producer.send(message);
    myMsg.text = "";
}
//新着メッセージを受け取ったとき
private var msgArr:Array = new Array();
private var message:IMessage;
private function handleMessage( event:MessageEvent ):void{
    message = event.message;
    onSend();
}
//Googleへ翻訳送信
private function onSend():void{
    var transMode:String = new String();
    if( message.body.lang == "ja" ){
        transMode = "ja|en";
    }else if( message.body.lang == "en" ){
        transMode = "en|ja";
    }
    hts.send({
        "q":message.body.msg,
        "langpair":transMode
    });
    myLog.text += "" + message.body.msg + "\n";
}
//Googleから翻訳完了
private function onResult(event:ResultEvent):void{
    var rawData:String = String(event.result);
    var manager:Object = JSON.decode(rawData);
    msgArr.push({
        "name":message.body.name,
        "msg":message.body.msg,
        "msg_trans":manager.responseData.translatedText,
        "lang":message.body.lang
        });
    myLog.text += "" + manager.responseData.translatedText + "\n";
    myDG.dataProvider = msgArr;
}
]]>
</mx:Script>
<!--###########  ###########-->
<mx:HTTPService id="hts" url="http://ajax.googleapis.com/ajax/services/language/translate?v=1.0"
    result="onResult(event)" showBusyCursor="true"/>
<!--###########  ###########-->
<mx:TextInput x="10" y="317" width="89" id="myName" text="こむぎ"/>
<mx:TextInput x="194" y="317" width="224" id="myMsg" text="こんにちは" enter="sendMessage()"/>
<mx:TextArea x="10" y="373" width="408" height="146" id="myLog" backgroundAlpha="0.3" editable="false" borderThickness="0" borderStyle="solid"
    backgroundColor="0xcccccc"/>
<mx:ComboBox x="107" y="317" width="79" id="langBox">
    <mx:Object label="日本語" value="ja"/>
    <mx:Object label="English" value="en"/>
</mx:ComboBox>
<mx:DataGrid x="10" y="10" id="myDG" width="408" height="299">
    <mx:columns>
        <mx:DataGridColumn headerText="名前" dataField="name" width="80"/>
        <mx:DataGridColumn headerText="メッセージ" dataField="msg" width="150"/>
        <mx:DataGridColumn headerText="翻訳" dataField="msg_trans" width="150"/>
        <mx:DataGridColumn headerText="設定言語" dataField="lang" width="50"/>
    </mx:columns>
</mx:DataGrid>
    <mx:Label x="10" y="347" text="myLog"/>
</mx:Application>

WEB+DB PRESS Vol.45のP.168の「BlazeDSで翻訳機能つきチャットを作る」を参考にさせていただきました。

WEB+DB PRESS Vol.45

WEB+DB PRESS Vol.45