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とか申し訳ないことになってますがご容赦ください。

僕も Gainer で DOM 操作したり、ヘルメット作ったりしたことがあるので、興味津々で聴講させていただきました。

まずは GAINER 開発者であらせられる

小林さんの発表。僕が GAINER 始める時にコメントをくださった恩を感じつつ、フィジカルコンピューティングとはなんぞや的な解説を聴講。僕は一応 GAINER 触った身なので、ある程度は事前に知っていました。GAINER が初耳な参加者には、ちょっと Adobe MAX には異色な感じで刺激になったのではないでしょうか。

funnel（ファンネル）

僕は今まで AS2 × GAINER で制作していて、その際は GAINER 公式サイトから AS2 用の GAINER ライブラリが同梱されているドライバをダウンロードして使っていましたが、それだと AS3 での制作はできませんでした。
その後、さくーしゃさんが自力で AS3 用の GAINER ライブラリを制作されたりしていましたが、それとは別に、11月1日「funnel（ファンネル）」というライブラリが公開されました。公式サイトは http://funnel.cc/。

この funnel も、AS3 対応（他にProcessing, Ruby, Max/MXP 用のライブラリも同梱）で、現時点ではリファレンスは絶賛執筆中（ダウンロードファイルに添付のPDFが充実してる）とのことですが、その funnel の機能の片鱗を、GAINER 開発チームの METAPHOR の増田一太郎さんが紹介してくださいました。METAPHOR のサイトを見ていただければわかるとおり、増田さんは AS バリバリで、この日は Flex(AS3) × funnel × GAINER で、ご自分をライブカメラに上映しつつのライブコーディング。マトリクスLEDを表示させるサンプルと、傾きセンサーと物理エンジン「APE」を使って Flash 上でボールをリフティング（用語忘れた）するサンプルを紹介。funnel ライブラリにはいろいろ便利な機能が用意されているようで、僕の憧れの 8×8 マトリクスLED（電光掲示板みたいなもん） を簡単に Flash と連携させてました。

まぁ GAINER2.0 = funnel というイメージでいいかと思います。下で紹介している書籍「+GAINER」の P28 で funnel が言及されてますので参考にしましょう。

増田さんのライブコーディングプレゼンはとても素敵で、これをそのままスクリーンキャスト配信すれば一気に普及するだろうなぁと思っておりました。楽しませていただきました。

くるくる研究室

かき氷がくるくるしたり、方位磁針がくるくるしたり、ハムスターがくるくるしたり、ディスプレイをくるくるさせたりされてました。

日頃 Flash と格闘しているクリエイターさんが、Flash スキルを活かしつつも日曜大工感覚でリアル工作を楽しんでいるというのが本当に伝わります。

勝手にに GAINER 師匠と崇めているツムジテクノロジーの原さんがジョネレーターを使ってくださっていました。「MTLタネ」を無理矢理渡しておきました。GAINERFlasher のもう一人の巨頭、タナカミノルさんには、発表前に軽く会釈させていただいただけで、その後お見かけしなかったのでタネは渡せませんでしたが、発表の中で「とにかくGAINER楽しいよ〜」と仰ってました。

書籍「+GAINER」が出ましたよと

+GAINER―PHYSICAL COMPUTING WITH GAINER

確実に今回の Adobe MAX のタイミングを狙ってのことだと思われますがw、待望の GAINER 本「+GAINER」が発売されました。今までも Flash 制作者が GAINER を始めるための書籍が２冊ぐらい出てましたが、今回はまるごと GAINER 本。もう買いました。いろんなセンサーの繋ぎ方＆動かし方が紹介されています。電子工作が素人の僕は、センサーに付いてる説明書見ても全く理解できないので、こういう書籍だけが頼り。とても嬉しいです。

さっそく秋葉原に行って、秋月電子通商のリアルストアで掲載されているセンサー一式を大人買い（電子部品って安いよ）しようと思ったけど、P110 の傾きセンサーと、P128のマトリクスLED、ぐらいしか置いてなかったです。圧力とか距離とか人検出センサがほしかったのに残念。近辺にはセンサー取り扱っている店はないっぽいし、本で紹介されてるサイトでネットショッピングしろってことかな。

GAINER の名前の由来

を、書籍の中で開発者の小林さんが明かしてくださっているのだけど、なんと「キングゲイナー」が由来らしい。
てことは、funnel（ファンネル）はもちろん

でしょうね。

たぶん次は電脳機能を実装して「GHOST（ゴースト）」が発表されると思います。
あるいは意表をついて「Ideon（イデオン）」かもしれませんが。

どうもありがとうございました。

その名の通り、このヘルメットをかぶるだけで RSS が読めます。

ここで紹介しているのは「バージョン１」ですが、2008年、パワーアップした「バージョン２」を作りましたよ。

