Shibuyajs Digest

  • 102,642 views
Uploaded on

The Future of JavaScript -presented by Mozilla & Shibuya.JS- …

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Larz: thank you.
    Are you sure you want to
    Your message goes here
    Be the first to like this
No Downloads

Views

Total Views
102,642
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
58
Comments
1
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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
  • 5. Shibuya.JS Tech Talks#1
  • 6. Shibuya.JS Tech Talks#2…
  • 7. Agenda
  • 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>
  • 9. Introduction
  • 10. Abnormal JavaScript
  • 11. (1)
  • 12. (1) Abnormal JS crazy hacks
  • 13. Polyglot
  • 14. HTML/CSS & JS & Perl in GIF89a (valid) Web Polyglot
  • 15. Web Polyglot DEMO HTML/CSS & JS & Perl in GIF89a (valid)
  • 16. View source
  • 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$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. It works!
  • 24. (2)
  • 25. Polyglot (i18n)
  • 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...
  • 27. Mylingual.net (Japanize)
  • 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)
  • 33. AJAJA (Server Side JS)
  • 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.  
  • 36. Sample code
  • 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>
  • 38. [ ソース ]
  • 39. JSmarty (PHP Template on JS)
  • 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();
  • 44. ≠ JSAN
  • 45. pmconnect – samples – oleexcel.js
  • 46. (4)
  • 47. Cycal (Ajax spreadsheet)
  • 48. What is Cycal?
    • online Ajax spreadsheet
    http://spreadsheet.sakura.ne.jp/ (by Abui Daisuke)
  • 49. vs. Google
  • 50. Cycal vs. Google spreadsheet cf. http://spreadsheet.sakura.ne.jp/paper/master's_paper.pdf (paper in Japanese)
  • 51. vs. Excel
  • 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)
  • 56. Fastladder (livedoor Reader)
  • 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
  • 62. mala++
  • 63. (6)
  • 64. AutoPagerize (swdyh)
  • 65. http://userscripts.org/scripts/show/8551
  • 66. AutoPagerize -> http://d.hatena.ne.jp/toshi123/20070601#p1
  • 67. Wiki-Style : SITEINFO Sharing Regexp, XPath database.
  • 68. http://labs.gmo.jp/blog/ku/2007/07/autopagerizexpath_autopagerize_ide.html AutoPagerize IDE – Visual XPath
  • 69. XPath++ DOM++
  • 70. Lightning Talks
  • 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…)
  • 78. Piro++
  • 79. (9)
  • 80. Fast JS XPath Engine for IE (and Safari2) by amachang (Next Talk…)
  • 81. http://usrb.in/amachang/static/amacan/
  • 82. We love JavaScript!
  • 83. Thank you! ご清聴ありがとうございました [ 宣伝 ] サイボウズ・ラボでは人材募集中です