連載インデックスへ
次世代のインプットを考えよう(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 記事ランキング

本日 月間