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

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.


← comment form← submit button


Introducing Yusuke Kawasaki


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



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.

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.



48 kr(6.4 Euro) 0.8 Euro!

Super rock, Lisbon


LiveChromaKey

ActionScript library forAR (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.

Current frame

Previous frame

-2nd 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–http://www.libspark.org/svn/as3/LiveChr

omaKey/trunk/examples/minority.html–http://www.libspark.org/svn/as3/LiveChr

omaKey/trunk/examples/exile.html



LivePointers

ActionScript library fordetecting 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

Live Color Pointer Detection LibraryYAPC::Europe 2009 Lisbon 27

Multiple Pointers Detection


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.


FingercapUS$1.00

Wii Remote ControllerUS$35.96

Corporate Perl Situationin 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 ContainerBy 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 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.


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


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.


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/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”


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 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.


MA5Web Application Contest

http://mashupaward.jp/


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.


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)

http://www.kawa.net/

Date post:	18-Nov-2014
Category:	Technology
Upload:	yusuke-kawasaki
View:	3,823 times
Download:	0 times