WiiリモコンをFirefoxにつなげてイベントを取得したりするための拡張機能 WiiRemoCom

先日第六回Mozilla拡張機能勉強会に参加させていただいたあとのお酒の席でid:ZIGOROuさんに、WiiリモコンがFirefoxにつながるといろいろうれしい、という話を聞いてWiiリモコンのイベントをFirefoxから取得するextensionを作りました。

作りかけ&不安定&OSX専用ですが、今後の開発の方向性などについてコメントをいただけたらと思い、公開します。

概要

WiiRemoComからWiiリモコンに接続して、Wiiリモコンから送られてくるイベントをHTML中に記述したjavascriptで処理することができます。十字キー、ボタンの押下情報、モーションセンサ、IRリモコンの値をイベントとして受け取ることができます。HTMLに記述したjavascriptからWiiリモコンのバイブレーションのon/offと、LEDを制御することができます。

現在WiiRemoCom自体にはWiiリモコンのキー操作に応じてページをスクロールする程度の機能しかありませんが、通常のHTMLページ内にjavascriptでWiiリモコンからのイベントを受け取ることが可能なので、モーションセンサの値に応じてページを動かしたり、ほんもののWii用のOperaをエミュレートしたwindow.operaオブジェクトを作るといったことも、コードをjavascriptで記述すれば可能になります。


WiiRemoComは SourceForge.net: DarwiinRemote をベースにCで書きなおされた aka.wiiremote をXPCOMオブジェクトとして利用できるように修正、ラップしたものです。Wiiリモコンとの通信機能は上記のライブラリに依拠しています。

動作環境
OSX 10.4(Intel or PowerPC) + Bluetooth + Firefox 2.x + Firebug 1.x
動作確認済環境
OSX 10.4.10(Intel) + MacBookPro内蔵Bluetooth + Firefox 2.0.0.6 + Firebug 1.05

Bluetoothデバイスとしてのペアリング

まずはじめにWiiリモコンをBluetoothデバイスとしてOSXに接続することを許可する必要があります。

aka.wiiremote を開発された赤松さんのブログの 2061:Maxオデッセイ で RVL Enabler を利用して簡単に繋げる手順が紹介されているのでこのページを参考に繋ぐと簡単にできます。

まわりに他のBluetoothデバイスが存在する場合、何度かSearchを押さないとWiiリモコンの Nintendo RVL-CNT-01 が検出されないこともあるので注意。今やって見ると1回めはDoCoMoのでんわが検出されました。もういちどSearchを押すとWiiリモコンが検出されました。

WiiRemoComのインストール

wiiremocom-0.0.1.xpi
からWiiRemoComのextensionをインストールしてください。

Wiiリモコンとの接続

WiiRemoComをインストールすると、FirefoxのメニューのToolsの中にWiiRemoComという項目ができます。その中にSearchという項目でWiiリモコンと接続します。
このときWiiリモコン側でふつうにWiiと接続するとき同様1ボタンと2ボタンを同時に押しておいてください。うまく接続できた場合Firebugコンソールにメッセージが表示されます。

5秒くらいしてもFirebugコンソールに反応がない、WiiリモコンのLEDが点滅したまま、みたいなときは、再度Firefoxを再起動してSearchしなおしてみてください。(今はオブジェクトをきちんと解放できていないようで、再起動しないでもう一度SearchするとFirefoxが落ちます)
Firefoxが以上終了した場合などに何度やっても繋がらなくなることがあります。その場合1,2ボタンのかわりにWiiリモコンの電池ボックスのふたを開けたところにあるSYNCボタンを押しながらSearchしてみてください。

それでもだめな場合はWiiRemoComの問題なので(ごめんなさい)環境などを教えていただけるとうれしいです。

LDRizeモード

繋がったらまずはWiiリモコンの十字キーでいろいろ操作してみましょう。とりあえずWiiリモコンでウェブページを操作してみるためにWiiRemoComにはWiiリモコンの操作をFirefox側にどういうイベントとして伝達するかを切り替えるTranslation Modeというのを作りました。
デフォルトではLDRize-109というモードになっています。

LDRizeはlivedoor Readerのショートカットキーをほかのいろいろなサイトでも使えるようにするというGreasemonkeyスクリプトです。キーボードのjで次の項目へ移動、kで前の項目へ移動したりします。

LDRize-109モードは、Wiiリモコンの十字キーやボタンにこれらの操作を割り当てたモードです。
十字ボタンの上k
十字ボタンの下j
十字ボタンの左ESCAPE
十字ボタンの右Alt-X
Aボタンo
Bボタンp
という割り当てになっているので、livedoor ReaderをはじめとしてLDRizeが対応しているページであればWiiリモコンの操作だけで閲覧していくことができます(実際にはウインドウを閉じたりタブを移動したりの細かい操作はできないので右手にマウス、左手にWiiリモコン、みたいなかんじになります)。

