Your SlideShare is downloading. ×
0
Recent Web Tech Updates
                   from Japan

                     YAPC::Europe 2009.08.04
                    Yu...
PaPaPa Live Comment System

 • http://www.kawa.net/c/
   – Please access from your PC, iPhone, etc.

 • Write your comment...
Introducing
                     Yusuke Kawasaki




YAPC::Europe 2009 Lisbon               3
Yusuke Kawasaki(川﨑 有亮)

 • Perl monger
         – XML::TreePP, XML::FeedPP, etc.
 • JavaScript addict
         – Shibuya.j...
CPAN Author

  •   XML::TreePP
  •   XML::FeedPP
  •   Class::Accessor::Children
  •   Lingua::JA::Romanize::Japanese
  • ...
XML::TreePP

 • XML string from/to Perl hash object
     Pure Perl, fast and easy

 • use XML::TreePP;
   my $tpp = XML::T...
DOM Manipulation by Wiimote

                           Last year, I manipulated
                           the DOM by Wii...
The DOM Operations 2008

           I manipulated it around the world.

                           Copenhagen
            ...
The main difference between
        YAPC::Europe 2008 and 2009


                      My experiences in
                 ...
Super rock, Lisbon




             48 kr
                                     0.8 Euro!
          (6.4 Euro)
YAPC::Europe...
LiveChromaKey


                    ActionScript library for
                   AR (Augmented Reality)



YAPC::Europe 200...
LiveChromaKey
 • Image synthesizing engine for AR
    – 2009.05 released by Kawanet (me!)
 • Pure ActionScripe 3.0
    – N...
Step 1/3 - Stationary background

 At first, connect you webcam and run LiveChromaKey.
 Never move until it recognizes sta...
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 = For...
LiveChromaKey Synopsis

    LiveChromaKey provides four kinds of Sprites.


           v a r c h r o m a k e y : L C K _ C...
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 a...
Example: Slideshow in reality




                           minority.swf
YAPC::Europe 2009 Lisbon                   19
Augmented reality by reality

 Another way to augment reality is using past reality.


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


                   ActionScript library for
                 detecting colored pointers.



YAPC::Europe 20...
LivePointers

 • Live Color Pointer Detection Library
 • Uses Webcam as a 3D human interface
     – No need to print AR ma...
Multiple Pointers Detection




         Live Color Pointer Detection Library
YAPC::Europe 2009 Lisbon                    ...
Labeled Pointer Detection

 • Labeled pointer guided by color code.

 • Works as a human input
   user interface device.

...
Price is an advantage for UI
       Wii Remote Controller           Fingercap
            US$35.96                   US$1....
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...
Recruit Co., Ltd. (RGF)

 • Major publishing company since 1960
 • Media is changing as well as in Japan.
 • Now third par...
Japan Perl Association

 • Established on April 2009.
   – The Chair: Daisuke Maki (lestrrat)
   – Focusing to support cor...
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 OpenSoc...
Apache Shindig

 • An OpenSocial container implemention
   by Apache incubation project.
 • Consists of four parts:
   – G...
Importing Shindig to Perl

 • Weʼre importing Shindigʼs RPC Data API
   handling servlets to Perl!
 • Collaboration/partne...
Emoji


             Picture characters commonly
            used on mobile phones in Japan



YAPC::Europe 2009 Lisbon   ...
Background

 • 3 mobile phone carriers in Japan.
    – NTT DoCoMo, KDDI and SoftBank.
    – Vodafone has gone away from Ja...
Private code points

 • Each company uses their own code point in
   PUA (private use area). Ex. “heart”
 • DoCoMo        ...
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 2...
Googleʼs code points

 • Gmail supports “emoticon” characters.




 • They also uses PUA again and has their
   translatio...
Ex. Emoji for Sun

 •   DoCoMo PUA <U+E63E>
 •   KDDI PUA <U+E488>
 •   SoftBank PUA <U+E04A>
 •   Google PUA <U+FE000>


...
Ex. Emoji for Dung

 •   DoCoMo (donʼt have emoji for dung)
 •   KDDI PUA <U+E4F5>
 •   SoftBank PUA <U+E05A>
 •   Google ...
Perl Modules Released

 • Unicode::Emoji::E4U
   – Emoji mappings based on emoji4unicode
     project
   – Pure Perl OO in...
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...
MA5
             Web Application Contest



                   http://mashupaward.jp/



YAPC::Europe 2009 Lisbon         ...
Mashup Awards

 • Largest web application development
   contest in Japan since 2006.
 • MA4 – 2008.06.03 – 09.16




