AIR+Blaze+Ruby

Yuichiro MASUI <masui@masuidrive.jp>

AIR+BlazeDS+RubyActionScript3+Ruby+J2EE+Javascript.....

自己紹介

masuidrive現在フリーランス10分Railsムービー

アバウトミー / PingKingPukiWiki

3月に起業で渡米

お題

ビジネスメッセンジャー

専用のクライアントログ機能会議室機能

専用のクライアントはAIRで作る

Adobe AIR

インターネットの技術を使ってデスクトップアプリを

作る環境

ActionScript3+MXMLHTML+Javascript

Ajaxはほとんどそのまま動く

現在ベータ3日本語処理に難あり

ブラウザと違いセキュリティ上の制限は無い

SQLiteを内蔵しているのでビジネスアプリにも向いている

メッセージングはBlazeDSを使おう

Adobeがリリースしたオープンソースの

メッセージングサーバ

元々はLiveCycle Data Serviceとして提供されていた機能からリモーティングと

メッセージングを切り出したもの

Tomcat6で動く

リモーティング

Tomcat上のメソッドを外部のActionScriptから

簡単に呼び出せる

それってRMI...それってdRuby...

メッセージング

クライアント間でメッセージのやり取りができる

シリアライズしたActionScriptのオブジェクト

をメッセージとして扱う

簡単なものならコードを書かないでも動く

でも私、Java分からない...

秘密兵器 JRuby

JavaVM上で動くRuby

多分BlazeDSもJRubyから呼び出せるはず

Railsと組み合わせてログを管理

AIR

BlazeDS

AIR

JRuby on Rails

ブラウザ

言語 UIAIR

(Flash)AIR

(HTML)

BlazeDS

Rails

ActionScript3 MXML

Javascript HTML

Java ー

Ruby HTML

言語 UIAIR

(Flash)AIR

(HTML)

BlazeDS

Rails

ActionScript3 MXML

Javascript HTML

Java ー

Ruby HTML

言語 UIAIR

(Flash)AIR

(HTML)

BlazeDS

Rails

ActionScript3 MXML

Javascript HTML

Java ー

Ruby HTML

まて。全部違わないか？

なんかむちゃくちゃな組み合わせな気がしてきた

まずはAIR間で動くメッセンジャーを作ろう

AIR

BlazeDS

AIR AIR

AIR

BlazeDS

AIR AIR

クライアント間のメッセージ交換はXMLだけで作れる

まずはBlazeDSでメッセージングサーバを

立てる

最新のβ版をダウンロードそして展開

Tomcatも付属しているのですぐに起動可能

tomcat/webapps/blazedsにひな形がある

$ cp -R tomcat/webapps/blazeds \ tomcat/webapps/instantmessenger

ひな形をコピー後service-config.xml

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-streaming-amf"/> <channel ref="my-polling-amf"/> </default-channels> <destination id="chat"/></service>

messaging-config.xml

channelは送信方法

BlazeDSはクライアントとのやり取りで複数のプロトコル

をサポートしている

<default-channels> <channel ref="my-streaming-amf"/> <channel ref="my-polling-amf"/></default-channels>

steamingは専用プロトコルステートレスで高速だけどproxyなどが超えられない

pollingはcomet方式httpをkeep-aliveでTCPセッションを繋いだまま定期

的にリクエストを送出HTTPなのでProxyも超えら

れる

どちらを使っているか開発者が意識する必要がない

destinationは部屋名

AIR

BlazeDS

AIR AIR

AIR

BlazeDS

AIR AIR

AIR

BlazeDS

AIR AIR

steam pollingsteam

chat

$ ./tomcat/bin/startup.sh

これでこのサーバでメッセージ交換ができるようになった

AIRクライアントを作ろう

Flex builder3 betaが公開されているのこれを使うFlex SDKでも作れるけど無理はしない方がいい

ファイル→新規→Flex プロジェクト

アプリケーションサーバは「なし」

アプリケーションサーバを指定するとXMLからサーバの

設定を引っ張ってくれる

クライアントプログラムで変更できるようにしたいので

あえて使わない

mxmlをデザインモードで開いて

UIは適当に出来上がり

AIRとBlazeDSを繋げる

Consumer - 受け手Producer - 送り手

AIR

BlazeDS

AIR AIR

steam pollingsteam

chat

AIR

BlazeDS

AIR AIR

steam pollingsteam

chat

Producer Consumer Consumer

AIR

BlazeDS

AIR

channelsteam polling

BlazeDS

AIR

channelsteamProducer polling

BlazeDS

AIR

channelsteamProducer polling

distination: chat{ message: “hoge” }

