WiiリモコンとFirefoxをjavascriptでつなげるWiiRemoCom Firefox3対応版

以前に作ったWiiリモコンをFirefoxにつなげてイベントを取得したりするための拡張機能 WiiRemoComがFirefox3では動かなくなっていたのでFirefox3で動くように修正して、ヌンチャクをマウスとして使用できるようにしたり、いくつか機能を追加しました。

Download

wiiremocom.xpi (for OSX+Firefox3)

動作環境

Firefox3beta2, Firefox3beta3 + MacBookPro内蔵Bluetooth + OSX10.4(intel) で動作確認済み

Firefox2用のものはWiiリモコンをFirefoxにつなげてイベントを取得したりするための拡張機能 WiiRemoComにあります(ただしXPCOMのインターフェイス等が異なります)。

概要

WiiRemoComはWiiリモコンをFirefoxに繋いで直接操作できるようにするためのFirefox拡張機能です。DarwiinRemoteで使われているWiiRemoteFrameworkを使ってFirefoxとWiiリモコンとをjavascriptでコントロールできます。

FirefoxとWiiリモコンとを直接繋ぐことで、Wiiリモコンでの操作をjavascriptでハンドルすることができ、また逆にjavascriptでWiiリモコンを操作することもできるところが特徴です。現在Wiiリモコンの持つ以下の機能をFirefoxのjavascriptで処理することができます。

  • Wiiリモコンのボタン
  • 加速度センサ(Wiiリモコン本体の加速度センサのみ)
  • 赤外線センサ
  • 振動機能
  • LED
  • ヌンチャクのボタン、コントロールスティック

ほかのFirefox extensionやGreasemonkeyスクリプトからWiiRemoComのオブジェクトにアクセスすることでWiiリモコンを操作したり、Wiiリモコンから送られてくる操作に応じてFirefoxの動作を変えることができます。

使い方

このバージョンではWiiリモコンを繋ぐとデフォルトでlivedoor Readerを見るためのモードを用意しました。Wiiリモコンから片手で操作することで、横になっても、ひっくり返りながらでもlivedoor Readerを読むことができます。

Wiiリモコンのペアリング

WiiリモコンはBluetoothで繋がるようになっています。そのためまずBluetoothデバイスとしてMacに繋ぐ許可を与える必要がありますが、これがふつうにやるとよくわかんなくてめんどくさいので2061:Maxオデッセイで紹介されているRVL Enablerを使うのをお勧めします。 起動するとまわりに存在するBluetoothデバイスがリストアップされます。最近はDoCoMoの電話等にもBluetoothが搭載されているので何度かSearchを押さないとWiiリモコンのNintendo RVL-CNT-01が検出されないこともあります。見つからないときは再度Searchを押してWiiリモコンが検出されるのを待ってください。
検出されたときにはもうWiiリモコンをMacに接続できるようになっているので、Wiiリモコンが検出されたらRVL Enablerは終了させて大丈夫です。

Firefoxと接続する

ペアリングが終わったら、WiiリモコンをFirefoxと接続できるようになります。FirefoxのメニューからTools»WiiRemoCom»Searchを選ぶと、Wiiリモコンを探し始めるので、ほんもののWiiと繋ぐときと同じようにWiiリモコンの1と2を同時に押してください。
Searching
たいていは2,3秒くらいすると接続できます。接続できるとWiiリモコンのLEDが4つとも点灯して、画面にはConnectedと出てきます。
Connected

読む

Wiiリモコンが繋がったらもうキーボードはいりません。キーボードの前から離れて、自由な姿勢でひっくりかえったりしながら十字キーとA, Bボタンでフィードを読んでいくことができます。Wiiリモコンのキーとふつうのキーボードとの対応は下のようになっています。
wiiremocom key assign
写真は画像:RVL-A-CW.jpg - Wikipediaより

十字キーの右でエントリ単位で移動、下で少しずつスクロール、Bボタン(リモコンの裏側にあるやつ)で次のフィードに移動していくかんじです。別ウインドウで開きたいときはAボタンを押すと別のタブで開くので、−と+でタブを移動して読み終わったらHOMEキーでタブを閉じます。

ピンを立てたい、とかあるとは思ったものの、キーボードに比べるとWiiリモコンの持ってるキーは少ないのでとりあえずこうしています。Greasemonkeyからキーの割当は変更することができるので、Greasemonkeyから変更したりしてみてください。

Greasemonkeyからキーの割当をかえるだけではなく、モーションセンサの値を利用してWiiリモコンをグッと振ったら一発クリップできるとか、そういうのも書くことができます。

