≪
≪
≫
≫

DOM manipulation by Wiimote/Gainer over HTTP

2008.04.12 @ OSDC.TW 2008
Yusuke Kawasaki【川﨑有亮】
http://www.kawa.net/
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

Questions

Question #1

<?xml version='1.0' encoding='UTF-8'?>
<document>
    <foo>bar</foo>
</document>

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 !
我們已經準備好了！

DEMO

TODAY'S AGENDA

§2
WHO AM I?

Yusuke Kawasaki

川﨑　有亮


http://www.kawa.net/

Tech articles

CPAN Author

XML::TreePP

XML manipulation without Wiimote.

use XML::TreePP;
my $tpp = XML::TreePP->new();
my $url = "http://use.perl.org/index.rss";
my $tree = $tpp->parsehttp( GET => $url );
print $tree->{"rdf:RDF"}->{channel}->{title}, "\n";
print $tree->{"rdf:RDF"}->{channel}->{link}, "\n";

http://www.kawa.net/works/perl/treepp/treepp-e.html 2006.02.20

L::ZH::R::Pinyin

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

http://www.kawa.net/works/ajax/romanize/chinese-e.html 2006/03/26

JSAN Author

Animation.Cube demo


Animation.Cube library

<script src="Cube.js"></script>
<script>
    var list = [
        "first.jpg",
        "second.jpg",
        "third.jpg",
        "forth.jpg"
    ];
    var cube = new Animation.Cube( img_id, list );
    cube.rotate();
</script>

http://www.kawa.net/works/js/animation/cube-e.html 2006/04/12

Animation.Raster demo

Animation.Raster library

<script src="Raster.js"></script>
<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
    ras.scroll();
</script>

http://www.kawa.net/works/js/animation/raster-e.html 2006/04/07

JavaScript + Canvas Powered 3D Engine

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

§3
Real-device web services

Wiimote = Wii Remote

is a bluetooth wireless device.

See: http://www.wiili.org/index.php/Wiimote

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!

http://code.google.com/p/wiimote-over-http/

Gainer

An yet another real device of today.
http://gainer.cc/?userlang=en

digital/analog x I/O x 4

GoH's architecture

Over the Net means...

The power of "over HTTP" tech.

§4
RECRUIT and
Mash up Award

About RECRUIT Co., Ltd.

http://recruit.jp/

Media Technology Labs

Institute for RECRUIT's web strategy.
http://mtl.recruit.co.jp/

RECRUIT provides 14 kinds of web services.
http://webservice.recruit.co.jp/

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 http://jp.sun.com/mashupaward/

Co-operation with major 27 companies

§5
WSST

XML (POX) based web services.

<results>
  <api_version>1.00</api_version>
  <results_available>8629</results_available>
  <results_returned>10</results_returned>
  <results_start>1</results_start>
  <usedcar>
  <id>CU0001829778</id>
  <brand>
    <code>LE</code>
    <name>LEXUS</name>
  </brand>
  <model>SC</model>
  <grade>430</grade>
  <price>5300000</price>
  <desc>HDD navigation TV</desc>
  <body>
    <code>O</code>
    <name>Open</name>
  </body>

Web application development by simple code without manipulating XML.

<?php
  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) { ?>
<table>
<tr><th>Model</th>
<td><?php echo htmlspecialchars($i->model) ?></td>
</tr>
<tr><th>Price</th>
<td><?php echo htmlspecialchars($i->price) ?></td>
</tr>
</table>
<?php } ?>

How many libraries?

14 web services
X
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

http://code.google.com/p/wsst/

§6
Extra

The JUI Conference

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

Acknowledgements

Thank you all.

I'm looking forward to seeing you again in Tokyo!
contact: u-suke [at] kawa.net
http://www.kawa.net/