Shibuyajs Digest
Upcoming SlideShare
Loading in...5
×
 

Shibuyajs Digest

on

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