ヌンチャク

それでもやっぱりちょっとだけマウスがほしくなったりすることがあるので、Wiiリモコンにヌンチャクを繋ぐとマウスカーソルが操作できてCボタンとZボタンでクリックすることができるようになっています(いまのところドラッグアンドドロップはできません)。

Greasemonkeyでの拡張

GreasemonkeyからWiiRemoComの動作を拡張する方法を紹介します。

Wiiリモコンをグッと振ったらクリップする

リモコンのモーションセンサの値を利用してlivedoor Readerで今見ているエントリを一発クリップするGreasemonkeyスクリプトの例です。

WiiRemoComはGreasemonkeyスクリプトからはwindow.WiiRemoComオブジェクトを通してアクセスすることができます。モーションセンサの値を取得するにはstartObserve()でコールバック関数を登録します。ここで登録した関数の中でgetAcc()を呼び出してモーションセンサの値を取得します。

モーションセンサの値を受け取る準備ができたらsetMotionSensorEnabled(true)でモーションセンサを有効にします。

getAcc()で得られる値は32bitの符号なし整数値で、下位1バイト目にZ軸方向センサ値、2バイト目にY軸方向センサ値、3バイト目にX軸方向センサ値が入っています。これをビット演算で分解してある程度大きな変化(ここでは0x50)があったときにlivedoor Readerの一発クリップのショートカットキーiを生成して送っています。

  window.WiiRemoCom.startObserve(window, 'acc-changed', function () {
        var acc = window.WiiRemoCom.getAcc();

        var x = ( acc >> 16) & 0xff;
        var y = ( acc >> 8 ) & 0xff;
        var z = ( acc >> 0 ) & 0xff;

        if ( [x, y, z].some( function (n) {
            return Math.abs(n - 0x80) > 0x50;
        } ) ) {
            var now = new Date();
            if ( lastClippedAt == null || ( now - lastClippedAt >= 1000 ) ) {
                var ev = document.createEvent("KeyEvents");
                ev.initKeyEvent('keypress', true, true, window,
                    0, 0, 0, 0,
                    'i'.charCodeAt(0), 0
                );
                window.document.activeElement.dispatchEvent(ev);

                lastClippedAt = now;
            }
        }
    } );

    window.WiiRemoCom.setMotionSensorEnabled(true);

ふつうのGreasemonkeyスクリプトと同じようにWiiリモコンを振ったときに何をするかを記述することができるので、livedoor Readerにキーボードイベントを生成して送るほかにも、GM_xmlHttpRequestを用いてほかのソーシャルブックマークサービスにブックマークすることもできます。

キーバインドを変える

Wiiリモコンのキーを押したときにFirefoxに送られるキーコードは、setTranslationTable()で変えることができます。Bボタンでpinを立ててAボタンで一気に開く、ようなキーバインドに変更したいときは、下のコードで変更することができます。
var name = window.WiiRemoCom.getCurrentTranslationMode();
var tbl = window.WiiRemoCom.getCurrentTranslationTable();

tbl.B = {charCode: 'p'.charCodeAt(0)};
tbl.A = {charCode: 'o'.charCodeAt(0)};

window.WiiRemoCom.setTranslationTable(name, tbl);

この例では現在のイベント変換モード名を取得してその名前でsetTranslationTable()を呼び出して上書きしていますが、もし上書きしたくないときはnameに好きな名前を指定すれば元のモードのキーバインドはそのままで新しいキーバインドを使うことができます。

キーコードを指定するほかに、コードを実行することもできます。以下はHOMEボタンを押したときに未読の数をtwitterにpostする例です。コマンドの場合、Wiiリモコンのキーが押されたときと離されたときに呼び出されるので、一回キーが押され(て離され)たときに一度だけ実行したいときには関数の引数に渡されるisDownをチェックして、押されたときだけ(もしくは離されたときだけ)実行するようにします。

tbl.HOME = {
    command: function (isDown) {
        if ( !isDown ) return;
        window.setTimeout(function() {
            if ( document.title.match(/\((\d+)\)/) ) {
                var opts = {
                    url: "http://twitter.com/statuses/update.json",
                    method: "POST",
                    headers: {
                        "Content-Type":"application/x-www-form-urlencoded",
                        "Pragma":"no-cache",
                        },
                    data: "status=未読" + RegExp.$1 + "件",
                };
                GM_xmlhttpRequest( opts );
            }
        }, 0);
    }
}

そのほかの関数

