連載インデックスへ
次世代のインプットを考えよう(3)
──マウスとキーボードを超えたフィジカルコンピューティング

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


浦野大輔(うらのだいすけ)
サイバーエージェント 新規開発局所属
2009/3/25

chumby → Flash

- PR -

 これから紹介するのは、「chumbyas」というライブラリを使った簡単なサンプルです。

 chumbyasとは、chumbyを入力デバイスとして使うFlashアプリの作成や、実機デバッグのステップ簡略化をサポートするライブラリで、chumbyのセンサ情報を、OSCパケット(=Flashとchumbyのやりとりをさせるための常駐のサーバアプリケーション「flosc server」通信のパケット)で送信し続けるウィジェットと、その受信したOSCパケットを扱うAction Script用ライブラリから構成されています。

 記事公開時現在は、ActionScript 3.0用のライブラリが公開中で、ActionScript 2.0用のライブラリも近日公開予定です。

 今回は、ActionScript 3.0用ライブラリを使ってみます。

chumbyas

セッティング

1:サンプルのダウンロード

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

chumbyas\
    bin-release\Main.swf (アプリ)
    libs\(外部ライブラリ)
    server\(flosc server)
    src\(ソースコード)
    widget\(chumbyウィジェット)

2:flosc serverの起動

 server\flosc_3334_3000.batとserver\flosc_5500_5000.batを実行します。

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

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

3:chumbyウィジェットの起動

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

 次に、widget\bin\にあるウィジェットファイルをUSBメモリに入れて、chumbyのUSBポートから起動します。chumbyasというウィジェットが追加されましたか?

4:chumbyasを起動

 以上で準備が整いました。bin-release\Main.asを開いてアプリを起動します(図6)

図6 : chumbyas

 タッチスクリーンをなぞったり、chumbyを振ったり傾けたりして、アプリが更新されれば成功です!

ソースコード解説

 それでは、chumbyasライブラリの使い方を見ていきましょう。

・src\Main.as
package
{
import flash.display.Sprite;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
    
import uranodai.chumbyas.chumbyas;
import uranodai.chumbyas.event.chumbyEvent;

[SWF(width="320",height="240"
,frameRate="12",backgroundColor="#FFFFFF")]

    public class Main extends Sprite
    {
        private var chumbyas:chumbyas;
        private var touchText:TextField;
        private var accelerometerText:TextField;
        
        public function Main()
        {
            chumbyas = new chumbyas(); // -- 【1】
            // タッチイベントのリスナを追加
            chumbyas.addEventListener(chumbyEvent.UPDATE_TOUCH, 
                updateTouch); // -- 【2】
            // 加速度センサイベントのリスナを追加
            chumbyas.addEventListener(
                chumbyEvent.UPDATE_ACCELEROMETER, 
                updateAccelerometer); // -- 【2】
            // floscと接続する
            chumbyas.connect("localhost", 5000); // -- 【3】
            
            // viewを表示
            touchText = new TextField();
            touchText.autoSize = TextFieldAutoSize.LEFT;
            addChild(touchText);
            accelerometerText = new TextField();
            accelerometerText.autoSize = TextFieldAutoSize.LEFT;
            accelerometerText.y = 20;
            addChild(accelerometerText);
        }
        
        /**
         * タッチイベントのリスナ
         */
        private function updateTouch(e:chumbyEvent):void
        {
            // タッチした位置のXY座標を出力
            trace("updateTouch", e.touch.rawX, 
                e.touch.rawY);  // -- 【4】
            
            touchText.text = "Touch: "+e.touch.rawX.toString()+",
                "+e.touch.rawY.toString();
        }
        
        /**
         * 加速度センサイベントのリスナを追加
         */
        private function updateAccelerometer(e:chumbyEvent):void
        {
            trace("updateAccelerometer")
            
            // 平均の傾き
            trace("  avg", e.accelerometer.avgX,e.accelerometer.avgY, 
                e.accelerometer.avgZ)  // -- 【5】
            // 一定の力が加わったときの傾き
            trace("  impact", e.accelerometer.impactX, 
                e.accelerometer.impactY, 
                e.accelerometer.impactZ);  // -- 【5】
            // 角度
            trace("  angle", e.accelerometer.angle*180/Math.PI, 
                e.accelerometer.angle2*180/Math.PI);  // -- 【6】
            // 向き    0:北, 1:東, 2:西, 3:南
            trace("  orientation:", 
                e.accelerometer.orientation);  // -- 【6】
            
            accelerometerText.text = 
                "Accelerometer: \n  arg: "+
                e.accelerometer.avgX.toString()+", "+
                e.accelerometer.avgY.toString()+", "+
                e.accelerometer.avgZ.toString()+
                "\n  impact: "+
                e.accelerometer.impactX.toString()+","+
                e.accelerometer.impactY.toString()+", "+
                e.accelerometer.impactZ.toString()+
                "\n  angle: "+
                (e.accelerometer.angle*180/Math.PI).toString()+","+
                (e.accelerometer.angle2*180/Math.PI).toString()+
                "\n  orientation: "+
                e.accelerometer.orientation.toString();
        } 
    }
}

