Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

Shibuyajs Digest

•Download as PPT, PDF•
•
takesako
takesako

(1) The document summarizes a talk on the latest JavaScript trends in Japan. It discusses things like polyglot programming using HTML, CSS, JavaScript and Perl in a GIF image, cross-domain access protocols using GIFs, and various JavaScript frameworks and tools developed in Japan. (2) Several Japanese JavaScript projects are highlighted, including Mylingual.net for multilingual websites, AJAJA for server-side JavaScript, and Cycal for Ajax spreadsheets. (3) The talk also featured lightning talks on topics like implementing a Java virtual machine in JavaScript and fast XPath engines for JavaScript in Internet Explorer and Safari 2.

1 of 83
Shibuya.JS Digest Yoshinori TAKESAKO http:// namazu.org/~takesako / 日本の JavaScript 最新動向
the only JavaScript user group in (Japan) the world. Welcome to Shibuya.JS
id:secondlife x id:nagayama The founder of Shibuya.JS He is not here. (RubyConf2007)
I’m not JavaScript hacker Shibuya.pm organizer (2 nd ) miyagawa -> TAKESAKO Shibuya Perl Mongers
Shibuya.JS Tech Talks#1
Shibuya.JS Tech Talks#2…
Agenda
Shibuya.JS Digest : 日本の JavaScript 最新動向 Introduction x 1 <TAKESAKO> (1) Web Polyglot (HTML/CSS & JS & Perl GIF89a) (2) Mylingual.net (Japanize) UserJavaScript for i18n (3) AJAJA (Server Side JS) replacement from PHP, Perl (4) Cycal (Ajax spreadsheet) (5) Fastladder (livedoor Reader) (6) AutoPagerize (swdyh) Lightning Talks x 3 (7) &quot;orto&quot; JavaVM on JavaScript <Yu Kobayashi> (8) CSS3 Selectors to XPath <Piro> (9) Fast JS XPath Engine for IE <amachang>
Introduction
Abnormal JavaScript
(1)
(1) Abnormal JS crazy hacks
Polyglot
HTML/CSS & JS & Perl in GIF89a (valid) Web Polyglot
Web Polyglot DEMO HTML/CSS & JS & Perl in GIF89a (valid)
View source
Perl in GIF89a GIF89a(q =/*.....Ä= );sub GIF89a{print &quot;Hello Perl!&quot;} __END__ #*/1);function GIF89a(){alert(&quot;Hello JavaScrpt!&quot;)} /*<body style=visibility:hidden> <div style=position:relative;visibility:visible> <h1>Hello HTML!</h1><!-- ................................................ ................................................ ................................................ ................................................ --><img src=?> <script src=# language=JavaScript></script></div> */// ;
JavaScript in GIF89a GIF89a( q= /*.....Ä=);sub GIF89a{print &quot;Hello Perl!&quot;} __END__#*/ 1 );function GIF89a(){alert(&quot;Hello JavaScrpt!&quot;)} /*<body style=visibility:hidden> <div style=position:relative;visibility:visible> <h1>Hello HTML!</h1><!-- ................................................ ................................................ ................................................ ................................................ --><img src=?> <script src=# language=JavaScript></script></div> */ // ;
HTML/CSS in GIF89a GIF89a(q=/*.....Ä=);sub GIF89a{print &quot;Hello Perl!&quot;} __END__#*/1);function GIF89a(){alert(&quot;Hello JavaScrpt!&quot;)} /* <body style=visibility:hidden> <div style=position:relative;visibility:visible> <h1>Hello HTML!</h1> <!-- ................................................ ................................................ ................................................ ................................................ --> <img src=?> <script src=# language=JavaScript></script> </div> */// ;
How to break same-origin-policy. (Parallelize cross-domain access) Other GIF89a hacks GIF89a Binary Image Object for AJAX communications Protocol
GIF89a cross-domain access protocol <img src=“null.gif?q=param&quot; onload=“ callback (this.width)&quot;> function callback (data) { //… do action } (1) Define JS callback function (likes JSONP) (2) New Image Object CGI OK http://example.com/webapi/null.gif?q=foobar GIF Image size!
GIF can return 16bit x 2 over crossdomain Server Side program (sample) #!/usr/bin/perl use strict; use warnings; sub create_gif { my $size = pack &quot;S2&quot;, @_; return &quot;GIF89a$sizef00000000000ffffff,&quot; . &quot;0000000001000100000202L0100;&quot;; } print &quot;Content-Length: 35&quot;; print &quot;Content-Type: image/gif&quot;; binmode(*STDOUT); print create_gif(65535, 65535); 1;
It works!
(2)
Polyglot (i18n)
Japanese traditional life’s work on software L10N (Localization) I18N (Internationalization) M17N (Multilingualization) Japanese traditional programmer make it one's life to L10N, I18N...
Mylingual.net (Japanize)
 
What is Mylingual.net? Mylingual.net Transparent i18n to any language (Web UI only) UserJavaScript (keeping HTML DOM structure) Opera 9 Mozilla Firefox & Greasemonkey Safari 2 & Creammonkey Internet Explorer 6 & Turnabout Advanced / Trixie Internet Explorer 7 & IE7pro (Inspired from) Japanize Transparent l10n to Japanese A web browser extension, it works good
Translation data is Wiki-style
Support for Regexp & Date format
(3)
AJAJA (Server Side JS)
What is AJAJA? Implementaion of JavaScript/ASP cf. Legacy: MS IIS JScript/ASP JS Engine SpiderMonkey + a patch CGI mode #!/usr/bin/asp_js Support for SQLite3 (default) use('SQLite'); db = new SQLite('sample.db');
 
Sample code
Sample code of AJAJA hello.asp <%@ Language=JavaScript %> <% var hello = &quot;Hello world&quot;; %> <html> <head> <title> <%= hello %> </title> </head> <body> <h1> <%= hello %> </h1> </body> </html>
[ ソース ]
JSmarty (PHP Template on JS)
bbs.tpl (JSmarty – Smarty compatible) View source template file {foreach from=$rows item='row'} <dl> <dt> [ {$row[0]} ]&nbsp; <strong style='color:green;'> {$row[1]} </strong>&nbsp; 投稿者： {$row[2]} 投稿日： {$row[3]} </dt> <dd><p> {$row[4]} </p></dd> </dl> <hr> {/foreach}
What is JSmarty? Smarty is… One of the famous PHP Template Engine JSmarty is… Smarty on JavaScript Smarty clone Emulate PHP strings function on JS can use old Smarty template file almost compatible has a little incompatible plug-in Using JSAN.js to load
PMconnect (JS + Perl CPAN)
pmconnect 　 (Akira Higuchi) SpiderMonkey (JS) <-> Perl binding library /* GD */ Perl.Use(&quot;GD&quot;); var im = new Perl(&quot;GD::Image&quot;,100,100); var white = im.colorAllocate(255,255,255); var black = im.colorAllocate(0,0,0); var red = im.colorAllocate(255,0,0); var blue = im.colorAllocate(0,0,255); im.transparent(white); im.interlaced('true'); im.rectangle(0,0,99,99,black); im.arc(50,50,95,75,0,360,blue); im.fill(50,50,red); var s = im.png(); Perl.Use(&quot;FileHandle&quot;); var fh = new Perl(&quot;FileHandle&quot;, &quot;gdout.png&quot;, &quot;w&quot;); fh.print(s); fh.close();
≠ JSAN
pmconnect – samples – oleexcel.js
(4)
Cycal (Ajax spreadsheet)
What is Cycal? online Ajax spreadsheet http://spreadsheet.sakura.ne.jp/ (by Abui Daisuke)
vs. Google
Cycal vs. Google spreadsheet cf. http://spreadsheet.sakura.ne.jp/paper/master's_paper.pdf (paper in Japanese)
vs. Excel
Cycal vs. Excel 2007  Cycal won!
You don’t need Excel 2007 any more. B.C. - Before Cycal A.D. - Abui Daisuke
other Japanese JS products
(5)
Fastladder (livedoor Reader)
 
Fastladder (livedoor Reader) Fastladder is yet another web-based feed-reader which was launched on Jul 3 2007. Fastladder has an origin in “livedoor Reader” which has been offered for Japanese-speaking people since last year. Actually, it is an English-version of it. It works very quickly. http://d.hatena.ne.jp/antipop/20070831/1188557354 antipop - Introducing another Feed Reader: Fastladder
Fastladder (livedoor Reader) is known as “ fastest” RSS/Atom feed Reader in the world.
a.k.a
implementing “ HTTP 301” most definitely in the world. “ HTTP 301 Moved Permanently” http://bb.watch.impress.co.jp/blog/archives/2007/10/post_39.html
mala++
(6)
AutoPagerize (swdyh)
http://userscripts.org/scripts/show/8551
AutoPagerize -> http://d.hatena.ne.jp/toshi123/20070601#p1
Wiki-Style : SITEINFO Sharing Regexp, XPath database.
http://labs.gmo.jp/blog/ku/2007/07/autopagerizexpath_autopagerize_ide.html AutoPagerize IDE – Visual XPath
XPath++ DOM++
Lightning Talks
(7)
“ orto” JavaVM on JavaScript by Yu Kobayashi (Next Talk…)
↑ Implementation JavaVM on JavaScript ↓ Java byte code (J2ME)
 
It works on iPhone! < とおる。 >: But I can't control because iphone has no keyboard;(
(8)
CSS3 Selectors to XPath ( 高橋メソッド in XUL) by Piro (Next Talk…)
Piro++
(9)
Fast JS XPath Engine for IE (and Safari2) by amachang (Next Talk…)
http://usrb.in/amachang/static/amacan/
We love JavaScript!
Thank you! ご清聴ありがとうございました [ 宣伝 ] サイボウズ・ラボでは人材募集中です

More Related Content

Shibuyajs Digest

  • 1. Shibuya.JS Digest Yoshinori TAKESAKO http:// namazu.org/~takesako / 日本の JavaScript 最新動向
  • 2. the only JavaScript user group in (Japan) the world. Welcome to Shibuya.JS
  • 3. id:secondlife x id:nagayama The founder of Shibuya.JS He is not here. (RubyConf2007)
  • 4. I’m not JavaScript hacker Shibuya.pm organizer (2 nd ) miyagawa -> TAKESAKO Shibuya Perl Mongers
  • 8. Shibuya.JS Digest : 日本の JavaScript 最新動向 Introduction x 1 <TAKESAKO> (1) Web Polyglot (HTML/CSS & JS & Perl GIF89a) (2) Mylingual.net (Japanize) UserJavaScript for i18n (3) AJAJA (Server Side JS) replacement from PHP, Perl (4) Cycal (Ajax spreadsheet) (5) Fastladder (livedoor Reader) (6) AutoPagerize (swdyh) Lightning Talks x 3 (7) &quot;orto&quot; JavaVM on JavaScript <Yu Kobayashi> (8) CSS3 Selectors to XPath <Piro> (9) Fast JS XPath Engine for IE <amachang>
  • 11. (1)
  • 12. (1) Abnormal JS crazy hacks
  • 14. HTML/CSS & JS & Perl in GIF89a (valid) Web Polyglot
  • 15. Web Polyglot DEMO HTML/CSS & JS & Perl in GIF89a (valid)
  • 17. Perl in GIF89a GIF89a(q =/*.....Ä= );sub GIF89a{print &quot;Hello Perl!&quot;} __END__ #*/1);function GIF89a(){alert(&quot;Hello JavaScrpt!&quot;)} /*<body style=visibility:hidden> <div style=position:relative;visibility:visible> <h1>Hello HTML!</h1><!-- ................................................ ................................................ ................................................ ................................................ --><img src=?> <script src=# language=JavaScript></script></div> */// ;
  • 18. JavaScript in GIF89a GIF89a( q= /*.....Ä=);sub GIF89a{print &quot;Hello Perl!&quot;} __END__#*/ 1 );function GIF89a(){alert(&quot;Hello JavaScrpt!&quot;)} /*<body style=visibility:hidden> <div style=position:relative;visibility:visible> <h1>Hello HTML!</h1><!-- ................................................ ................................................ ................................................ ................................................ --><img src=?> <script src=# language=JavaScript></script></div> */ // ;
  • 19. HTML/CSS in GIF89a GIF89a(q=/*.....Ä=);sub GIF89a{print &quot;Hello Perl!&quot;} __END__#*/1);function GIF89a(){alert(&quot;Hello JavaScrpt!&quot;)} /* <body style=visibility:hidden> <div style=position:relative;visibility:visible> <h1>Hello HTML!</h1> <!-- ................................................ ................................................ ................................................ ................................................ --> <img src=?> <script src=# language=JavaScript></script> </div> */// ;
  • 20. How to break same-origin-policy. (Parallelize cross-domain access) Other GIF89a hacks GIF89a Binary Image Object for AJAX communications Protocol
  • 21. GIF89a cross-domain access protocol <img src=“null.gif?q=param&quot; onload=“ callback (this.width)&quot;> function callback (data) { //… do action } (1) Define JS callback function (likes JSONP) (2) New Image Object CGI OK http://example.com/webapi/null.gif?q=foobar GIF Image size!
  • 22. GIF can return 16bit x 2 over crossdomain Server Side program (sample) #!/usr/bin/perl use strict; use warnings; sub create_gif { my $size = pack &quot;S2&quot;, @_; return &quot;GIF89a$sizef00000000000ffffff,&quot; . &quot;0000000001000100000202L0100;&quot;; } print &quot;Content-Length: 35&quot;; print &quot;Content-Type: image/gif&quot;; binmode(*STDOUT); print create_gif(65535, 65535); 1;
  • 24. (2)
  • 26. Japanese traditional life’s work on software L10N (Localization) I18N (Internationalization) M17N (Multilingualization) Japanese traditional programmer make it one's life to L10N, I18N...
  • 28.  
  • 29. What is Mylingual.net? Mylingual.net Transparent i18n to any language (Web UI only) UserJavaScript (keeping HTML DOM structure) Opera 9 Mozilla Firefox & Greasemonkey Safari 2 & Creammonkey Internet Explorer 6 & Turnabout Advanced / Trixie Internet Explorer 7 & IE7pro (Inspired from) Japanize Transparent l10n to Japanese A web browser extension, it works good
  • 30. Translation data is Wiki-style
  • 31. Support for Regexp & Date format
  • 32. (3)
  • 34. What is AJAJA? Implementaion of JavaScript/ASP cf. Legacy: MS IIS JScript/ASP JS Engine SpiderMonkey + a patch CGI mode #!/usr/bin/asp_js Support for SQLite3 (default) use('SQLite'); db = new SQLite('sample.db');
  • 35.  
  • 37. Sample code of AJAJA hello.asp <%@ Language=JavaScript %> <% var hello = &quot;Hello world&quot;; %> <html> <head> <title> <%= hello %> </title> </head> <body> <h1> <%= hello %> </h1> </body> </html>
  • 40. bbs.tpl (JSmarty – Smarty compatible) View source template file {foreach from=$rows item='row'} <dl> <dt> [ {$row[0]} ]&nbsp; <strong style='color:green;'> {$row[1]} </strong>&nbsp; 投稿者： {$row[2]} 投稿日： {$row[3]} </dt> <dd><p> {$row[4]} </p></dd> </dl> <hr> {/foreach}
  • 41. What is JSmarty? Smarty is… One of the famous PHP Template Engine JSmarty is… Smarty on JavaScript Smarty clone Emulate PHP strings function on JS can use old Smarty template file almost compatible has a little incompatible plug-in Using JSAN.js to load
  • 42. PMconnect (JS + Perl CPAN)
  • 43. pmconnect 　 (Akira Higuchi) SpiderMonkey (JS) <-> Perl binding library /* GD */ Perl.Use(&quot;GD&quot;); var im = new Perl(&quot;GD::Image&quot;,100,100); var white = im.colorAllocate(255,255,255); var black = im.colorAllocate(0,0,0); var red = im.colorAllocate(255,0,0); var blue = im.colorAllocate(0,0,255); im.transparent(white); im.interlaced('true'); im.rectangle(0,0,99,99,black); im.arc(50,50,95,75,0,360,blue); im.fill(50,50,red); var s = im.png(); Perl.Use(&quot;FileHandle&quot;); var fh = new Perl(&quot;FileHandle&quot;, &quot;gdout.png&quot;, &quot;w&quot;); fh.print(s); fh.close();
  • 45. pmconnect – samples – oleexcel.js
  • 46. (4)
  • 48. What is Cycal? online Ajax spreadsheet http://spreadsheet.sakura.ne.jp/ (by Abui Daisuke)
  • 50. Cycal vs. Google spreadsheet cf. http://spreadsheet.sakura.ne.jp/paper/master's_paper.pdf (paper in Japanese)
  • 52. Cycal vs. Excel 2007  Cycal won!
  • 53. You don’t need Excel 2007 any more. B.C. - Before Cycal A.D. - Abui Daisuke
  • 54. other Japanese JS products
  • 55. (5)
  • 57.  
  • 58. Fastladder (livedoor Reader) Fastladder is yet another web-based feed-reader which was launched on Jul 3 2007. Fastladder has an origin in “livedoor Reader” which has been offered for Japanese-speaking people since last year. Actually, it is an English-version of it. It works very quickly. http://d.hatena.ne.jp/antipop/20070831/1188557354 antipop - Introducing another Feed Reader: Fastladder
  • 59. Fastladder (livedoor Reader) is known as “ fastest” RSS/Atom feed Reader in the world.
  • 60. a.k.a
  • 61. implementing “ HTTP 301” most definitely in the world. “ HTTP 301 Moved Permanently” http://bb.watch.impress.co.jp/blog/archives/2007/10/post_39.html
  • 63. (6)
  • 67. Wiki-Style : SITEINFO Sharing Regexp, XPath database.
  • 71. (7)
  • 72. “ orto” JavaVM on JavaScript by Yu Kobayashi (Next Talk…)
  • 73. ↑ Implementation JavaVM on JavaScript ↓ Java byte code (J2ME)
  • 74.  
  • 75. It works on iPhone! < とおる。 >: But I can't control because iphone has no keyboard;(
  • 76. (8)
  • 77. CSS3 Selectors to XPath ( 高橋メソッド in XUL) by Piro (Next Talk…)
  • 79. (9)
  • 80. Fast JS XPath Engine for IE (and Safari2) by amachang (Next Talk…)
  • 83. Thank you! ご清聴ありがとうございました [ 宣伝 ] サイボウズ・ラボでは人材募集中です