javascriptでWiiリモコンを操作する

とりあえず動くというのを確かめたら、次はWiiリモコンを操作するコードをjavascriptで書いてみましょう。WiiRemoComでリモコンを接続している状態で、新しくHTMLのページを開くと window.wiiremocom という変数が設定されています。この変数を介してWiiリモコンと通信することができます。
中はいまのところこうなっています。
LEDやenableVibratorは結果がわかりやすいのでFirebugのコマンドラインで
window.wiiremocom.LED( 0x02 | 0x08 )
window.wiiremocom.enableVibrator( true )
と実行してWiiリモコンが操作できるのを確認してみてください。WiiリモコンのLEDが点灯したり、バイブレータが動いたりします。止めるときは window.wiiremocom.enableVibrator( false ) で。

センサの値をjavascriptで受け取る

Wiiリモコンからモーションセンサの値を得たいときには addObsrver を使って、Wiiリモコンから送られてくるイベントを受け取る関数を登録します。
var obs = function () {
  if ( dp.length < 1 ) {
    return;
  }
  console.log(dp);
}
window.wiiremocom.enableMotionSensor(true);
window.wiiremocom.addObserver( obs.toSource() + ".apply(this)" );
登録すると、登録した関数(上の場合obs)の中でdpという変数を通してWiiリモコンから送られてくる全てのデータを参照することができるようになります。
dpの中の各バイトが何を意味しているかは DarWiinRemoteのコード などを参照してください。

基本的には先頭の161がヘッダ、2バイトめがイベントの種類(49はモーションセンサのデータを意味しています)、3バイトめ以降はイベントによって意味が変わります。

とりあえずモーションセンサの値がとれていることを実感したいなら
<html>
<head>
<script type="text/javascript">
window.onload = function () {
  var obs = function () {
    if ( dp.length < 1 ) {
      return;
    }
    var cmd = dp[1];
    if ( cmd & 0x30  ) {
      if ( cmd & 0x01 ) {
        var div = document.getElementById('motion');
        var rgb = [ dp[4], dp[5], dp[6] ]
        rgb = rgb.map( function (u8) {
            return (u8 ^ 0x17) + 0x17;
        } );
        div.style.background = 'rgb(' + rgb.join(",") + ')';
      }
    }
  }
  window.wiiremocom.addObserver( obs.toSource() + ".apply(this)" );
}
</script>
</head>
<body>
<div id="motion" style="width: 600px; height: 400px; display: block; background: rgb(250, 250, 250)"></div>
</body>
</html>
こんなコードを書いてWiiリモコンを振ると、色が変わってセンサと繋がっていることが実感できます。激しく振ると激しく変わります。ほんとはWiiリモコンから受け取った値をもとに計算をしなければ意味のある値にならないのですが、とりあえず実感するだけならこのコードで実感できます。意味のある値がほしくなったらDarWiinRemoteのコードなどを参照してjavascriptライブラリをつくってください!

セキュリティ

WiiRemoComから、表示しているページのウインドウオブジェクトにwindow.wiiremocomという変数を設定しています。この変数を介して拡張機能のコンテキストで任意のコードが実行できないようXPCNativeWrapperとComponents.utils.evalInSandboxを用いて拡張機能コンテキストで任意コードができないよう注意をして実装していますが、念のためWiiRemoComでSearchを実行したあとは信頼できないページにはアクセスしないでください。

もうひとつ、Wiiリモコンご利用時はストラップをご着用ください。

感想

もともとはWiiのOperaをエミュレートできるといいね、というところからはじまったはなしなのですが、作ってみたらWiiリモコンでブラウザを操作してウェブを見られることが新鮮でした。

長い時間をかけてみる性質のページを見るときにWiiリモコンで操作することができると、見るときの姿勢が格段に自由になって楽でした。常にキーボードやマウスに手を置いていると、自然とキーボードと自分との距離は手の長さに制限されますし、自分が(床に)横になったりするとマウスもキーボードもとても操作できません。両方とも机の上で使うことを前提に作られているインターフェイスなのです。

Wiiリモコンの場合は無線なので画面との距離は自由にとれますし、自分が横になっても片手で操作できるので、いままでディスプレイに対して前15度の角度でしかウェブを見られなかったのが(キーボードやマウスに手を置いていると前15度の角度でいるのが楽だからでしょう)、うしろ15度の角度でも、横90度でも、好きな角度で見られるようになるというのが新鮮でした。

というのはWiiリモコンを使ってWiiのOperaでウェブを見たときだっておなじなのでしょう(まだWiiのOperaでウェブを見たことがないのです...)。

ですが、FirefoxにはAutoPagerizeやLDRize+Minibufferのような、既存のウェブの閲覧方法に満足できないからなんとかしちゃおうという意欲的な取り組みがあり、さらに不便なところがあればどうにでもできる自由もあります。

