chumbyのタッチと加速度センサを
リモコンにしてみる

Flash／chumby間通信

　それでは早速、chumbyをリモコンにしてみましょう。Flash／chumby間の通信は図3のような仕組みで行います。

図3　Flash／chumby間の通信の仕組み

flosc serverのOSC通信とは？

　Flashアプリとchumbyウィジェットでは直接通信できないので、flosc serverと呼ばれる常駐のサーバアプリケーションを経由してOSC通信を行います。

　OSC（OpenSound Control）は言語間、アプリケーション間、デバイス間通信の際によく使われるデータ通信プロトコルです。flosc serverは、OSCのUDPとXMLSocketのTCPを変換するゲートウェイとしても機能しています。

　第1回「iPhoneをリモコンにしてみる」でも使っていますので、興味がある方はそちらも是非ご覧ください。

flosc: Flash Open Sound Control
Introduction to OSC | opensoundcontrol.org

Flash → chumby

　Flashとchumbyは双方向で通信できますが、まずはFlash→chumbyのサンプルを紹介します。

　 これから紹介するのは「tokyo-marathon」というアプリで、先日開催された東京マラソンをバーチャルで体験できるアプリです。

　バランスWiiボードとiPhoneを使って、実際に身体を動かしながらストリートビューを移動します。もちろん東京都庁前からスタートです。

　chumbyにはバランスWiiボードを走った歩数が表示されます。本連載第1回「iPhoneをリモコンにしてみる」、第2回「バランスWiiボードをリモコンにしてみる」のライブラリを使った、おさらいもできる内容にもなっています。マウスだけでも遊べます。

セッティング

　サンプル実行までの手順をWindows XP環境を例に紹介していきます。
Mac環境と細かい点が異なりますがご了承ください。

◆1：サンプルのダウンロード

[ TokyoMarathon.zip ]からサンプルをダウンロードしてみましょう。

TokyoMarathonr\
　　　 bin\index.html （アプリ）
　　　 libs\（外部ライブラリ）
　　　 server\flosc\（flosc server）
　　　 server\wiiflash\ （WiiFlash Server）
　　　 src\（ソースコード）
　　　 widget\（chumbyウィジェット）

◆2：flosc serverの起動

　コマンドプロンプトを2つ立ち上げてserver\flosc\フォルダに移動、java Gateway 3334 3000とjava Gateway 5500 5000とそれぞれ打ち込みます。
flosc_3334_3000.batとflosc_5500_5000.batを直接実行しても大丈夫です。

・　Flash用flosc server
　　　 ポート3000：Flashとflosc serverとの接続に使うポート
　　　 ポート3334：外部からFlashに送られてくるデータ用のポート

・　chumby用flosc server
　　　 ポート5000：chumbyとflosc serverとの接続に使うポート
　　　 ポート5500：外部からchumbyに送られてくるデータ用のポート

◆3：WiiFlash Serverの起動

　バランスWiiボードをPCと接続して、server\wiiflash\WiiFlashServer 0.4.5.exeを起動します。

　 詳細は、第2回「バランスWiiボードをリモコンにしてみる」をご覧ください。

　バランスWiiボードをお持ちでない場合は、このステップを飛ばしても大丈夫です。

◆4：chumbyウィジェットの起動

　まず、widget\bin\config.xmlを開いて、hostの値をPCのワイヤレスネットワーク接続のIPアドレスに変更します。

　次に、widget\bin\にあるウィジェットファイルをUSBメモリに入れて、chumbyのUSBポートから起動します。

　channelをリロードして、ウィジェットの追加を確認してみてください。

◆5: OSCemoteの起動

　iPhoneでOSCemoteアプリを開いて、IPアドレスをPCのIPアドレスに、ポートを3334に設定します。

　 詳細は、第1回「iPhoneをリモコンにしてみる」をご覧ください。iPhoneをお持ちでない場合は、このステップを飛ばしても大丈夫です。

◆6: tokyo-marathonを起動

