Gainer Helmet ver2 meets Colin Moock

1月16日にあった「Colin Moock を囲む会」で、むらけんさんと一緒に発表した作品です。まずは下の YouTube 動画で概要をご覧ください。

Wii リモコン Hack のキャリブレーション映像や構成図付きの当日のプレゼン資料はこちら。

→helmet_presentation.swf: 動画でかいので10MBあります。ボタンかキーボード左右キーで画面送り

使った技術は、以前作った Gainer ヘルメット ver1 + むらけんさんAIR + ジョニーさんのWii リモコンでホワイトボードする Hack のあわせ技です。

僕は今回は Wii リモコンの部分を担当したのでそのあたりのお話を。

準備したもの

とりあえず、以下のものがあれば「PC と Wii リモコンを Bluetooth 接続し、赤外線 LED でデスクトップカーソルを遠隔操作」することができました。

●Wiiリモコン

●PLANEX Bluetooth Ver2.0+EDR対応 Microサイズ USBアダプタ BT-MicroEDR2

PC の USB ポートに付ける Bluetooth レシーバ（受信機）。別に Wii 用ってわけではなく、これを付ければいろんな Bluetooth 機器と接続できますよというモノです。他の方の作例を見ると大き目の製品を使われていたので、今回の小型レシーバーの購入はちょっとドキドキしたのだけど結果的には無事動いて一安心。

●赤外線ＬＥＤ　５ｍｍ（１００個入）
100個もいらないけどそれでも700円。電子部品は PC ソフトと比べると安くて嬉しい。上記リンクのリアル店舗、秋葉原の秋月電子通商で購入。LEDのとこに置いてあるけど、僕が行った日は棚のは売り切れてて店員さんに尋ねて奥から持ってきてもらいました。

●ＬＥＤテスター
あると便利！LED を差してボタンを押せば点灯できる LED テスター。こんな商品があるのを知らなかったので、いちいち銅線切って電池ケース付けてハンダしてとか考えていたけど、とにかく動作確認したい時はテスターが便利。下の Johnny Chung Lee さんのような専用ペンを作れるに越したことはないですが。

●Wiimote Whiteboard
PC のデスクトップ画面と Wii リモコンの認識エリアとを対応させるキャリブレーション（位置調整）アプリ。「Wii リモコンがこのあたりの位置に赤外線LEDを検知したら、そこはモニタの左上に対応させますよ」みたいなことを調整するわけです。Johnny Chung Lee さんのプロジェクトページ中段の「Low-Cost Multi-point Interactive Whiteboards Using the Wiimote」の 2のパート「Wiimote Whiteboard」をクリックし、ダウンロードしておきます。
上の記事を見ると、まず Wii リモコンと PC との接続のためにこのページの「BlueSoleil」アプリを入手しろと書かれていますが、同じアプリが「PLANEX Bluetooth Ver2.0+EDR対応 Microサイズ USBアダプタ BT-MicroEDR2」に CD として付属していたのでそちらを使いました。

●Windows マシン
当初は3年前ぐらいのノート PC(PentiumM 1.3MHz) で製作。Wii Hack 部分はこれぐらいのスペックでも十分ストレスなく動いたのですが、その後の AIR アプリでのパフォーマンスが厳しかったので、当日の発表では別ノート PC(Core2Duo 1.8ぐらいかな？)にしました。

あと、マシンによっては上述のキャリブレーションアプリの実行のために JAVA を最新にしろとか言われるかもしれないです。言われたらしましょう。

接続＆認識＆遠隔操作するまでの手順

手順としては：

1. BlueSoleil 起動
2. BlueSoleil 上で Wii リモコンを Bluetooth 機器として認識させる。
3. LED テスターに赤外線 LED を差して点灯確認しておく。
4. Wiimote Whiteboard を起動。キャリブレーション設定で四隅を認識させる。
5. 設定完了。LEDが光っている間は、その位置にデスクトップカーソルが追随する。

です。写真とかあったほうがいいのであとでまとめる予定ですが、留意点としては：

