Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Shibuyajs Digest

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

  • Login to see the comments

  • Be the first to like this

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! ご清聴ありがとうございました [ 宣伝 ] サイボウズ・ラボでは人材募集中です

×