デュアルディスプレイ出力されたテレビ画面左のFlashコンテンツは RSS リーダーになっているのですが、頭を前に傾けると下にスクロール、後ろに反らすと上スクロールするんです。これは素敵なハンズフリー（その代わり頭がノンフリー）です。

ヘルメットをかぶる決断をした時点で覚悟はしていましたが、あらためて動画にしてみると、そのくだらなさが際立ちますね。

加速度センサーを使って、ブレットボードの傾きを Flash で取得する方法は、雑誌「Software Design 2006年3月号」（この辺の過去記事を参考にどうぞ）に、必要な部品から配線、ソースコード（ソースコードは Gainer ライブラリにも同梱されています）まで解説されていますので、それをそのまま参考にさせていただきました。

あとは Flash 上で簡単な RSS リーダーを作り（CASA の XmlLoad&XmlUtil 使うと簡単に作れます）、以前作ったスクロールバーを実装し、ヘルメットの傾きに応じてバーが移動するように連携させました。ちなみに今回読んでいるのは MXNA です。

なんか物足りなかったので、Flash のマイクのボリューム取得機能を使って、ある閾値以上の音がすると、ハイライトしている記事をブラウザで開くようにしました。ブラウザのスクロールはコントロールできないので、本当はこんな仕様にしない方がいいのですが、なんとなく手を叩いてみたかったんです。。

Gainer 公式サイトで提供されているライブラリは ActionScript 2.0 用のみで、僕もずっと AS2 で作ってきたのですが、さくーしゃさんが、自力で ActionScript 3.0 用に書き換え、公開してくださったので、それを使わせてもらえば、Flex+Gainer、そして Apollo+Gainer なんてことができるそうです。

Safari ブラウザを内包できるApollo と連携できるのですから、寝そべったらその角度に画面も回転させたり（たぶん視覚＆脳の働き的には不要な機能）もできちゃいますね。ついでに、RSSリーダーをもっときちんとデザインしたり、首を横に振ったときのアクションも追加したりして、ちょっとしたバリアフリーな提案ができるかもしれませんよ。
現状は USB ワイヤードなヘルメットという、すっとんきょうな姿ですがw。

相変わらず電子工作はさっぱり理解していません。抵抗の計算式とかも覚えていません。電子工作に必須と言われている電流計も未だに購入していませんし、電子部品を見ても何がどうなるのか全く分からない状態ですが、僕みたいな人でも Gainer で結構遊べていますよ。
前回の「DOM操作」は、書籍「MASH UP++」のツムジテクノロジー原様の Qステアを動かす記事、今回のヘルメットは「SoftwareDesign」の記事の通り作っただけです。よくわからない Gainer-デバイス側は、出来合いのサンプルを拝借して、慣れ親しんだ Flash 側のコンテンツで頑張ってみる。というアプローチでもしばらくは遊べそうです。

もちろんデバイス側のやり方をもっと覚えれば、より世界は広がりますが、どの部品を用意したら良いのかも分からないので、誰かが Gainer 記事を拡充して下さるのを待ちましょう。
ちなみに本家サイトからダウンロードできるライブラリに同梱されているサンプルファイルの “advanced” フォルダには、今回の傾き検知の他にも、名前から連想するに、面白そうなサンプル達が収録されています。まずはこのサンプル達の詳細な Tips が待ち遠しいです。

今回のサンプルですが、半月程前に作ったもので、作業的には半日あれば作れます。週末の暇つぶしにもおすすめです。秋葉原にある秋月電子通商さん（秋葉原店）には、今回使った傾きセンサー（800円）をはじめ、いろんなセンサーが置いてありまして、よく分からないなりにもワクワクできるお店でした。部品も安いので、とりあえず使い方の分からないセンサーをいくつか買ってみました。

「またつまらぬものを作ってしまった」と言い続けてやろうと思います。明日は普通にマウスで RSS を読むつもりです。

関連記事：「Flash × Gainer で DOM を操作」

これがほんとのマッシュアップ。って言いたかったんです。

YouTube って動画の中間の画面をサムネイルにするんですね。ネタバレしちゃってるし。。

• 「F-site | 【GAINER】FLASHでリアルデバイス」
• 「blog.nium.jp | 東京てら子」
• 「FLASH+α」
• 「_level0.CUPPY: Gainer 日記 その１」

当日の内容は上記記事を拝見すれば分かるかと思います。ということで僕は「電子工作初心者 FLASHer の Gainer いろは」みたいなことをメモしておきます。

いきなり秋葉原行くのはレベル高い

関連書籍とか、Gainerサイトのプリントアウトとかを用意して行ったにも関わらず、何買えばいいのか迷いました。相当な目的意識が必要っぽいので、初心者は下記で挙げている14800円セット（ICCで：TELで在庫確認しときましょう）＋チョロQ+半田ごて、余裕があれば電流計テスターと、テンション上げる用のいろんな色のLED。抵抗のこととかよくわからないので、店の人に教えてもらいつつ買いましょう。