WiiRemoComは上であげた以外にも以下のようなメソッドを持っています。HTMLベースのプレゼンテーションツールと組み合わせて、Wiiリモコンでプレゼンをしたり(グッとガッツポーズで次のページに切り替えたりできますよ!)、Greasemonkeyスクリプトと組み合わたりして様々な使い方ができます。
        PRUint32 getKeyStatus();
        PRUint32 getKeyStatusDiff();

        PRUint32 getAcc();
        PRUint32 getNunchukAcc();
        PRUint32 getJoystickPoint();
        PRUint32 getIRPoint();

        boolean isExpansionPortAttached();
        void setExpansionPortEnabled(in boolean enable);

        void setLEDEnabled(in PRUint8 bits);
        void setMotionSensorEnabled(in boolean enable);
        void setForceFeedbackEnabled(in boolean enable);
        void setIRSensorEnabled(in boolean enable);

        void joyStickCalibData(in PRUint32 aLength,
                     [array, size_is(aLength), retval] out PRUint8 aBytes);
        void accCalibData(in PRUint32 aLength,
                     [array, size_is(aLength), retval] out PRUint8 aBytes);

        PRUint32 getMousePosition();
        void setMousePosition(in PRUint32 x, in PRUint32 y);

Wiiリモコンのいいところ

WiiリモコンをFirefoxにつなげてイベントを取得したりするための拡張機能 WiiRemoComの最後で書いたことの繰り返しになりますが、ふつうのマウスやキーボードと比べてWiiリモコンのいいところは、自由な姿勢でウェブを見られるところです。

キーボードでブラウザを操作するときには、どうしてもキーボードと手の長さ以上に離れることはできませんし、キーボードと自分の体とが平行になるようにしないとキーを操作しにくくなります。ワイヤレスのマウスを使っても操作するには平面がないと難しいですし、何度もクリックするのは何度もキーを押すのに比べてすぐ疲れてしまいます。

Wiiリモコンの場合、そういった制約がなく、うつぶせになったり、横になったり、自分が楽な姿勢になりながら片手で操作することができるので、Wiiを持っているけどまだWiiリモコンでウェブを見たことがないという方は、ぜひ一度WiiRemoComでなくてもWiiの実機でもPS3でもいいので、ワイヤレスのコントローラでウェブを見るのは身体的にとても楽なのをぜひご体験ください。


WiiもPS3もなくてもだいじょうぶ。ケータイをお持ちでしたら、寝ながらケータイを見るときに感じる画面の狭さや回線の遅さがなくなったようなもんだと思えばたぶんそんなに違いません。

tags

  • Firefox
  • UI
  • extension
  • greasemonkey
  • javascript
  • wii
  • 「WiiリモコンとFirefoxをjavascriptでつなげるWiiRemoCom Firefox3対応版」のはてなブックマーク数
  • 「WiiリモコンとFirefoxをjavascriptでつなげるWiiRemoCom Firefox3対応版」deliciousブックマーク数
  • 「WiiリモコンとFirefoxをjavascriptでつなげるWiiRemoCom Firefox3対応版」をはてなブックマークに追加
  • save "WiiリモコンとFirefoxをjavascriptでつなげるWiiRemoCom Firefox3対応版" to del.icio.us
  • 「WiiリモコンとFirefoxをjavascriptでつなげるWiiRemoCom Firefox3対応版」をリアルタイムブログ検索
  • permalink
  • Firefox3でSQLite3の全文検索機能を使って日本語を検索する
  • Firefox3でいちばんべんりな新機能

comments

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

trackbacks

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

http://labs.gmo.jp/mt/mt-tb.cgi/209
©2010 Kentaro Kumagai, GMO Internet Labs., GMO Internet, inc.
bits and bytes
2008 .03. 25 0:07

tagcloud

  • API1
  • C/C++2
  • E4X1
  • FUSE2
  • Firefox23
  • HTML4
  • IE1
  • MySQL1
  • OSX4
  • Opera2
  • PHP4
  • UI2
  • XML1
  • XPCOM4
  • XPath3
  • apache2
  • binary2
  • book1
  • data12
  • debug5
  • design1
  • experiments3
  • extension13
  • google gears1
  • google maps API1
  • greasemonkey4
  • httpd5
  • javascript19
  • linux1
  • logging2
  • mobile3
  • perl4
  • tips5
  • tool11
  • vim2
  • visualization2
  • widget1
  • wii2
  • windows7
  • サービス6
  • 和訳1

Archives

  • 2008.04 (1)
  • 2008.03 (4)
  • 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