(C) ...
ChaMap – MA4 Grand Prix

                                   Geo location based
                                   chat com...
Get 1,000,000 Yen on MA5!




 See detail on http://mashupaward.jp/english/
 about the previous MA4 contest last year.
YAP...
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 Septembe...
Thank you!


                          Yusuke Kawasaki
                        川﨑 有亮 (kawanet)
                       http...
Upcoming SlideShare
Loading in...5
×

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

2,283

Published on

Recent Web Tech Updates from Japan
2008.08.04
YAPC::Europe 2009 Lisbon
Yusuke Kawasaki

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,283
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

  1. 1. 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
  2. 2. 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
  3. 3. Introducing Yusuke Kawasaki YAPC::Europe 2009 Lisbon 3
  4. 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. YAPC::Europe 2009 Lisbon 4
  5. 5. 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
  6. 6. 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
  7. 7. DOM Manipulation by Wiimote Last year, I manipulated the DOM by Wii Remote at YAPC::Europe 2008. YAPC::Europe 2009 Lisbon 7
  8. 8. 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
  9. 9. The main difference between YAPC::Europe 2008 and 2009 My experiences in Copenhagen and Lisbon. YAPC::Europe 2009 Lisbon 9
  10. 10. Super rock, Lisbon 48 kr 0.8 Euro! (6.4 Euro) YAPC::Europe 2009 Lisbon 10
  11. 11. LiveChromaKey ActionScript library for AR (Augmented Reality) YAPC::Europe 2009 Lisbon 11
  12. 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 12
  13. 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 13
  14. 14. Step 2/3 – Bluescreen on the fly It generates bluescreen automatically. Live Video – Background = Bluescreen - ⇒ YAPC::Europe 2009 Lisbon 14
  15. 15. Step 3/3 - Transparent foreground Get the foreground image as a translarent Sprite. Live Video – Bluescreen = Foreground - ⇒ YAPC::Europe 2009 Lisbon 15
  16. 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 16
  17. 17. Example: Travelling in Egypt pyramid.swf YAPC::Europe 2009 Lisbon 17
  18. 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 18
  19. 19. Example: Slideshow in reality minority.swf YAPC::Europe 2009 Lisbon 19
  20. 20. Augmented reality by reality Another way to augment reality is using past reality. -2nd frame Previous frame Current frame YAPC::Europe 2009 Lisbon 20
  21. 21. Multiarmed deity exile.swf YAPC::Europe 2009 Lisbon 21
  22. 22. Brothers on the fly exile.swf YAPC::Europe 2009 Lisbon 22
  23. 23. “Exile” Dancing exile.swf YAPC::Europe 2009 Lisbon 23
  24. 24. 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
  25. 25. LivePointers ActionScript library for detecting colored pointers. YAPC::Europe 2009 Lisbon 25
  26. 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 YAPC::Europe 2009 Lisbon 26
  27. 27. Multiple Pointers Detection Live Color Pointer Detection Library YAPC::Europe 2009 Lisbon 27
  28. 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 YAPC::Europe 2009 Lisbon 28
  29. 29. 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
  30. 30. Corporate Perl Situation in Japan YAPC::Europe 2009 Lisbon 30
  31. 31. 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
  32. 32. 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
  33. 33. 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
  34. 34. OpenSocial Container By Perl YAPC::Europe 2009 Lisbon 34
  35. 35. 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
  36. 36. 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
  37. 37. 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
  38. 38. Emoji Picture characters commonly used on mobile phones in Japan YAPC::Europe 2009 Lisbon 38
  39. 39. 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
  40. 40. 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
  41. 41. NTT DoCoMo Emojis (282) YAPC::Europe 2009 Lisbon 41
  42. 42. KDDI Emojis (647) YAPC::Europe 2009 Lisbon 42
  43. 43. SoftBank Emojis (351) Some of Emojis are displayed like animation GIFs on mobile phone devices. YAPC::Europe 2009 Lisbon 43
  44. 44. 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
  45. 45. 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
  46. 46. 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
  47. 47. 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
  48. 48. 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
  49. 49. MA5 Web Application Contest http://mashupaward.jp/ YAPC::Europe 2009 Lisbon 49
  50. 50. 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
  51. 51. 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
  52. 52. 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
  53. 53. Conclusion YAPC::Europe 2009 Lisbon 53
  54. 54. 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
  55. 55. Thank you! Yusuke Kawasaki 川﨑 有亮 (kawanet) http://www.kawa.net/ YAPC::Europe 2009 Lisbon 55
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×