Recent Web Tech Updates
from Japan
YAPC::Europe 2009.08.04
Yusuke Kawasaki (kawanet)
http://www.kawa.net/
Recruit Media Technology Labs
YAPC::Europe 2009 Lisbon 1

PaPaPa Live Comment System
• http://www.kawa.net/c/
– Please access from your PC, iPhone, etc.
• Write your comment on form and click the
button below to send it to the screen.
← comment form
← submit button
YAPC::Europe 2009 Lisbon 2

Introducing
Yusuke Kawasaki
YAPC::Europe 2009 Lisbon 3

Yusuke Kawasaki（川﨑 有亮）
• Perl monger
– XML::TreePP, XML::FeedPP, etc.
• JavaScript addict
– Shibuya.js, the JUI conference
http://www.kawa.net/
http://twitter.com/kawanet
• I created XML::TreePP module.
• I think “DOM” needs more
elegant interface.
YAPC::Europe 2009 Lisbon 4

CPAN Author
• XML::TreePP
• XML::FeedPP
• Class::Accessor::Children
• Lingua::JA::Romanize::Japanese
• Lingua::KO::Romanize::Hangul
• Lingua::ZH::Romanize::Pinyin
• Encode::JP::Emoji
• Unicode::Emoji::Base
http://search.cpan.org/~kawasaki/
YAPC::Europe 2009 Lisbon 5

XML::TreePP
• XML string from/to Perl hash object
Pure Perl, fast and easy
• use XML::TreePP;
my $tpp = XML::TreePP->new();
my $hash = {elem=>"value"};
print $tpp->write($hash); # XML string
• my $xml = "<elem>value</elem>";
my $tree = $tpp->parse($xml);
print Dumper($tree); # Perl hash object
YAPC::Europe 2009 Lisbon 6

DOM Manipulation by Wiimote
Last year, I manipulated
the DOM by Wii Remote
at YAPC::Europe 2008.
YAPC::Europe 2009 Lisbon 7

The DOM Operations 2008
I manipulated it around the world.
Copenhagen
Tokyo
Chicago
Taipei
2008.04 OSDC.TW
2008.05 YAPC::Asia
2008.06 YAPC::NA
2008.08 YAPC::Europe
YAPC::Europe 2009 Lisbon 8

The main difference between
YAPC::Europe 2008 and 2009
My experiences in
Copenhagen and Lisbon.
YAPC::Europe 2009 Lisbon 9

Super rock, Lisbon
48 kr
0.8 Euro!
(6.4 Euro)
YAPC::Europe 2009 Lisbon 10

LiveChromaKey
ActionScript library for
AR (Augmented Reality)
YAPC::Europe 2009 Lisbon 11

LiveChromaKey
• Image synthesizing engine for AR
– 2009.05 released by Kawanet (me!)
• Pure ActionScripe 3.0
– No other library dependencies
• Only webcam needed
– No blue back screen
– No need to print
AR marker PDF
YAPC::Europe 2009 Lisbon 12

Step 1/3 - Stationary background
At first, connect you webcam and run LiveChromaKey.
Never move until it recognizes stationary background.
YAPC::Europe 2009 Lisbon 13

Step 2/3 – Bluescreen on the fly
It generates bluescreen automatically.
Live Video – Background = Bluescreen
－ ⇒
YAPC::Europe 2009 Lisbon 14

Step 3/3 - Transparent foreground
Get the foreground image as a translarent Sprite.
Live Video – Bluescreen = Foreground
－ ⇒
YAPC::Europe 2009 Lisbon 15

LiveChromaKey Synopsis
LiveChromaKey provides four kinds of Sprites.
v a r c h r o m a k e y : L C K _ C o r e = n e w L C K _ C o r e ( ) ;
c h r o m a k e y . i n i t ( ) ;
v a r s p L i v e : S p r i t e = c h r o m a k e y . g e t L i v e ( ) ;
v a r s p B a c k : S p r i t e = c h r o m a k e y . g e t B a c k g r o u n d ( ) ;
v a r s p M a s k : S p r i t e = c h r o m a k e y . g e t M a s k ( ) ;
v a r s p F o r e : S p r i t e = c h r o m a k e y . g e t F o r e g r o u n d ( ) ;
t h i s . a d d C h i l d ( s p L i v e ) ;
t h i s . a d d C h i l d ( s p B a c k ) ;
t h i s . a d d C h i l d ( s p M a s k ) ;
t h i s . a d d C h i l d ( s p F o r e ) ;
YAPC::Europe 2009 Lisbon 16

Example: Travelling in Egypt
pyramid.swf
YAPC::Europe 2009 Lisbon 17

Sprites augmented IN reality
The key feature of LiveChromaKey is to insert
Sprites augmented between background and
foreground images.
Sprite
YAPC::Europe 2009 Lisbon 18

Example: Slideshow in reality
minority.swf
YAPC::Europe 2009 Lisbon 19