これがWiiリモコンと結びついて、ウェブを見るのが、いままでより身体的にすごく楽に、たくさんクリックしないで気持ちよくブラウジングできて、寝転がって雑誌を見る感覚に近くなったのはちょっとした発見でした。

謝辞

Wiiリモコンに接続するためのコードを公開されているDarwiinRemoteの開発者木村 浩章さん、aka.wiiremoteの開発者赤松正行さん、WiiRemoComのアイディアを与えてくれたid:ZIGOROuさん、ライセンスの英語がよくわからなくて困っていたときにコメントをいただいたkzysさんに感謝しております。

ソースコード

wiiremocom-0.0.1.tgz
Firefox WiiRemoCom by KUMAGAI Kentaro
Copyright (c) 2007, KUMAGAI Kentaro GMO Internet Lab.

Max porting by Masayuki Akamatsu
Copyright (c) 2006, Masayuki Akamatsu
Based on "DarwiinRemote" by Hiroaki Kimura
Copyright (c) 2006, Hiroaki Kimura
All rights reserved.

   Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:

1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
3. Neither the name of this project nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE

参考資料

  • インターネットチャンネル向けのウェブページを作りたいのですが…。 : Q&A - Wii
  • 思いつき、想いつき。 | wiiリモコンが、Macで使える。
  • XPCOMの作成 - Mozilla Firefox まとめサイト
  • Nabble - Mozilla - XPCOM - Multi-threaded XPCOM Question
  • IT戦記 - Mac 2 日目の僕でも出来た! XCode を使った Firefox デバッギング
  • 実用 - Firefox、evalの第二引数、プライベートメンバ/クロージャーの実行コンテキストへのアクセス
  • sawatの日記 - evalの第二引数とGreasemonkeyのunsafeWindowについて

XPCOMの作成 - Mozilla Firefox まとめサイトは、これがなかったらはじめから挫折していたかもしれません。ありがとうございます。

tags

  • Firefox
  • OSX
  • XPCOM
  • extension
  • wii
  • 「WiiリモコンをFirefoxにつなげてイベントを取得したりするための拡張機能 WiiRemoCom」のはてなブックマーク数
  • 「WiiリモコンをFirefoxにつなげてイベントを取得したりするための拡張機能 WiiRemoCom」deliciousブックマーク数
  • 「WiiリモコンをFirefoxにつなげてイベントを取得したりするための拡張機能 WiiRemoCom」をはてなブックマークに追加
  • save "WiiリモコンをFirefoxにつなげてイベントを取得したりするための拡張機能 WiiRemoCom" to del.icio.us
  • 「WiiリモコンをFirefoxにつなげてイベントを取得したりするための拡張機能 WiiRemoCom」をリアルタイムブログ検索
  • permalink
  • Flock内に各種ウェブサービス用のjavascriptコードを発見
  • アプリケーションもjavascriptで書けるpure javascriptのHTTPサーバmozJSHTTP

comments

TypeKey Enabled
スタイル用のHTMLタグが使えます。
*required

trackbacks

トラックバック元エントリにこのエントリへのリンクがない場合はトラックバックを受け付けません。

http://labs.gmo.jp/mt/mt-tb.cgi/170
©2010 Kentaro Kumagai, GMO Internet Labs., GMO Internet, inc.
bits and bytes
2007 .09. 28 19:09

tagcloud

  • API1
  • C/C++2
  • E4X1
  • FUSE2
  • Firefox18
  • HTML4
  • IE1
  • MySQL1
  • OSX4
  • Opera2
  • PHP4
  • XML1
  • XPCOM4
  • XPath3
  • apache2
  • binary2
  • book1
  • data11
  • debug4
  • design1
  • experiments3
  • extension10
  • google gears1
  • google maps API1
  • greasemonkey3
  • httpd5
  • javascript17
  • linux1
  • logging2
  • mobile3
  • perl4
  • tips4
  • tool11
  • vim2
  • visualization2
  • widget1
  • wii1
  • windows7
  • サービス6
  • 和訳1

Archives

  • 2008.02 (6)
  • 2008.01 (3)
  • 2007.12 (4)
  • 2007.11 (5)
  • 2007.10 (4)
  • 2007.09 (4)
  • 2007.08 (4)
  • 2007.07 (8)
  • 2007.06 (7)
  • 2007.05 (4)
  • 2007.04 (5)
  • 2007.03 (6)
  • 2007.02 (4)
  • 2007.01 (6)

about

  • bits and bytesのXML
  • 「bits and bytes」のCreative Commons
  • Powered by Movable Type
  • イベントと地図 - モグ
  • Use ecto to blog!
  • bits and bytesのはてなブックマーク数
  • bits and bytesをMy Yahoo!に追加
  • Subscribe with Bloglines