recent web tech updates from japan - yapc::europe 2009 lisbon
DESCRIPTION
Recent Web Tech Updates from Japan2008.08.04YAPC::Europe 2009 LisbonYusuke KawasakiTRANSCRIPT
YAPC::Europe 2009 Lisbon 1
Recent Web Tech Updatesfrom Japan
YAPC::Europe 2009.08.04Yusuke Kawasaki (kawanet)
http://www.kawa.net/Recruit Media Technology Labs
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.
YAPC::Europe 2009 Lisbon 2
← comment form← submit button
YAPC::Europe 2009 Lisbon 3
Introducing Yusuke Kawasaki
YAPC::Europe 2009 Lisbon 4
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.
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 objectPure 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
YAPC::Europe 2009 Lisbon 7
DOM Manipulation by Wiimote
Last year, I manipulated the DOM by Wii Remote at YAPC::Europe 2008.
YAPC::Europe 2009 Lisbon 8
The DOM Operations 2008
I manipulated it around the world.
2008.04 OSDC.TW2008.05 YAPC::Asia2008.06 YAPC::NA2008.08 YAPC::Europe
Taipei
TokyoChicago
Copenhagen
The main difference betweenYAPC::Europe 2008 and 2009
My experiences inCopenhagen and Lisbon.
YAPC::Europe 2009 Lisbon 9
YAPC::Europe 2009 Lisbon 10
48 kr(6.4 Euro) 0.8 Euro!
Super rock, Lisbon
YAPC::Europe 2009 Lisbon 11
LiveChromaKey
ActionScript library forAR (Augmented Reality)
YAPC::Europe 2009 Lisbon 12
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 13
Step 1/3 - Stationary background
At first, connect you webcam and run LiveChromaKey.Never move until it recognizes stationary background.
YAPC::Europe 2009 Lisbon 14
Step 2/3 – Bluescreen on the fly
It generates bluescreen automatically.Live Video – Background = Bluescreen
- ⇒
YAPC::Europe 2009 Lisbon 15
Step 3/3 - Transparent foreground
Get the foreground image as a translarent Sprite.Live Video – Bluescreen = Foreground
- ⇒
YAPC::Europe 2009 Lisbon 16
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 17
Example: Travelling in Egypt
pyramid.swf
YAPC::Europe 2009 Lisbon 18
Sprites augmented IN reality
The key feature of LiveChromaKey is to insert Sprites augmented between background and foreground images.
Sprite
YAPC::Europe 2009 Lisbon 19
Example: Slideshow in reality
minority.swf
YAPC::Europe 2009 Lisbon 20
Augmented reality by reality
Another way to augment reality is using past reality.
Current frame
Previous frame
-2nd frame
YAPC::Europe 2009 Lisbon 21
Multiarmed deity
exile.swf
YAPC::Europe 2009 Lisbon 22
Brothers on the fly
exile.swf
YAPC::Europe 2009 Lisbon 23
“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–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
YAPC::Europe 2009 Lisbon 25
LivePointers
ActionScript library fordetecting colored pointers.
YAPC::Europe 2009 Lisbon 26
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
Live Color Pointer Detection LibraryYAPC::Europe 2009 Lisbon 27
Multiple Pointers Detection
YAPC::Europe 2009 Lisbon 28
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
Iʼm sure that Fingercap is definitely important user interface device of very near future.
YAPC::Europe 2009 Lisbon 29
FingercapUS$1.00
Wii Remote ControllerUS$35.96
Corporate Perl Situationin 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 ContainerBy 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 implementionby 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.
YAPC::Europe 2009 Lisbon 37
A p i S e r v l e t . p mA p p D a t a H a n d l e r . p mA p p D a t a S e r v i c e . p mC o l l e c t i o n O p t i o n s . p mD a t a R e q u e s t H a n d l e r . p mD a t a S e r v i c e S e r v l e t . p mJ s o n R p c S e r v l e t . p mP e r s o n H a n d l e r . p mP e r s o n S e r v i c e . p mR e q u e s t I t e m . p mR e s p o n s e I t e m . p mR e s t R e q u e s t I t e m . p mR p c R e q u e s t I t e m . p m
:Apache
Perl Perl PHP
GadgetRenderServlet
DataRPC APIServlet
SNSWebsite
Database Layer
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 Emojison mobile email.
39YAPC::Europe 2009 Lisbon
Private code points
• Each company uses their own code point in PUA (private use area). Ex. “heart”
• DoCoMo KDDI SoftBankU+E6EC U+E595 U+E022SJIS-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 Usageu 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
MA5Web Application Contest
http://mashupaward.jp/
YAPC::Europe 2009 Lisbon 49
2009/8/5(C) RECRUIT Co., Ltd. 50
Mashup Awards
• Largest web application development contest in Japan since 2006.
• MA4 – 2008.06.03 – 09.16
2009/8/5(C) RECRUIT Co., Ltd. 51
ChaMap – MA4 Grand Prix
http://www.chamap.net/
Geo location based chat communication platform serviceusing Google Maps, Language API and some other APIs. Real time translation and read out in English.
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
YAPC::Europe 2009 Lisbon 55
Thank you!
Yusuke Kawasaki川﨑 有亮 (kawanet)
http://www.kawa.net/