Augmented reality by reality
Another way to augment reality is using past reality.
-2nd frame
Previous frame
Current frame
YAPC::Europe 2009 Lisbon 20

Multiarmed deity
exile.swf
YAPC::Europe 2009 Lisbon 21

Brothers on the fly
exile.swf
YAPC::Europe 2009 Lisbon 22

“Exile” Dancing
exile.swf
YAPC::Europe 2009 Lisbon 23

Demos
• You can play these demos on:
– http://kawanet.blogspot.com/
– http://www.libspark.org/svn/as3/LiveChr
omaKey/trunk/examples/pyramid.html
– http://www.libspark.org/svn/as3/LiveChr
omaKey/trunk/examples/minority.html
– http://www.libspark.org/svn/as3/LiveChr
omaKey/trunk/examples/exile.html
YAPC::Europe 2009 Lisbon 24

LivePointers
ActionScript library for
detecting colored pointers.
YAPC::Europe 2009 Lisbon 25

LivePointers
• Live Color Pointer Detection Library
• Uses Webcam as a 3D human interface
– No need to print AR marker PDF
• Any Color Pixel Cluster = Pointing Device
• Ex.
– Cluster #0 (250 pixels)
– RGB: 25D985 (hex)
– H: 152
– S: 0.83
– V: 0.85
YAPC::Europe 2009 Lisbon 26

Multiple Pointers Detection
Live Color Pointer Detection Library
YAPC::Europe 2009 Lisbon 27

Labeled Pointer Detection
• Labeled pointer guided by color code.
• Works as a human input
user interface device.
• Ex. a labeled pointer
– Name: “fingercap”
– Color: 0x2197A9 (uint)
– Cost: approx US$1
YAPC::Europe 2009 Lisbon 28

Price is an advantage for UI
Wii Remote Controller Fingercap
US$35.96 US$1.00
Iʼm sure that Fingercap is definitely important
user interface device of very near future.
YAPC::Europe 2009 Lisbon 29

Corporate Perl Situation
in Japan
YAPC::Europe 2009 Lisbon 30

Corporate Perl in Japan
• Several major Japanese companies strongly
use Perl for their main business domains.
• DeNA (mobagame)
– Mobile SNS. 10+ mil users.
• Livedoor
– dankogai and miyagawa quit.
• Mixi
– SNS. 16+ mil users.
• Recruit
– Employs me. And more!
YAPC::Europe 2009 Lisbon 31

Recruit Co., Ltd. (RGF)
• Major publishing company since 1960
• Media is changing as well as in Japan.
• Now third part of our sales is earning
on/from the Interet.
• Established Media Technology Labs 2007
– Web tech R&D, business dev, incubation
YAPC::Europe 2009 Lisbon 32

Japan Perl Association
• Established on April 2009.
– The Chair: Daisuke Maki (lestrrat)
– Focusing to support corporate use of Perl
and Perl hackers job changing.
• Hosts YAPC::Asia 2009 Tokyo.
– 2009.09.10 – 09.11 Autumn
– Shibuya.pm has hosted Y::A until 2008.
YAPC::Europe 2009 Lisbon 33

OpenSocial Container
By Perl
YAPC::Europe 2009 Lisbon 34

OpenSocial
• OpenSocial is a set of APIs for SNS.
• Many SNSs in the world, including Mixi in
Japan, support OpenSocial apps.
• Two way to access to social network ■
– JavaScript library interface ■
– RESTful XML / JSON-RPC protocols ■
YAPC::Europe 2009 Lisbon 35

Apache Shindig
• An OpenSocial container implemention
by Apache incubation project.
• Consists of four parts:
– Gadget Container JavaScript
– Gadget Rendering Server
– OpenSocial Container JavaScript
– OpenSocial Data Server
• Java and PHP version of it released.
• No Perl version yet.
YAPC::Europe 2009 Lisbon 36

Importing Shindig to Perl
• Weʼre importing Shindigʼs RPC Data API
handling servlets to Perl!
• Collaboration/partnership wanted.
A p i S e r v l e t . p m
Database Layer A p p D a t a H a n d l e r . p m
A p p D a t a S e r v i c e . p m
C o l l e c t i o n O p t i o n s . p m
Data Gadget D a t a R e q u e s t H a n d l e r . p m
SNS
RPC API Render D a t a S e r v i c e S e r v l e t . p m
Website
Servlet Servlet J s o n R p c S e r v l e t . p m
P e r s o n H a n d l e r . p m
P e r s o n S e r v i c e . p m
Perl Perl PHP
R e q u e s t I t e m . p m
R e s p o n s e I t e m . p m
Apache R e s t R e q u e s t I t e m . p m
R p c R e q u e s t I t e m . p m
:
YAPC::Europe 2009 Lisbon 37

Emoji
Picture characters commonly
used on mobile phones in Japan
YAPC::Europe 2009 Lisbon 38

