任天堂のゲーム機「Wii」には,インターネットを閲覧する機能「インターネットチャンネル」がある。その正式版が,2007年4月から配信されていることをご存じの方も多いだろう。2007年6月末までは無料でダウンロードできる(7月以降は有料)ので,我が家のWiiにもさっそくダウンロードした。とはいえ,Wiiでネットを閲覧したかったわけではない。別のことに興味があったのだ。
インターネットチャンネルの実体は,ノルウェーOpera SoftwareのWebブラウザをWiiリモコン(コントローラ)で操作可能にしたものだ。パソコンではマウスやキーボードを使えるが,Wiiでは基本的にリモコンだけでブラウザを操作しなければならない。そのために,リモコンの十字ボタンやBボタンでのスクロール,「+」「−」ボタンで拡大/縮小表示,といった具合に,独特のブラウザ操作が可能になっている。
Wiiのサポート情報にあるQ&Aを見ると,インターネットチャンネル向けのWebページ,つまりWiiリモコンによる操作に適したWebページを作成するための情報がいくつかある。そこに,Wiiリモコンの状態やポインティング位置を取得できるJavaScriptのオブジェクトが公開されているのだ。サンプルのWebページもある。おもしろそうなので,試しにWiiリモコン対応Webページを作ってみることにした。
ただし,公開されているオブジェクトやプロパティの数はそう多くはない。取得できる情報をざっとあげると,リモコンとセンサーとの距離,画面上のポインティング位置,カーソルの傾き方向ベクトル(リモコンのひねり),押されているボタン──などである。試しのページを作るだけなら,これぐらいでも十分だろう。ここでは,押されたボタン(十字ボタン)に応じて,画像の位置が変化するWebページを作ってみた(リスト1)。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=SHIFT_JIS">
<title>実験ページ - Wii</title>
<script language="JavaScript" type="text/javascript">
function isHold(h, v, c) { return (h & v) ? c : ""; }
function TestWiiRemote()
{
for (i=0; i<2; i++)
{
var pad = opera.wiiremote.update(i);
var mes = "";
if (pad.isEnabled && pad.isDataValid)
{
mes += "isBrowsing : " + pad.isBrowsing + "<br>";
var hold = pad.hold;
if(hold>0)
{
for( x=1; x<=9; x++)
{
document.getElementById("t"+x).innerHTML = "";
}
}
mes += "ボタン : " +
isHold(hold, 1, "←") +
isHold(hold, 2, "→") +
isHold(hold, 4, "↓") +
isHold(hold, 8, "↑") +
isHold(hold, 16, "+") +
isHold(hold, 4096, "−") +
isHold(hold, 512, "1") +
isHold(hold, 256, "2") +
isHold(hold, 2048, "A") +
isHold(hold, 1024, "B");
switch(hold)
{
case 1:
case 2:
case 4:
case 8:
document.getElementById("t"+hold).innerHTML =
"<img src=\"photo.png\" width=\"120\" height=\"100\">";
break;
}
}
else
{
mes = "未接続";
}
document.getElementById("p"+i).innerHTML = mes;
}
}
function StartTimer()
{
if (window.opera && window.opera.wiiremote)
{
setInterval('TestWiiRemote()', 100);
}
}
</script> </head>
<body bgcolor="#FFFFFF" onload="StartTimer();">
<center>
<table width="500" border="0" cellspacing="1" cellpadding="1">
<tr>
<th>1P</th><th>2P</th>
</tr>
<tr>
<td id="p0" style="background-color: #CCCCFF;"></td>
<td id="p1" style="background-color: #FFCCCC;"></td>
</tr>
</table>
<br>
<table width="500" border="0" cellspacing="1" cellpadding="1">
<tr>
<td id="t3" width="33%" height="110"></td>
<td id="t8" width="33%" height="110"></td>
<td id="t5" width="34%" height="110"></td>
</tr>
<tr>
<td id="t1" width="33%" height="110"></td>
<td id="t6" width="33%" height="110"></td>
<td id="t2" width="34%" height="110"></td>
</tr>
<tr>
<td id="t7" width="33%" height="110"></td>
<td id="t4" width="33%" height="110"></td>
<td id="t9" width="34%" height="110"></td>
</tr>
</table>
</center>
</body>
</html>
|
| リスト1●Wiiリモコンのオブジェクト(JavaScript)を使ったWebページ |
HTMLやコードの書き方がスマートではない点は勘弁していただきたい。また,ページの構造やスクリプトの一部は,サンプルとして公開されているページから流用している。
JavaScriptがわかる人であれば,コードを追うのは簡単だろう。ポイントだけを簡単に紹介する。「opera.wiiremote」が,Wiiリモコンの情報を得るための肝となるオブジェクトである。opera.wiiremotのupdateメソッドを実行すると,引数(0から3)で指定したリモコンの情報を持つオブジェクトを返す。ここでは,forループで二つのリモコンの情報を取得している。
|
|
写真1●作成したページをインターネットチャンネルで閲覧したところ [画像のクリックで拡大表示]
|
isEnabled(接続されているか),isDataValid(データが有効か),isBrowsing(ブラウジングをする権利があるか)はそれぞれ,取得したリモコン・オブジェクトのプロパティである。同様に,holdプロパティの値(数値)を見れば,どのボタンが押されているかかが判断できる。例えば,十字ボタンの上は「8」,下は「4」,右は「2」,左は「1」といった具合だ。そこでswitch文では,十字ボタンの操作に合わせて,テーブル・タグ内の上下左右に画像を表示するようにしている(写真1)。
ただし,holdプロパティで値を取得できるのは,isBrowsingが1でないリモコンだけである。実は,(リモコンが複数あっても)インターネットチャンネルを操作できるリモコンは1台だけだ(そのリモコンのisBrowsingが1となる)。それ以外のリモコンは,ページをスクロールしたり,リンクをクリックするといったブラウジング操作は一切できない。
その代わりに,このサンプルのように,holdプロパティで値を取得してページのコンテンツを書き換えるといったことは可能だ。裏を返せば,今回のサンプルは,2台目のリモコンがなければ画像を表示できない,中途半端なページになっている。仕様とはいえ,1台目のリモコンのholdプロパティを得られないのは,今ひとつ納得できない。
ところで,このサンプルを作るために,会社に行かず,自宅のWiiであれこれ試していたところに,子供(小学生)が学校から帰ってきた。普段,筆者は子供の前でゲームをしないので,何をしているものかと興味深げにのぞき込んできた。作ったページを表示して,リモコン操作で画像を動かしていると,横で「すげぇ」とつぶやいた。おそらく父親がWii対応ソフトを作っているとでも思ったのだろう。実際は,ものすごくちゃちなWebページなのに。
高木記者の名作コラム『Wiiに賭けた「母親の復権」』にはほど遠いが,Wiiリモコン対応のWebページを作って見せれば,父親の復権も少しは果たせるかもしれない。暇と興味があれば,ぜひチャレンジしてみてほしい。