ブラウザからWiiリモコン操作

2008.07.19
Shibuya.js in Kyoto
Yusuke Kawasaki【川﨑有亮】

Keyboard operation

• [→] next
• [←] prev
• [↑] index

このプレゼンテーションは『S6』を利用しています。amachang++
マウスホイールでもページ送りできるよ。

ワンクリック翻訳機能

Powered by Google AJAX Language API

10年。 世界が JavaScript の真の実力を発見するのに要した時間である。 1995年、Netscape 社の Brendan Eich により開発・設計された JavaScript は、「世界で最も誤解されたプログラミング言語」などと呼ばれもした。

Google AJAX Language API

google.load("language", "1");

function trans ( ev ) {
    var elem = ev.target;
    var func = function( result ) {
        if ( result.error ) return;
        elem.lang = dst;
        var text = result.translation;
        var span = document.createElement( 'span' );
        span.innerHTML = text;
        elem.appendChild( span );
    };
    google.language.translate(elem.innerHTML,'ja','en',func);
}

s6.attach( e, 'click', trans );

Yusuke Kawasaki
川﨑　有亮

http://www.kawa.net/

JSAN Author

• XML.ObjTree
  (JKL.ParseXMLみたいの)
• Animation.Cube
  (くるくる回るやつ)
• Animation.Raster
  (くねくね落ちるやつ)

ブラウザでWiiリモコンを使う方法

PCでWiiリモコンを使う方法

前提：Bluetooth デバイスとして PC に Wii リモコンを認識させる。

• Human Interface Device としてキーボード・マウスのように扱う。
• アプリから Bluetooth 用のドライバを叩いて、直接操作する。
  （ブラウザからはムリ）

PCのブラウザでWiiリモコンを使う

前提：Bluetooth デバイスとして PC に Wii リモコンを認識させる。

• Webサービスとして公開し、XML/JSON(P) I/FのAPIを呼び出す。(Wiimote over HTTP)

Wiimote over HTTP

http://kawa.at.webry.info/200804/article_2.html

WoHレスポンスXML

<?xml version="1.0" encoding="UTF-8"?>
<response>
    <method>getStatus</method>
    <status>200</status>
    <data>
        <wiimote index="1">
            <xPos>0.113402</xPos>
            <yPos>-0.414141</yPos>
            <zPos>0.883495</zPos>
            <pitch>-0.426999</pitch>
            <roll>0.113647</roll>
            <a>1</a>
            <b>0</b>
            <down>0</down>
            <home>0</home>
            <left>0</left>
            <minus>0</minus>
            <nunchuk>
                <xPos>0.0</xPos>
                <yPos>0.0</yPos>
                <zPos>0.0</zPos>
                <pitch>0.0</pitch>
                <roll>0.0</roll>
                <c>0</c>
                <z>0</z>
                <xVec>0.0</xVec>
                <yVec>0.0</yVec>
            </nunchuk>
            <one>0</one>
            <plus>0</plus>
            <right>0</right>
            <two>0</two>
            <up>0</up>
        </wiimote>
    </data>
</response>

JSONPにも対応

callback({
  "response":{
    "method":"getStatus",
    "status":"200",
    "data":{
      "wiimote":[
        {
          "@index":"1",
          "xPos":"-0.14433",
          "yPos":"-0.212121",
          "zPos":"0.961165",
          "pitch":"-0.213745",
          "roll":"-0.144836",
          "a":"1",
          "b":"0",
          "one":"0",
          "two":"0",
          "minus":"0",
          "plus":"0",
          "home":"0",
          "up":"0",
          "down":"0",
          "left":"0",
          "right":"0",
          "nunchuk":{
            "xPos":"0.0",
            "yPos":"0.0",
            "zPos":"0.0",
            "pitch":"0.0",
            "roll":"0.0",
            "c":"0",
            "z":"0",
            "xVec":"0.0",
            "yVec":"0.0"
          }
        }
      ]
    }
  }
});

Webサービスなので、
インターネット越しに
Wiiリモコンを扱うことが可能。
JSONP 対応なので、
クロスドメインもOK。

Access Control for Cross-site Request を待たなくてもよいよ。

JavaScript + Canvas Powered 3D Engine

Under development.
http://www.kawa.net/works/js/wire3d/v2/wiimote3d.html 2008/03/17

wire3d.js

<script src="wire3d.js" type="text/javascript"></script>
<script src="wire3d-wiimote.js" type="text/javascript"></script>
<script type="text/javascript">

    var wii = new Wire3D.Item.Wiimote();
    wii.resize( 1.0, 1.0, 1.0 );
    wii.rotate( 0.0, 0.3, -0.5 );

    var space = new Wire3D.Space();
    space.append( wii );

    camera = new Wire3D.Camera( 'demo_here', space );
    camera.display();

</script>

最大7台同時接続可能

最大7台同時接続可能

問題発生

Wii リモコンの LED は4つだけ。

5台目以降の Wii リモコンは？

5～7台目の識別方法

リアルデバイスへの妄想

PCのインターフェースは、キーボード(1D)から、マウス(2D)へと発展してきた。
新しいデバイスの接続で、3D・4Dとさらに進化していく未来…。
リアルデバイスがWebサービスとしてインターネット経由で繋がる未来…。

《宣伝》kurukuru ai

ありがとうございました

Yusuke Kawasaki【川﨑有亮】
u-suke [at] kawa.net