DOM manipulation by Wiimote/Gainer over HTTP

2008.04.12 @ OSDC.TW 2008
Yusuke Kawasaki【川﨑有亮】
RECRUIT Media Technology Labs

Keyboard operation

This presentation uses "S6", great JavaScript based presentation tool, created by amachang. Google Gear is not required.

One-click translation

Example: Welcome!
Powered by Google AJAX Language API


Question #1

<?xml version='1.0' encoding='UTF-8'?>

Question #2

var foo = document.getElementById('foo');
var bar = document.createElement('a');
foo.appendChild( bar );

Question #3

When you're developing an Ajax-based application,

Question #4

Wii Rmote is a device ONLY for the Wii game console?

It MUST be definitely wonderful that DOM could be manipulated by Wii Remote, right?

wo3 men2 yi3 jing1 zhun3 bei4 hao4 le5 !




Yusuke Kawasaki

川﨑 有亮

Tech articles

CPAN Author


XML manipulation without Wiimote.

use XML::TreePP;
my $tpp = XML::TreePP->new();
my $url = "";
my $tree = $tpp->parsehttp( GET => $url );
print $tree->{"rdf:RDF"}->{channel}->{title}, "\n";
print $tree->{"rdf:RDF"}->{channel}->{link}, "\n"; 2006.02.20


use Lingua::ZH::Romanize::Pinyin;
my $conv = Lingua::ZH::Romanize::Pinyin->new();
my @array = $conv->string( "你好" );
foreach my $pair ( @array ) {
    my( $raw, $roman ) = @$pair;
    print "$raw = $roman\n" if defined $roman;

# ==> 你 = ni3
#     好 = hao3/hao4 2006/03/26

JSAN Author

Animation.Cube demo

Animation.Cube library

<script src="Cube.js"></script>
    var list = [
    var cube = new Animation.Cube( img_id, list );
</script> 2006/04/12

Animation.Raster demo

Animation.Raster library

<script src="Raster.js"></script>
    var ras = new Animation.Raster( id_or_elem, image_url );
    ras.lineHeight  = 4;                    // scroll line's height
    ras.clip        = false;                // clip animation area (default: true)
    ras.background  = "#000000";            // animation area's background
    ras.downSeconds = 1.0;                  // falling down animation
    ras.fadeSeconds = 4.0;                  // fading wave animation
    ras.waveSpeed   = 0.5;                  // wave's speed
    ras.onComplete  = function () { ... };  // callback function
</script> 2006/04/07

JavaScript + Canvas Powered 3D Engine

under development. 2008/03/17

Real-device web services

Wiimote = Wii Remote

is a bluetooth wireless device.


Wiimote over HTTP

is a tech for manipulating Wiimotes through the Internet.

WoH's architecture

MAX: 7 Wiimotes

MAX: 7 Players

Player number indicator

Get the Wiimote over HTTP server right now!


An yet another real device of today.

digital/analog x I/O x 4

GoH's architecture

Over the Net means...

The power of "over HTTP" tech.

Mash up Award

About RECRUIT Co., Ltd.

Media Technology Labs

Institute for RECRUIT's web strategy.

RECRUIT provides 14 kinds of web services.

The Mash up Award 3rd

Sun Microsystems and RECRUIT organize the largest mashup application development contest in Japan.
The first prize: one million yen! (≒30万元)
自 2007.06.27 ~ 至 2007.09.10

Co-operation with major 27 companies


XML (POX) based web services.

  <desc>HDD navigation TV</desc>

Web application development by simple code without manipulating XML.

  require_once 'Services/Recruit/CarSensor.php';
  $service = new Services_Recruit_CarSensor(array('key' => 'XXXX'));
  $res = $service->usedcar(array('pref' => 13));
  $usedcar = $res->getData();
<?php foreach($usedcar->usedcar as $i) { ?>
<td><?php echo htmlspecialchars($i->model) ?></td>
<td><?php echo htmlspecialchars($i->price) ?></td>
<?php } ?>

How many libraries?

14 web services
5 languages
70 libraries (!?)

Our solution

WSS - WebService Specification Schema based on YAML

WSST - Tools to generate LL libraries by WSS

Perl modules are now shipped

For the major two languages at first.

And the next one comming soon!

Write once, get multiple libraries

WSST on Google Code


The JUI Conference

Monday, 19th May 2008 @ Tokyo
Paul Bakaus, jQuery UI library's author, will come!


Thank you all.

I'm looking forward to seeing you again in Tokyo!
contact: u-suke [at]