■【1】
 基本クラスchumbyasのインスタンスを作成します。

■【2】
 タッチスクリーン用と加速度センサ用のイベントリスナを追加します。現在用意されているイベントはこの2つだけです。

■【3】
 ホスト名localhost、ポート番号5000でflosc serverに接続します。

■【4】
 イベントオブジェクトのtouchプロパティにタッチ情報が入っています。タッチ中の位置のXY座標をそれぞれ出力します。

■【5】
 イベントオブジェクトのaccelerometerプロパティに加速度センサ情報が入っています。加速度センサの3軸それぞれの傾きの滑らかな値と、衝撃が加わったときの値を出力します。

■【6】
 chumbyの両端を両手で持ったときの左右の傾き、前後の傾き、向きを出力します。

 このように、chumbyasを使えばXMLSocketやOSCパケットの内容を気にすることなく、chumbyの各センサの値を手軽に取得できます。

 ライブラリの中身は、Flash→chumbyのときと同様、XMLSocketクライアントの実装でできています。

入出力デバイスとしてのchumby

 いかがでしたか? 今回紹介したfloscを使えば、複数のchumbyでの通信もできるのでマルチプレイなアプリにも使えそうです。

 またコントローラとして見ると電源アダプタが気になりますが、9v電池でも動作保障外ですが動作するそうですので、スッキリした感じにもなりそうです。

 Hackingするともっとやんちゃなことがいろいろできそうなので、興味がある方はぜひチャレンジしてみてください!

【関連記事】

chumby開発者が語る誕生秘話とビジネスモデル
D89クリップ(2) かわいらしいルックスとハッキングのしやすさが注目を集める「chumby」。chumbyの生みの親が、ガジェットに対してユーザーが受け身でいられる自由を語る
テレビでYahoo!―デバイスが変わればUIデザインも
WebとUIをつなぐトリックスター(2) 制作の要となるエンジニアとデザイナのチームワークのツボを探る連載。今回はヤフーのテレビ向けサービスのデザイン担当に話を聞いた
Flashの基礎を無料で習得! ActionScript入門
ActionScriptを知っていますか? Flash技術の要となる言語で無料で簡単にFlashアプリケーションを作れます。そのActionScriptについて初心者のために一から丁寧に解説していきます
Flash制作を簡単にするActionScriptライブラリとは?
Flasherに便利なオープンソース「Spark project」
 Flashの複雑なアニメーションや機能をどのように制作していますか? 実は、無料で簡単に実現する方法があります

浦野大輔(うらのだいすけ)
株式会社サイバーエージェント新規開発局所属。
インタラクティブデザイナー。
主なプロジェクトはAmeba、プーペガールなど。
http://uranodai.com

3/3  

 INDEX
次世代のインプットを考えよう
──マウスとキーボードを超えたフィジカルコンピューティング(3)

chumbyのタッチと加速度センサをリモコンにしてみる
  Page1
chumbyとは
ハードウェアの仕様
ウィジェットの仕様
  Page2
Flash/chumby間通信
Flash → chumby
セッティング
ソースコード解説
Page3
chumby → Flash
セッティング
ソースコード解説
入出力デバイスとしてのchumby

[an error occurred while processing this directive]

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



Smart & Social フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

Smart & Social 記事ランキング

本日 月間