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


iPhoneをリモコンにしてみる


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

ソースコードの解説

- PR -

 このサンプルで使用しているドキュメントクラスMultitouchPaint.asについて簡単に解説します。

【1】

 タッチ情報の識別IDが初めて登場するIDであれば、タッチ情報をタッチリストに追加し、描画開始処理を実行します。

【2】

 タッチ情報の識別IDがタッチリストにあるものであれば、タッチ情報を基に描画続行処理を実行します。

【3】

 イベントオブジェクトのaliveプロパティで現在タッチ中の固有IDリストを取得できます。

 タッチリスト中に現在タッチ中でない情報があれば、タッチリストから取り除き、描画終了処理を実行します。

【4】

 タッチ情報のx座標とy座標とステージサイズの幅と高さをそれぞれを掛け合わせて、描画する座標を導きます。

package {
    import flash.display.Sprite;
   
    import uranodai.oscemote.IPhoneas;
    import uranodai.oscemote.event.OSCemoteTouchEvent;
    import uranodai.oscemote.model.touch.TouchData;
   
    //OSCemoteのMulti-Touchパネルで絵を描く
    public class MultitouchPaint extends Sprite
    {
        private static const COLOR_LIST:Array = [
            0xFF0066, 0xFFFF00, 0x333333, 0x73FF00, 0x0093FF
        ]; //線の色リスト
       
        private var _touches:Object; //タッチ情報リスト
        private var _sprites:Object; //線リスト
        private var _colorIndex:uint; //現在の色インデックス
       
        public function MultitouchPaint()
        {
            var iphoneas:IPhoneas = new IPhoneas();
            iphoneas.addEventListener(
            OSCemoteTouchEvent.TOUCH, onTouch);
            iphoneas.connect();
           
            _touches = new Object();
            _sprites = new Object();
            _colorIndex = 0;
        }
       
        //タッチイベントのリスナ
        private function onTouch(e:OSCemoteTouchEvent):void
        {
            for (var i:int; i<e.count; i++)
            {
                var t:TouchData = e.getTouch(i);
               
                if(_touches[t.id] == undefined){ // -- 【1】
                    _touches[t.id] = t;
                    onTouchDown(t);
                }else{ // -- 【2】
                    onTouchMove(t);
                }   
            }
           
            for each(t in _touches)
            {
                if(e.alive.indexOf(t.id) < 0) // -- 【3】
                {
                    delete _touches[t.id];
                    onTouchUp(t);
                }
            }
        }
       
        //タッチ開始
        private function onTouchDown(t:TouchData):void
        {
            var s:Sprite = new Sprite();
            s.graphics.lineStyle(5,getColor(), 0.7);
            s.graphics.moveTo(t.x*stage.stageWidth,
                         t.y*stage.stageHeight); // -- 【4】
            addChild(s);   
            _sprites[t.id] = s;
        }
       
        //タッチ中
        private function onTouchMove(t:TouchData):void
        {
            var s:Sprite = _sprites[t.id];
            s.graphics.lineTo(t.x*stage.stageWidth,
                         t.y*stage.stageHeight); // -- 【4】
        }
       
        //タッチ終了
        private function onTouchUp(t:TouchData):void
        {
            removeChild(_sprites[t.id]);
            delete _sprites[t.id];
        }
       
        //線の色を取得する
        private function getColor():uint
        {
            var c:uint = COLOR_LIST[_colorIndex%COLOR_LIST.length];
            _colorIndex++;
            return c;
        }
    }
}

iphoneas AS3 APIについて

 iphoneasでは、Multi-Touchパネル用のOSCemoteTouchEventのほかにも、Slidersパネル用のOSCemoteSliderEvent、カスタムパネル用のOSCemoteCustomEvent、加速度センサ用のOSCemoteAccelerationEventなどが用意されています。

 ドキュメントは用意されていませんが、シンプルなパッケージ構造ですので、興味がある方はライブラリをのぞいてみてください。また、iphoneasについてのご質問はSpark projectのフォーラムで受け付けておりますので、お気軽にご利用ください。

まとめ

 以上、iPhoneとFlashの連携について見てきましたが、いかがでしたでしょうか。今回ゲートウェイとしてfloscを使用しましたが、Flashとほかのハードウエア間の通信ではゲートウェイ的なソケットサーバアプリケーションが必要となりますので、ぜひ覚えておいていただけたらと思います。

 次回は、バランスWiiボードとFlashの連携について紹介していきます。

浦野大輔(うらのだいすけ)

株式会社サイバーエージェント新規開発局所属。
インタラクティブデザイナー。

主なプロジェクトはAmeba、プーペガールなど。
http://uranodai.com

【関連記事】

iPhoneアプリ情報を集めた「ITmedia App Town」を開設しました
ITmedia +D Mobile内に、iPhoneアプリの情報を集約するサイト「ITmedia App Town」を開設した。今後はiPhoneアプリの新作情報やレビュー記事などをこのページに集約していく。請うご期待。
App Store登録もOK! JavaScriptで作るiPhoneアプリ
これ、俺ならこう使う(5)
 HTML+JavaScriptでiPhoneアプリをWebアプリ的に開発しつつ、App Storeで販売できてしまう一挙両得のハイブリッド手法でCoCoTwitter作りました
リッチクライアント & 帳票」フォーラム 2008/11/28
Chumby開発者が語る誕生秘話とビジネスモデル
D89クリップ(2) かわいらしいルックスとハッキングのしやすさが注目を集める「Chumby」。Chumbyの生みの親が、ガジェットに対してユーザーが受け身でいられる自由を語る
テレビでYahoo!―デバイスが変わればUIデザインも
WebとUIをつなぐトリックスター(2) 制作の要となるエンジニアとデザイナのチームワークのツボを探る連載。今回はヤフーのテレビ向けサービスのデザイン担当に話を聞いた
Flashの基礎を無料で習得! ActionScript入門
ActionScriptを知っていますか? Flash技術の要となる言語で無料で簡単にFlashアプリケーションを作れます。そのActionScriptについて初心者のために一から丁寧に解説していきます

4/4

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

iPhoneをリモコンにしてみる
  Page1
フィジカルコンピューティングとは?
AIR SANPOとは?
AIR SANPOでやりたかったこと
iPhoneでできること
iPhoneとFlashの連携チュートリアル
iPhoneのネットワーク設定
  Page2
iPhoneのアプリケーションをインストール
OSCemoteを使う
サンプルファイルのダウンロード
  Page3
ブログ大国の日本で可能性を感じさせる「emo」
バランスWiiボードとiPhoneをUIにした「AIR SANPO」
応募作品の量、質ともに高まり腕試しの場として定着
Page4
ソースコードの解説
iphoneas AS3 APIについて
まとめ

[an error occurred while processing this directive]

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



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

注目のテーマ

Smart & Social 記事ランキング

本日 月間