意外に無茶しても壊れないっぽい

LEDには、ピンの長さでアノード（+側）とカソードが（-側）があって、逆に接続すると、最悪の場合、LED が壊れて使えなくなると書かれている記事もありますが、実際は１発アウトで壊れるということはないらしく、間違えて逆向けで電流通してしまった LED も再利用できました。

あと、ブレットボードの配線を繋ぎ直す際には、PC のソフトを終了してから、USB を抜いて、Gainer をオフにしてから、配線し直すのがセオリーですが、不注意でいきなり USB から抜いてしまうこと数回。それでも PC が即おかしくなるということはない様子。

総じて、「ちょっとでも無茶したら、いきなり火を噴く」ということはなく、割と初心者のケアレスミスを許容してくれる感じでした。まぁ慎重に越したことはないのですけどね。

まずは模倣から

電子工作は初心者丸出しなので、下手にアドリブかまして煙を噴いたら大変です。僕のような初心者は、まずは先人を見習いましょう。以下の２冊で大分楽しめます。

• 「Software Design (ソフトウエア デザイン) 2006年 03月号」 – ゲイナー開発チームの小林様の記事。Gainerって何？という説明から、ドライバと一緒にダウンロードできるサンプルflaファイルの解説、傾きセンサーを使って、Flash上に傾き表示（装置からPCへ出力）といったことが書かれています。この特集で書かれたサンプルが一通り楽しめるように、必要な部品をまとめたパックが ICC で3300円で売っていました。傾きセンサーの部品は、僕たちは秋葉原で見つけられなかったので、傾きがやりたいならこのセットを買った方が早い気がします。この本自体（970円）も ICC で売っていました。都合、ICC で全部揃えると、Gainer 完成品キット（9800円）と合わせて14800円しますが、このセットがあれば、とりあえず抵抗の計算とか半田作業をしなくても、繋げば動く安心感が得られます。尚、本に書かれている AS コードのコンストラクタ：new Gainer(“localhost”, 2000); の部分ですが、僕達の場合はこのままでは動かず、ダウンロードファイルの通り：new Gainer(“localhost”, 2000, Gainer.MODE1, true); と書かないと動かなかったです。コードを手書きする方はご注意を。これで30分ほど停滞してしまいました。
• 「MASH UP++」 – FLASHer の Gainer 進出を促進してくださった本。FLASH で Qステア（チョロQ） を動かす（PCから装置へ出力）ことができれば、Gainer デビュー感が一気に盛り上がります。作業には半田が必要。その他必要な道具等、詳細は書籍を買いましょう。今現在ならラジコンチョロQ は普通に玩具屋で売ってました。Gainer 側の装置は本の通り作って、Flash 側のUIを自分なりに自作してみるだけでも色々と楽しめます。配線の接触部分を、リレー（ブレットボード上での配線切り替え用パーツ）に置き換えて Flash からコントロールする原理なので、チョロQ が動かせれば、他の単純な回路も制御できる自信がつくので、この日以降、無意識的にそういう製品を探す癖がつきますw。

USBケーブル

PCとGainerを繋ぐUSBケーブルが別途必要なのでお気をつけ下さい、PC側は通常のUSB口、Gainer側は六角の口のやつです。僕らはUSBプリンタとかスキャナとかのケーブルを流用しました。

今後

今回は完成品キットが二人分足りなかったので、僕とエロゲリラさんはキットを入手していないのですが、6/16に ICC に再入荷するそうなので、キット＆書籍用パーツセットを買いに走ると思います。一刻も早く入手したい！それほど楽しかったです。あと、傾きセンサー以外にも、いろんなセンサーが欲しいです。
補足：ICCにある完成キットではなく、組み立て前キットを購入して、自分で半田付けしてキットを組み立てると、安く上がります。初心者の僕は9800円で安心を買いました。

Gainer傾きセンサーとWiiリモコン

Wii×Flash では、縦方向（モニタ方向に倒す）に回転させると、カーソルが画面外に出てしまって、傾きを検出できなくなるのですが、Gainerなら検出できる点が良いです。これを生かして、ちょっとしたインターフェースを作ってみようかなぁと画策中。

ICC から遠い、東京以外の方にも、Gainerデビューのための手っ取り早い方法が公式サイトや上記「Software Design (ソフトウエア デザイン) 2006年 03月号」に書かれています。ここで書こうと思いましたが、PCのバッテリが切れそうなので、あとで書きます。すいません。

明日の「東京てら子」は11時に、JR秋葉原駅昭和通り口の改札を出た所で集合ということになりました。（地図）。僕は紫の上着に軍パン履いてます。一応時間厳守で、遅れた方は携帯に電話かメールください。