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 <ul><li>Shibuya.pm organizer (2 nd ) </li></ul><ul><ul><li>miyagawa -> TAKESAKO </li></ul></ul>S...
Shibuya.JS Tech Talks#1
Shibuya.JS Tech Talks#2…
Agenda
Shibuya.JS Digest :  日本の JavaScript 最新動向 <ul><li>Introduction x 1 <TAKESAKO> </li></ul><ul><ul><li>(1) Web Polyglot (HTML/...
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...
JavaScript in GIF89a GIF89a( q= /*.....Ä=);sub GIF89a{print &quot;Hello Perl!&quot;} __END__#*/ 1 );function GIF89a(){aler...
HTML/CSS in GIF89a GIF89a(q=/*.....Ä=);sub GIF89a{print &quot;Hello Perl!&quot;} __END__#*/1);function GIF89a(){alert(&quo...
How to break same-origin-policy. (Parallelize cross-domain access) Other GIF89a hacks GIF89a Binary Image Object for AJAX ...
GIF89a cross-domain access protocol <img src=“null.gif?q=param&quot; onload=“ callback (this.width)&quot;> function  callb...
GIF can return 16bit x 2 over crossdomain <ul><li>Server Side program (sample) </li></ul>#!/usr/bin/perl use strict; use w...
It works!
(2)
Polyglot (i18n)
Japanese traditional life’s work on software <ul><li>L10N (Localization) </li></ul><ul><li>I18N (Internationalization) </l...
Mylingual.net (Japanize)
 
What is Mylingual.net? <ul><li>Mylingual.net </li></ul><ul><ul><li>Transparent i18n to any language (Web UI only) </li></u...
Translation data is Wiki-style
Support for Regexp & Date format
(3)
AJAJA (Server Side JS)
What is AJAJA? <ul><li>Implementaion of JavaScript/ASP </li></ul><ul><ul><li>cf. Legacy: MS IIS JScript/ASP </li></ul></ul...
 
Sample code
Sample code of AJAJA <ul><li>hello.asp </li></ul><%@ Language=JavaScript %> <% var hello = &quot;Hello world&quot;; %> <ht...
[ ソース ]
JSmarty (PHP Template on JS)
bbs.tpl (JSmarty – Smarty compatible) <ul><li>View source template file </li></ul>{foreach from=$rows item='row'} <dl> <dt...
What is JSmarty? <ul><li>Smarty is… </li></ul><ul><ul><li>One of the famous PHP Template Engine </li></ul></ul><ul><li>JSm...
PMconnect (JS + Perl CPAN)
pmconnect   (Akira Higuchi) <ul><li>SpiderMonkey (JS) <-> Perl binding library </li></ul>/* GD */ Perl.Use(&quot;GD&quot;)...
≠  JSAN
pmconnect – samples – oleexcel.js
(4)
Cycal (Ajax spreadsheet)
What is Cycal? <ul><li>online Ajax spreadsheet  </li></ul>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) <ul><li>Fastladder is yet another web-based feed-reader which was launched on Jul 3 2007. </l...
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/...
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!  ご清聴ありがとうございました [ 宣伝 ]  サイボウズ・ラボでは人材募集中です
Upcoming SlideShare
Loading in...5
×

Shibuyajs Digest

105,796

Published on

The Future of JavaScript -presented by Mozilla & Shibuya.JS-
http://www.mozilla-japan.org/events/2007/javascript/

Published in: Technology
1 Comment
0 Likes
Statistics
Notes
  • Larz: thank you.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total Views
105,796
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
59
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Shibuyajs Digest

  1. 1. Shibuya.JS Digest Yoshinori TAKESAKO http:// namazu.org/~takesako / 日本の JavaScript 最新動向
  2. 2. the only JavaScript user group in (Japan) the world. Welcome to Shibuya.JS
  3. 3. id:secondlife x id:nagayama The founder of Shibuya.JS He is not here. (RubyConf2007)
  4. 4. I’m not JavaScript hacker <ul><li>Shibuya.pm organizer (2 nd ) </li></ul><ul><ul><li>miyagawa -> TAKESAKO </li></ul></ul>Shibuya Perl Mongers
  5. 5. Shibuya.JS Tech Talks#1
  6. 6. Shibuya.JS Tech Talks#2…
  7. 7. Agenda
  8. 8. Shibuya.JS Digest : 日本の JavaScript 最新動向 <ul><li>Introduction x 1 <TAKESAKO> </li></ul><ul><ul><li>(1) Web Polyglot (HTML/CSS & JS & Perl GIF89a) </li></ul></ul><ul><ul><li>(2) Mylingual.net (Japanize) UserJavaScript for i18n </li></ul></ul><ul><ul><li>(3) AJAJA (Server Side JS) replacement from PHP, Perl </li></ul></ul><ul><ul><li>(4) Cycal (Ajax spreadsheet) </li></ul></ul><ul><ul><li>(5) Fastladder (livedoor Reader) </li></ul></ul><ul><ul><li>(6) AutoPagerize (swdyh) </li></ul></ul><ul><li>Lightning Talks x 3 </li></ul><ul><ul><li>(7) &quot;orto&quot; JavaVM on JavaScript <Yu Kobayashi> </li></ul></ul><ul><ul><li>(8) CSS3 Selectors to XPath <Piro> </li></ul></ul><ul><ul><li>(9) Fast JS XPath Engine for IE <amachang> </li></ul></ul>
  9. 9. Introduction
  10. 10. Abnormal JavaScript
  11. 11. (1)
  12. 12. (1) Abnormal JS crazy hacks
  13. 13. Polyglot
  14. 14. HTML/CSS & JS & Perl in GIF89a (valid) Web Polyglot
  15. 15. Web Polyglot DEMO HTML/CSS & JS & Perl in GIF89a (valid)
  16. 16. View source
  17. 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. 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. 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. 20. How to break same-origin-policy. (Parallelize cross-domain access) Other GIF89a hacks GIF89a Binary Image Object for AJAX communications Protocol
  21. 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. 22. GIF can return 16bit x 2 over crossdomain <ul><li>Server Side program (sample) </li></ul>#!/usr/bin/perl use strict; use warnings; sub create_gif { my $size = pack &quot;S2&quot;, @_; return &quot;GIF89a$sizexf0x00x00x00x00x00xffxffxff,&quot; . &quot;x00x00x00x00x01x00x01x00x00x02x02Lx01x00;&quot;; } print &quot;Content-Length: 35 &quot;; print &quot;Content-Type: image/gif &quot;; binmode(*STDOUT); print create_gif(65535, 65535); 1;
  23. 23. It works!
  24. 24. (2)
  25. 25. Polyglot (i18n)
  26. 26. Japanese traditional life’s work on software <ul><li>L10N (Localization) </li></ul><ul><li>I18N (Internationalization) </li></ul><ul><li>M17N (Multilingualization) </li></ul>Japanese traditional programmer make it one's life to L10N, I18N...
  27. 27. Mylingual.net (Japanize)
  28. 29. What is Mylingual.net? <ul><li>Mylingual.net </li></ul><ul><ul><li>Transparent i18n to any language (Web UI only) </li></ul></ul><ul><li>UserJavaScript (keeping HTML DOM structure) </li></ul><ul><ul><li>Opera 9 </li></ul></ul><ul><ul><li>Mozilla Firefox & Greasemonkey </li></ul></ul><ul><ul><li>Safari 2 & Creammonkey </li></ul></ul><ul><ul><li>Internet Explorer 6 & Turnabout Advanced / Trixie </li></ul></ul><ul><ul><li>Internet Explorer 7 & IE7pro </li></ul></ul><ul><li>(Inspired from) Japanize </li></ul><ul><ul><li>Transparent l10n to Japanese </li></ul></ul><ul><ul><li>A web browser extension, it works good </li></ul></ul>
  29. 30. Translation data is Wiki-style
  30. 31. Support for Regexp & Date format
  31. 32. (3)
  32. 33. AJAJA (Server Side JS)
  33. 34. What is AJAJA? <ul><li>Implementaion of JavaScript/ASP </li></ul><ul><ul><li>cf. Legacy: MS IIS JScript/ASP </li></ul></ul><ul><li>JS Engine </li></ul><ul><ul><li>SpiderMonkey + a patch </li></ul></ul><ul><li>CGI mode </li></ul><ul><ul><li>#!/usr/bin/asp_js </li></ul></ul><ul><li>Support for SQLite3 (default) </li></ul><ul><ul><li>use('SQLite'); </li></ul></ul><ul><ul><li>db = new SQLite('sample.db'); </li></ul></ul>
  34. 36. Sample code
  35. 37. Sample code of AJAJA <ul><li>hello.asp </li></ul><%@ Language=JavaScript %> <% var hello = &quot;Hello world&quot;; %> <html> <head> <title> <%= hello %> </title> </head> <body> <h1> <%= hello %> </h1> </body> </html>
  36. 38. [ ソース ]
  37. 39. JSmarty (PHP Template on JS)
  38. 40. bbs.tpl (JSmarty – Smarty compatible) <ul><li>View source template file </li></ul>{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}
  39. 41. What is JSmarty? <ul><li>Smarty is… </li></ul><ul><ul><li>One of the famous PHP Template Engine </li></ul></ul><ul><li>JSmarty is… </li></ul><ul><ul><li>Smarty on JavaScript </li></ul></ul><ul><ul><li>Smarty clone </li></ul></ul><ul><ul><ul><li>Emulate PHP strings function on JS </li></ul></ul></ul><ul><ul><ul><li>can use old Smarty template file </li></ul></ul></ul><ul><ul><ul><li>almost compatible </li></ul></ul></ul><ul><ul><ul><li>has a little incompatible </li></ul></ul></ul><ul><ul><ul><li>plug-in </li></ul></ul></ul><ul><ul><ul><ul><li>Using JSAN.js to load </li></ul></ul></ul></ul>
  40. 42. PMconnect (JS + Perl CPAN)
  41. 43. pmconnect   (Akira Higuchi) <ul><li>SpiderMonkey (JS) <-> Perl binding library </li></ul>/* 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();
  42. 44. ≠ JSAN
  43. 45. pmconnect – samples – oleexcel.js
  44. 46. (4)
  45. 47. Cycal (Ajax spreadsheet)
  46. 48. What is Cycal? <ul><li>online Ajax spreadsheet </li></ul>http://spreadsheet.sakura.ne.jp/ (by Abui Daisuke)
  47. 49. vs. Google
  48. 50. Cycal vs. Google spreadsheet cf. http://spreadsheet.sakura.ne.jp/paper/master's_paper.pdf (paper in Japanese)
  49. 51. vs. Excel
  50. 52. Cycal vs. Excel 2007  Cycal won!
  51. 53. You don’t need Excel 2007 any more. B.C. - Before Cycal A.D. - Abui Daisuke
  52. 54. other Japanese JS products
  53. 55. (5)
  54. 56. Fastladder (livedoor Reader)
  55. 58. Fastladder (livedoor Reader) <ul><li>Fastladder is yet another web-based feed-reader which was launched on Jul 3 2007. </li></ul><ul><li>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. </li></ul><ul><li>It works very quickly. </li></ul>http://d.hatena.ne.jp/antipop/20070831/1188557354 antipop - Introducing another Feed Reader: Fastladder
  56. 59. Fastladder (livedoor Reader) is known as “ fastest” RSS/Atom feed Reader in the world.
  57. 60. a.k.a
  58. 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
  59. 62. mala++
  60. 63. (6)
  61. 64. AutoPagerize (swdyh)
  62. 65. http://userscripts.org/scripts/show/8551
  63. 66. AutoPagerize -> http://d.hatena.ne.jp/toshi123/20070601#p1
  64. 67. Wiki-Style : SITEINFO Sharing Regexp, XPath database.
  65. 68. http://labs.gmo.jp/blog/ku/2007/07/autopagerizexpath_autopagerize_ide.html AutoPagerize IDE – Visual XPath
  66. 69. XPath++ DOM++
  67. 70. Lightning Talks
  68. 71. (7)
  69. 72. “ orto” JavaVM on JavaScript by Yu Kobayashi (Next Talk…)
  70. 73. ↑ Implementation JavaVM on JavaScript ↓ Java byte code (J2ME)
  71. 75. It works on iPhone! < とおる。 >: But I can't control because iphone has no keyboard;(
  72. 76. (8)
  73. 77. CSS3 Selectors to XPath ( 高橋メソッド in XUL) by Piro (Next Talk…)
  74. 78. Piro++
  75. 79. (9)
  76. 80. Fast JS XPath Engine for IE (and Safari2) by amachang (Next Talk…)
  77. 81. http://usrb.in/amachang/static/amacan/
  78. 82. We love JavaScript!
  79. 83. Thank you! ご清聴ありがとうございました [ 宣伝 ] サイボウズ・ラボでは人材募集中です
  1. A particular slide catching your eye?

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

×