Shibuyajs Digest
Upcoming SlideShare
Loading in...5
×
 

Shibuyajs Digest

on

  • 84,518 views

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/

Statistics

Views

Total Views
84,518
Views on SlideShare
84,041
Embed Views
477

Actions

Likes
0
Downloads
58
Comments
1

10 Embeds 477

http://labs.cybozu.co.jp 398
http://developer.cybozu.co.jp 51
http://www.whitecatz.com 11
http://whitecatz.com 8
http://www.slideshare.net 2
http://www.techgig.com 2
http://shibuyahacks.tumblr.com 2
http://64.233.179.104 1
http://news.cybozu.net 1
http://feedpath.jp 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Larz: thank you.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Shibuyajs Digest Shibuyajs Digest Presentation Transcript

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