Background
• 3 mobile phone carriers in Japan.
– NTT DoCoMo, KDDI and SoftBank.
– Vodafone has gone away from Japan.
• Each company has
defined their Emoji
character sets with
less compatibility.
• Most Japanese users
heavily use Emojis
on mobile email.
YAPC::Europe 2009 Lisbon 39

Private code points
• Each company uses their own code point in
PUA (private use area). Ex. “heart”
• DoCoMo KDDI SoftBank
U+E6EC U+E595 U+E022
SJIS-F991 SJIS-F7B2 SJIS-F962
• We need translation maps for each pair of
Emoji sets.
YAPC::Europe 2009 Lisbon 40

NTT DoCoMo Emojis (282)
YAPC::Europe 2009 Lisbon 41

KDDI Emojis (647)
YAPC::Europe 2009 Lisbon 42

SoftBank Emojis (351)
Some of Emojis are displayed like
animation GIFs on mobile phone devices.
YAPC::Europe 2009 Lisbon 43

Googleʼs code points
• Gmail supports “emoticon” characters.
• They also uses PUA again and has their
translation map from/to Japanese Emojis.
• Then, Googleʼs “emoji4unicode” project has
proposed unified code points of Japanese
Emojis to Unicode standard. Thanks!
• http://emoji4unicode.googlecode.com/
YAPC::Europe 2009 Lisbon 44

Ex. Emoji for Sun
• DoCoMo PUA <U+E63E>
• KDDI PUA <U+E488>
• SoftBank PUA <U+E04A>
• Google PUA <U+FE000>
• Unicode Standard
<U+2600> “BLACK SUN WITH RAYS”
YAPC::Europe 2009 Lisbon 45

Ex. Emoji for Dung
• DoCoMo (donʼt have emoji for dung)
• KDDI PUA <U+E4F5>
• SoftBank PUA <U+E05A>
• Google PUA <U+FE4F4>
• Unicode Standard proposed
<U+1F410> “DUNG”
YAPC::Europe 2009 Lisbon 46

Perl Modules Released
• Unicode::Emoji::E4U
– Emoji mappings based on emoji4unicode
project
– Pure Perl OO interface for the table
• Encode::JP::Emoji
– Emoji encodings and cross-mapping
tables in pure Perl
– Pure Perl encodings for Encode.pm
– XS (UCM) version of this was canceled.
YAPC::Europe 2009 Lisbon 47

Encode::JP::Emoji Usage
u s e E n c o d e ;
u s e E n c o d e : : J P : : E m o j i ;
# f r o m D o C o M o < U + E 6 E 2 > t o G o o g l e < U + F E 8 2 E >
m y $ k e y c a p 1 = " ¥ x E E ¥ x 9 B ¥ x A 2 " ;
E n c o d e : : f r o m _ t o ( $ k e y c a p 1 , ' x - u t f 8 - e 4 u - d o c o m o ' , ' u t f 8 ' ) ;
# f r o m K D D I < S J I S + F 7 F 5 > t o S o f t B a n k < S J I S + F 7 4 7 >
m y $ s c r e a m = " ¥ x F 7 ¥ x F 5 " ;
E n c o d e : : f r o m _ t o ( $ s c r e a m , ' x - s j i s - e 4 u - k d d i a p p ' ,
' x - s j i s - e 4 u - s o f t b a n k 3 g ' ) ;
Encode::JP::Mobile is an alternative module to do above.
YAPC::Europe 2009 Lisbon 48

MA5
Web Application Contest
http://mashupaward.jp/
YAPC::Europe 2009 Lisbon 49

Mashup Awards
• Largest web application development
contest in Japan since 2006.
• MA4 – 2008.06.03 – 09.16
(C) RECRUIT Co., Ltd. 2009/8/5 50

ChaMap – MA4 Grand Prix
Geo location based
chat communication
platform service
using Google Maps,
Language API and
some other APIs.
Real time translation
and read out in English.
http://www.chamap.net/
(C) RECRUIT Co., Ltd. 2009/8/5 51

Get 1,000,000 Yen on MA5!
See detail on http://mashupaward.jp/english/
about the previous MA4 contest last year.
YAPC::Europe 2009 Lisbon 52

Conclusion
YAPC::Europe 2009 Lisbon 53

Conclusion
• Corporate Perl is growing also in Japan.
• Come to Japan and see us in YAPC::Asia
2009 on this September.
• Recruit (RGF) is working for an OpenSocial
container implemented by Perl.
• Dung Emoji code point <U+1F410> is
proposed to Unicode standard.
• Apply your work to MA5 contest to win the
grand prix of 1,000,000Yen! (≒9,000 beer)
YAPC::Europe 2009 Lisbon 54

Thank you!
Yusuke Kawasaki
川﨑 有亮 (kawanet)
http://www.kawa.net/
YAPC::Europe 2009 Lisbon 55