Hatena::ブログ(Diary)

PHP,MySQL,Flex,JSな日々+イラストとか このページをアンテナに追加 RSSフィード Twitter

2008年06月26日

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

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

こんな感じに動作します。

D

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

簡単な設置方法

  • 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」に設定

リモートオブジェクトアクセスサービスを使用にチェックを入れる。

f:id:haru-komugi:20080626135152j:image

ルートURLにblazedsが動いているURLを指定する。

ポート番号が合っているかチェック

#設定を検証ボタンでちゃんとBlazeDSが動いているかチェックできます。

f:id:haru-komugi:20080626135225j:image

BlazeDSが動いている方は

http://localhost:8400/blazeds/

にアクセスしてページが表示されればOK

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で翻訳機能つきチャットを作る」を参考にさせていただきました。

トラックバック - http://d.hatena.ne.jp/haru-komugi/20080626/1214454711