BlazeDS

AIR

channelsteamProducer polling

distination: chat{ message: “hoge” }

BlazeDS

chat

private var channels:Array = [];

var streaming_amf:StreamingAMFChannel = new StreamingAMFChannel("my-streaming-amf", "http://127.0.0.1:8400/instantmessenger/messagebroker/streamingamf");channels.push(streaming_amf);

var polling_amf:AMFChannel = new AMFChannel("my-polling-amf", "http://127.0.0.1:8400/instantmessenger/messagebroker/amfpolling");polling_amf.pollingEnabled = true;polling_amf.pollingInterval = 3000;channels.push(polling_amf);

channelssteam polling

メッセージの接続先/コンテキスト/messagebroker/チャンネル

var prod:Producer = new Producer();

prod.destination = "chat"; prod.channelSet = new ChannelSet(); for(index in channels) { prod.channelSet.addChannel(channels[index]);}prod.connect();

Producer(chat)

channels

メッセージを送ってみる

var message:IMessage = new AsyncMessage();message.body = new Object(); message.body.message = "hoge";

prod.send(message);

Producer(chat)

{ message: “hoge” }

メッセージはシリアライズできる任意の

オブジェクトを送ることができる

送信部分は出来上がり

続いて受信部分

AIR

BlazeDS

chat

AIR

channelsteam polling

BlazeDS

chat

AIR

channelsteamConsumer polling

BlazeDS

chat

AIR

channelsteamConsumer polling

log.value += message

BlazeDS

chat

ハンドラー登録

AIR

channelsteamConsumer polling

log.value += message

BlazeDS

chat

ハンドラー登録

{ message: “hoge” }

AIR

channelsteamConsumer polling

log.value += message

BlazeDS

chat

ハンドラー登録

呼び出し

{ message: “hoge” }

var cons:Consumer cons = new Consumer(); cons.destination = "chat"; cons.channelSet = new ChannelSet();for(var index:String in channels) { cons.channelSet.addChannel(channels[index]);}cons.addEventListener(MessageEvent.MESSAGE, messageHandler);

Consumer(chat)

channelsmessageHandler

function messageHandler(e:MessageEvent):void{ log.text += e.message.body.message + "\n"; }

messageHandler

動かしてみよう

クリック

クリック

直接ではなくBlazeDSを通して通信

Rubyからもメッセージを送ってみよう

サーバでProducerを動かせばOK

でもJavaじゃなくてRubyで

JRuby

TomcatにJRubyをインストールする

Tomcat6へJRubyを導入する方法は下記を参考に

しましたhttp://www.okisoft.co.jp/

esc/ruby/jservlet Servlets in JRuby on Tomcat

RubyでServletが書けます

もちろん普通にBlazeDSも呼び出せます

Rubyからメッセージを投稿Send.rb

include_class "flex.messaging.MessageBroker"include_class "flex.messaging.util.UUIDUtils"include_class "flex.messaging.messages.AsyncMessage"

必要なクラスを読み込み

include_class "flex.messaging.MessageBroker"include_class "flex.messaging.util.UUIDUtils"include_class "flex.messaging.messages.AsyncMessage"

class Send < HttpServlet def doPost(req, res) res.content_type = 'text/html; charset="UTF-8"' // ～ ここに処理を追加 ～ wf = res.writer wf.println 'OK' endend

なにもしないSendクラス

broker = MessageBroker.getMessageBroker(nil)

msg = AsyncMessage.newmsg.setDestination "chat"msg.setClientId UUIDUtils.createUUIDmsg.setMessageId UUIDUtils.createUUIDmsg.setTimestamp Time.now.to_f*1000

message_body = req.get_parameter("message") || ""msg.setBody({'message' => message_body})broker.routeMessageToService(msg, nil)

メッセージ送信部分

メッセージ送信できあがり

Rubyからでも簡単にBlazeDSが扱える

クライアントがActionScript3サーバがJ2EEだと

言語の違いが大きすぎる

AS3と組み合わせるならRubyの方が合ってる

さて次はログを取る機能を実装

続きはWebで

「Adobe Developers Connection」に掲載予定

BlazeDSの正式版が出てからだから3月になるかも

今回の資料とソースはblog.masuidrive.jpで

感想

既にLCDSとして枯れたコードをベースにして

メッセージングができるのは大変うれしい

JRubyとの合わせも簡単

でもそもそもJRubyが....

AIRにはグラフ系コンポーネントも揃っているので

ログやノーティファイアを作るのが面白そう

AjaxもサポートしているのでWebでリアルタイムインタフェースを作るときには

検討価値大