Recent Web Tech Updates from Japan - YAPC::Europe 2009 Lisbon

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


Introducing
Yusuke Kawasaki


Yusuke Kawasaki（川﨑有亮）

• Perl monger
– XML::TreePP, XML::FeedPP, etc.
• JavaScript addict
– Shibuya.js, the JUI conference

http://twitter.com/kawanet

• I created XML::TreePP module.
• I think “DOM” needs more
elegant interface.


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/

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

DOM Manipulation by Wiimote

Last year, I manipulated
the DOM by Wii Remote
at YAPC::Europe 2008.


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

The main difference between
YAPC::Europe 2008 and 2009

My experiences in
Copenhagen and Lisbon.


Super rock, Lisbon

48 kr
0.8 Euro!
(6.4 Euro)

LiveChromaKey

ActionScript library for
AR (Augmented Reality)


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


Step 1/3 - Stationary background

At first, connect you webcam and run LiveChromaKey.
Never move until it recognizes stationary background.


Step 2/3 – Bluescreen on the fly

It generates bluescreen automatically.
Live Video – Background = Bluescreen

－ ⇒


Step 3/3 - Transparent foreground

Get the foreground image as a translarent Sprite.
Live Video – Bluescreen = Foreground

－ ⇒


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


Example: Travelling in Egypt

pyramid.swf

Sprites augmented IN reality

The key feature of LiveChromaKey is to insert
Sprites augmented between background and
foreground images.

Sprite


Example: Slideshow in reality

minority.swf

Augmented reality by reality

Another way to augment reality is using past reality.

-2nd frame

Previous frame

Current frame


Multiarmed deity

exile.swf

Brothers on the fly

exile.swf

“Exile” Dancing

exile.swf

Demos

• You can play these demos on:

– http://kawanet.blogspot.com/
– http://www.libspark.org/svn/as3/LiveChr
omaKey/trunk/examples/pyramid.html
omaKey/trunk/examples/minority.html
omaKey/trunk/examples/exile.html


LivePointers

ActionScript library for
detecting colored pointers.


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

Multiple Pointers Detection

Live Color Pointer Detection Library

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


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.

Corporate Perl Situation
in Japan


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!

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


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.

OpenSocial Container
By Perl


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 ■

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.

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
:

Emoji

Picture characters commonly
used on mobile phones in Japan


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.

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.

NTT DoCoMo Emojis (282)


KDDI Emojis (647)


SoftBank Emojis (351)

Some of Emojis are displayed like
animation GIFs on mobile phone devices.

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/

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”

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”

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.


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.


MA5
Web Application Contest

http://mashupaward.jp/


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.

Conclusion


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)


Thank you!

Yusuke Kawasaki
川﨑有亮 (kawanet)


Recent Web Tech Updates from Japan - YAPC::Europe 2009 Lisbon

Recommended

Recommended

More Related Content

More from Yusuke Kawasaki

More from Yusuke Kawasaki (18)

Recently uploaded

Recently uploaded (20)

Recent Web Tech Updates from Japan - YAPC::Europe 2009 Lisbon