DOM manipulation by Gainer/Wiimote over HTTP

Yusuke Kawasaki【川﨑有亮
YAPC::Europe 2008 in Copenhagen
Thursday, 13 August 2008

Keyboard operation

The slides use the S6, great JavaScript based presentation tool from Japan. amachang++

One-click translation

  • Arabic
  • Bulgarian
  • Simplified Chinese
  • Traditional Chinese
  • Croatian
  • Czech
  • Danish
  • Dutch
  • English
  • Finnish
  • French
  • German
  • Greek
  • Hindi
  • Italian
  • Japanese
  • Korean
  • Norwegian
  • Polish
  • Portuguese
  • Romanian
  • Russian
  • Spanish
  • Swedish
  • Demo: Nice to meet you.

    The slides are translatable for 24 languages by Google AJAX Language API. This feature is added by me. :)


    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 develop an Ajax-based application,

    Question #4

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

    Why don't you like to manipulate DOM like playing Wii?

    Imagine DOM manipulation by Wii Remote...


    DOM manipulation by Wiimote!


    Who's Kawasaki?

    Yusuke Kawasaki

    川﨑 有亮

    I came from Japan


    Recruit Co., Ltd.

    Media Technology Labs

    Recruit's institute for research and development.

    川﨑有亮 loves

    More detail:

    CPAN Author


    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";

    Perl module to manipulate XML without Wiimote.
    XML and Perl object mapper. (hash/array/scalar)
    Pure Perl impl., fast and very less dependencies.
    Since 2006.02.20

    JSAN Author


    <script src="jkl-parsexml.js"></script>
        var url = "zip.xml";
        var http = new JKL.ParseXML( url );
        var data = http.parse();
        document.write( data.items.item.jpref ); // like E4X

    JavaScript library to manipulate XML without Wiimote.
    Since 2005/05/18

    JavaScript animation

    Animation.Raster demo

    Animation.Cube demo

    JavaScript + Canvas Powered 3D Engine

    Under development. 2008/03/17

    Real device web service

    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


    Wiimote has only four LEDs to indicate player number.

    How to indicate player #5, #6 and #7?

    Player number indicator

    Get Wiimote over HTTP server right now!

    API Response

    <?xml version="1.0" encoding="UTF-8" ?>
            <wiimote index="1">


    use WebService::Device::Wiimote;
    my $wiimote = WebService::Device::Wiimote->new;
    my $stat = $wiimote->getStatus;
    my $wiimote = $stat->root->{data}->{wiimote};
    print 'A:     ', $wiimote->{a}, "\n";
    print 'B:     ', $wiimote->{b}, "\n";
    print 'Up:    ', $wiimote->{up}, "\n";
    print 'Down:  ', $wiimote->{down}, "\n";
    print 'Right: ', $wiimote->{right}, "\n";
    print 'Left:  ', $wiimote->{left}, "\n";
    print 'Pitch: ', $wiimote->{pitch}, "\n";
    print 'Roll:  ', $wiimote->{roll}, "\n";

    Real device web service


    An yet another real device of today.

    digital/analog x I/O x 4

    Device::Gainer Usage

    use Device::Gainer;
    my $opt = { host => '192.168.1.xx' };
    my $gainer = Device::Gainer->new( %$opt );
    $gainer->on_pressed(sub { print "PRESSED\n"; });
    $gainer->on_released(sub { print "RELEASED\n"; });


    use POE qw( Component::Server::HTTP );
    use HTTP::Request::AsCGI;
    use CGI;
    my $aliases = POE::Component::Server::HTTP->new( %$conf );
    sub handler {
        my ($req, $res) = @_;
        my $ascgi = HTTP::Request::AsCGI->new($req)->setup;
        my $cgi = CGI->new();
        $res->content('Hello, World!');
        return RC_OK;

    GoH's architecture

    Over the Net means...

    Human interface devices (input)

    Feedback to real object (output)


    Mashup Awards 4

    You can apply your applications to the largest contest for web development.
    1st prize: JPY¥1,000,000! (≒DKK 45,000)

    40 Co-sponsors (100+ APIs)

    kurukuru ai

    News about the Olympic Games from all over the world. 24 languages included Danish are supported for all 205 countries/areas.

    ex. Japanese to French

    A popular webzine written in Japanese is translated into French.

    ex. English to Japanese

    A news website written in English is translated into Japanese.

    Yet another "kurukuru ai" about iPhone for 21 countries where iPhone is sold since July 11.

    ex. Japanese to German

    A popular blog written in Japanese is translated into German.


    Thank you. (^_^)/

    Feel free to contact me:
    u-suke [at]