Your SlideShare is downloading. ×
0
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Shibuyajs Digest
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Shibuyajs Digest

105,744

Published 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/

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,744
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
59
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 <ul><li>Shibuya.pm organizer (2 nd ) </li></ul><ul><ul><li>miyagawa -> TAKESAKO </li></ul></ul>Shibuya Perl Mongers
  • 5. Shibuya.JS Tech Talks#1
  • 6. Shibuya.JS Tech Talks#2…
  • 7. Agenda
  • 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. 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 <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. It works!
  • 24. (2)
  • 25. Polyglot (i18n)
  • 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. 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>
  • 30. Translation data is Wiki-style
  • 31. Support for Regexp & Date format
  • 32. (3)
  • 33. AJAJA (Server Side JS)
  • 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>
  • 35.  
  • 36. Sample code
  • 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>
  • 38. [ ソース ]
  • 39. JSmarty (PHP Template on JS)
  • 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}
  • 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>
  • 42. PMconnect (JS + Perl CPAN)
  • 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();
  • 44. ≠ JSAN
  • 45. pmconnect – samples – oleexcel.js
  • 46. (4)
  • 47. Cycal (Ajax spreadsheet)
  • 48. What is Cycal? <ul><li>online Ajax spreadsheet </li></ul>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) <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
  • 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! ご清聴ありがとうございました [ 宣伝 ] サイボウズ・ラボでは人材募集中です

×