• PC と Wii リモコンを Bluetooth 接続するための「BlueSoleil」ですが、Wii リモコンを接続するためにパスキーを尋ねてきて、パスキーなんて知らないので進めない場合がありますが、セキュリティ設定を最弱にするとキーを聞いてこなくなるので、いったんそっちに設定しておく（認識後はセキュリティを戻しても大丈夫らしい）。で、BlueSoleil ウィンドウ上の Wii リモコンアイコンをダブルクリック→右クリックメニューからで接続という流れ。（手元に確認PCがないので詳細は後ほど）
• 赤外線 LED は肉眼では見えません。携帯のカメラとかビデオカメラごしだと見えるんです。
• 赤外線 LED はそのままだと１方向直進する感じなので、ガラス部分を紙やすりでやすって、拡散反射するようにしたほうがいいかも。テスターに差す時は、上段20mAに差せばいい感じで、足の長いほうが+なので上側になるように差します。
• 余談ですが、Wii って「リモコン」と「レシーバー」があるんですが、「レシーバー（受信機）」という名前がついていますが、実はアレ、左右に３個ずつの赤外線 LED が埋め込まれていて、「赤外線を発信」しているだけなのです。Wii プレイ中に携帯電話のカメラを通してレシーバーを見れば分かります。実は位置情報の取得＆計算はリモコン側で担当していたわけです。そのおかげで、リモコンの情報を PC に送れば位置情報も分かるわけですね。
• 今回の作品のような「空中で擬似平面設定」みたいなことをやると「クリック」行為の認識が難しいのですが、LED を消灯→点灯し、カーソルがジャンプしたタイミングでクリックとして認識するっぽいので、同じ位置で素早く消灯→点灯させればクリックとして扱ってくれるっぽい。テスターではそうやっていろいろコントロールできたのだけど、あとでヘルメットにLEDつけたら操作感が悪かったせいか、クリック精度も下がった。Flash やってる人が今回のような Wii リモコン作品を作る場合、「クリックなしで、ロールオーバー等マウスカーソル位置のみで操作するコンテンツ」の方が何かと楽かもしれません。

その他、今回参考にさせていただいたリンクなどは del.icio.us のこの辺から。

Gainer部分

コアとなる部分は以前作った Gainer ヘルメット ver1と同じ、これに簡単なボタンを３つと、LED点灯の機能を追加。
今回は AIR(ActionScript 3.0)なので従来の Flash(AS2) 用 Gainer ライブラリ（gsp ソケットサーバー）では動かせません。gainer.cc にも AS3 用ライブラリも用意されているのだけど、Adobe MAX で見たこともあり、今回はFunnel（ファンネル）が簡単に動いてくれたので Funnel の AS3 ライブラリ（Funnel サーバー）を利用。Funnelサーバーもgspサーバーと同様にモジュール（Gainer I/O）を接続した COM ポートを指定できるのだけど、Funnel サーバーは指定しなくても COM ポートを順番に探して自動で繋いでくれます。探す時間を短縮しようと思って COM ポートの番号指定をしてみたら、逆に接続確立できなかった（僕の環境だけかも。詳細不明）。ポート指定しないままでも動くのでまぁいいや。

関連：Gainer に興味ある人は、Gainer 関連エントリあたりを読んでみてください。

AIR 部分

今回のように「ブラウザごと回転」させるためには AIR だよなぁということで、むらけんさんが Adobe AIR にて Web ブラウザを作ってくれました。Gainer の傾きセンサーから頭２方向の傾きがそれぞれ数値で送られてくるので、それを「スクロールバーの移動」「ブラウザウィンドウの回転」に割り当ててもらいました。数値は AIR(ActionScript) 上でいかようにも変換できます。今回はブラウザの回転がシビアにプルプル動いてしまうのを止めるために、数値をまるめて（調整して）、10度ごとに Tweener で滑らかに回転するようにしました。（むらけんさんが一瞬で実装）
あと、むらけんさん側で事前に「ブラウザの戻る・進む」「今見ているページを JPEG 画像としてデスクトップ保存」する機能を AIR で実装してくださっていたので、急遽渋谷ハンズでボタン部品を買ってきてサザエさんぽい場所に３つ取り付けました。頭の左右がそれぞれ「戻る・進む」、頭のてっぺんが「画像としてキャプチャ」です。まだ Gainer のインプット回路や Flash 側の Web カメラやマイク入力も余っていたので、「手ぶらで操作」を意識して全部センサーでやれば良かったかも知れないけど、それはまた今度。

合体

最後に頭の基盤に赤外線 LED を付けたわけです。頭の位置でマウスカーソルを動かそうとしたわけですね。むらけんさんと真夜中二人で「ついに夢のブラウザ誕生！」な感じで盛り上がったのですが、上の動画のようなカオスな操作感に愕然となるのでした。

まとめ

「頭だけでいろいろやろうとするな！頭でっかちになる！（いろんな意味で）」ということです。
まぁでも作業時間２日と短かったですが楽しかったです。むらけんさんが Spark Project に「ヘルメットクラス」を公開するとかしないとか。たぶんしないｗ。

var hel:Helmet = new Helmet();

なお、当日発表のプレゼン資料は当日作ったので英語とかUIとか申し訳ないことになってますがご容赦ください。