　以上で準備が整いました。bin\index.htmlを開いてアプリを起動します（図4、図5）。

図4　tokyo-marathon Flashの使用イメージ

　バランスWiiボード上を歩いたり、OSCemoteのMulti-Touchパネルをぐりぐりすると、ストリートビューやchumbyが更新されましたか？

図5　tokyo-marathon chumbyの使用例

　バランスWiiボードをお持ちでない場合は、下にある黄色い四角をクリックして、iPhoneをお持ちでない場合は、ストリートビューを直接マウスでぐりぐりして動作を確認してみてください。

ソースコード解説

　複数のデバイスが絡み合って複雑なソースになっていますが、ここでは、Flash→chumbyの通信部分のコードを抜粋して紹介します。

・src\Main.as

　Flashからchumbyに歩数の値を送信する部分を抜粋しています。ActionScript 3.0用のfloscライブラリを使っています。

flosc - Google Code

private var connection:OSCConnection;     private var host:String = "localhost";     private var sendPort:int = 5500;     /**      * 歩数を進めます。      */     private function proceedStep():void     {         // 歩数を更新します。         stepCount++;         trace(this,"proceedStep", stepCount);         // chumby を更新します。         if(!connection.connected) return;         // OSCパケットを作成します。         var p:OSCPacket = new OSCPacket(); // -- 【1】         p.address = host;         p.port = sendPort;         var msg:OSCMessage              = new OSCMessage("/tokyo_marathon/step"); // -- 【2】         msg.addArg(new OSCArgument(             OSCArgument.i, stepCount)); // -- 【2】         p.addMessage(msg); // -- 【2】         // OSCパケットを送信します。         connection.sendOSCPacket(p); // -- 【3】         // ストリートビューを更新します         if(!ExternalInterface.available) return;         // 前進します         sview.goFront();     }

■【1】
　ソケットを受信したとき、parseMessaageメソッドをコールします。

■【2】
　指定のホスト名とポート番号5000で、flosc serverに接続します。

■【3】
　XMLを解析します。アドレスが/tokyo_marathon/stepのとき、歩数の値を取得して表示します。

　ActionScript 3.0とFlash Lite 3.0間の通信ですが、アプリケーション単体で見ると、シンプルなXMLSocketクライアントの実装であることがお分かりいただけるかと思います。

2/3

INDEX
次世代のインプットを考えよう ──マウスとキーボードを超えたフィジカルコンピューティング（3） chumbyのタッチと加速度センサをリモコンにしてみる
	Page1 chumbyとは ハードウェアの仕様 ウィジェットの仕様
	Page2 Flash／chumby間通信 Flash → chumby セッティング ソースコード解説
	Page3 chumby → Flash セッティング ソースコード解説 入出力デバイスとしてのchumby

【関連記事】

chumby開発者が語る誕生秘話とビジネスモデル D89クリップ（2）　かわいらしいルックスとハッキングのしやすさが注目を集める「chumby」。chumbyの生みの親が、ガジェットに対してユーザーが受け身でいられる自由を語る デザインハック ＜ リッチクライアント 2008/11/25

テレビでYahoo!―デバイスが変わればUIデザインも WebとUIをつなぐトリックスター（2）　制作の要となるエンジニアとデザイナのチームワークのツボを探る連載。今回はヤフーのテレビ向けサービスのデザイン担当に話を聞いた デザインハック ＜ リッチクライアント 2008/11/19

Flashの基礎を無料で習得！ ActionScript入門 ActionScriptを知っていますか？ Flash技術の要となる言語で無料で簡単にFlashアプリケーションを作れます。そのActionScriptについて初心者のために一から丁寧に解説していきます

Flash制作を簡単にするActionScriptライブラリとは？ Flasherに便利なオープンソース「Spark project」　Flashの複雑なアニメーションや機能をどのように制作していますか？ 実は、無料で簡単に実現する方法があります デザインハック ＜ リッチクライアント 2008/12/10

[an error occurred while processing this directive]

Smart＆Social フォーラム トップページへ