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

じゃんけんグローブ「絶対！ぬぎPON」の作り方


浦野大輔（うらのだいすけ）
サイバーエージェント 新規開発局所属
2009/5/19
FunnelとFIOとZigBeeを活用した「絶対！ぬぎPON」を事例に、自作デバイスの作り方からFlashアプリ作成までを説明します

グー・チョキ・パーに対応するアプリを作成

　身体を使ったFlashアプリの作り方について紹介していく本連載、第1回「iPhoneをリモコンにしてみる」、第2回「バランスWiiボードをリモコンにしてみる」第3回「chumbyのタッチと加速度センサをリモコンにしてみる」に続き、今回は、第1回おばかアプリ選手権で披露した「絶対！ぬぎPON」を事例に、自作デバイスの作り方からアプリ作成まで紹介していきます。

絶対！ぬぎPON

- PR -

　「絶対！ぬぎPON」は特製グローブコントローラとバランスWiiボードで遊ぶバーチャル野球拳ゲームです。

　グローブコントローラはグー・チョキ・パーを認識し、画面内の女性と対戦できます。じゃんけんに勝つともちろんぬぎぬぎのご褒美です。見事勝ち続けて最後の1枚になったところで「恥ずかしいから後ろ向いててね」とじらされるのですが、バランスWiiボードが姿勢を検知していて、早まって振り返ると「まだだよ！」と怒られてしまいます。

　そんなじゃれ合いを繰り返しているうちにタイムアップ！

　プレイヤーはじゃんけんで必ず勝てるように、でも最後の1枚の先は絶対見られないようにプログラミングされています。おばかアプリ選手権ではカルカル賞を受賞しました（イベントレポートは「第1回おばかアプリ選手権はこうして行われた」をご覧ください。）

ぬぎPONタイトル画面
じゃんけんに勝つとご褒美タイム
最後の1枚までいくと…
必勝のGOD GLOVE

アプリの仕組み

　グローブコントローラには曲げセンサが入っています。曲げセンサとは、文字通り曲がり具合を計測できるセンサで、人差し指、中指、薬指、小指の辺りにそれぞれ1本ずつ、計4本入っています。

　各センサの曲がり具合の値は、身体的にアイデアをスケッチするためのツールキット、Funnel I/O（FIO）を使ってPCに送信されます。FIOは、センサやアクチュエータとPC間の無線通信を可能にするI/Oモジュールです。

　PCで受信した各センサの値は、Funnelを使ってFlashアプリに送信されます。Flashアプリでは、各センサの曲がり具合の値からグー・チョキ・パーを識別し、処理を進めていきます。

　ZigBeeは無線通信規格の一つで、XbeeはZigBee規格に準拠したモジュールです。FunnelとFIOについては、次節で掘り下げて紹介していきます。

　アプリ全体は、ざっくりですがこのような仕組みになっています。

　（バランスWiiボードを使った部分の仕組みについては省略しています。興味がある方は本連載第2回「バランスWiiボードをリモコンにしてみる」をご覧ください。）

アプリの仕組み

　[ZigBee - Wikipedia]

◆FunnelとFIO

　Funnelはフィジカルコンピューティングのスケッチ〜プロトタイプを目的としたツールキットです。小林茂氏によるオープンソースのプロジェクトで、バージョン009が公開されています（4月26日現在）。

　 I/Oモジュールに、Gainer I/Oモジュール、Arduino I/Oボード、XBee無線モデムとFIO（Funnel I/O）ボードをサポート、プログラミング言語に、ActionScript 3、Processing、Rubyをサポート、また、入出力に対してのフィルタ処理、スケーリング、閾（しきい）値による分割、オシレータなどの処理をサポートしています。

　[funnel.cc]

　FIO（Funnel I/O）は、Funnelの一部として開発されたI/Oボードです。
　 Arduino互換、リチウムポリマー用電池用の充電器を搭載、XBeeを搭載できる、などの特徴があり、バージョン1.3がリリースされています（4月26日現在）。

　[FIO(Funnel I/O)]

　Funnelを使った作品は、Make: Tokyo Meeting 02や、IAMAS Gangu Project - Work in Progressなどの展示会で見られました。

  1/3

　INDEX
次世代のインプットを考えよう
──マウスとキーボードを超えたフィジカルコンピューティング（4）
じゃんけんグローブ「絶対！ぬぎPON」の作り方
Page1
グー・チョキ・パーに対応するアプリを作成
絶対！ぬぎPON
アプリの仕組み
  Page2
Funnelのセットアップ
グローブコントローラの作成
  Page3
Flashアプリの作成
「発想を形にするヒント」とか

【関連記事】

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

[an error occurred while processing this directive]

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



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

注目のテーマ

Smart & Social 記事ランキング

本日 月間
＠IT