Download - Shibuyajs Digest
Shibuya.JS DigestShibuya.JS Digest
Yoshinori TAKESAKO
http://namazu.org/~takesako/
日本の JavaScript最新動向
Apr 12, 2023 2
the only JavaScript user groupin (Japan) the world.
Welcometo
Shibuya.JS
Welcometo
Shibuya.JS
Apr 12, 2023 3id:secondlife x id:nagayama
The founder of Shibuya.JS
He is not here.(RubyConf2007)
Apr 12, 2023 4
I’m not JavaScript hackerI’m not JavaScript hacker
Shibuya.pm organizer (2nd)miyagawa -> TAKESAKO
Shibuya Perl Mongers
Apr 12, 2023 5
Shibuya.JS Tech Talks#1
Apr 12, 2023 6
Shibuya.JS Tech Talks#2…
Apr 12, 2023 7
Agenda
Apr 12, 2023 8
Shibuya.JS Digest : 日本の JavaScript 最新動向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) "orto" JavaVM on JavaScript <Yu Kobayashi> (8) CSS3 Selectors to XPath <Piro> (9) Fast JS XPath Engine for IE <amachang>
Apr 12, 2023 9
Introduction
Apr 12, 2023 10
AbnormalJavaScript
Apr 12, 2023 11
(1)(1)
Apr 12, 2023 12
(1) Abnormal JS(1) Abnormal JS
crazy hackscrazy hacks
Apr 12, 2023 13
PolyglotPolyglot
Apr 12, 2023 14
HTML/CSS & JS & Perlin GIF89a (valid)
HTML/CSS & JS & Perlin GIF89a (valid)
Web PolyglotWeb Polyglot
Apr 12, 2023 15
Web Polyglot DEMO
HTML/CSS & JS & Perl in GIF89a (valid)
Apr 12, 2023 16
View source
Apr 12, 2023 17
Perl in GIF89aPerl in GIF89a
GIF89a(q=/*.....Ä=);sub GIF89a{print "Hello Perl!"}__END__#*/1);function GIF89a(){alert("Hello JavaScrpt!")}/*<body style=visibility:hidden><div style=position:relative;visibility:visible><h1>Hello HTML!</h1><!--................................................................................................................................................................................................--><img src=?><script src=# language=JavaScript></script></div> */// ;
Apr 12, 2023 18
JavaScript in GIF89aJavaScript in GIF89a
GIF89a(q=/*.....Ä=);sub GIF89a{print "Hello Perl!"}__END__#*/1);function GIF89a(){alert("Hello JavaScrpt!")}/*<body style=visibility:hidden><div style=position:relative;visibility:visible><h1>Hello HTML!</h1><!--................................................................................................................................................................................................--><img src=?><script src=# language=JavaScript></script></div> */// ;
Apr 12, 2023 19
HTML/CSS in GIF89aHTML/CSS in GIF89a
GIF89a(q=/*.....Ä=);sub GIF89a{print "Hello Perl!"}__END__#*/1);function GIF89a(){alert("Hello JavaScrpt!")}/*<body style=visibility:hidden><div style=position:relative;visibility:visible><h1>Hello HTML!</h1><!--................................................................................................................................................................................................--><img src=?><script src=# language=JavaScript></script></div> */// ;
Apr 12, 2023 20
How to break same-origin-policy.(Parallelize cross-domain access)
Other GIF89a hacks
GIF89a Binary Image Objectfor AJAX communications Protocol
Apr 12, 2023 21
GIF89a cross-domain access protocolGIF89a cross-domain access protocol
<img src=“null.gif?q=param" onload=“callback(this.width)">
function callback(data) { //… do action}
(1) Define JS callback function (likes JSONP)
(2) New Image Object
CGI OKhttp://example.com/webapi/null.gif?q=foobar
GIF Image size!
Apr 12, 2023 22
GIF can return 16bit x 2 over crossdomainGIF can return 16bit x 2 over crossdomain
Server Side program (sample)
#!/usr/bin/perluse strict;use warnings;
sub create_gif { my $size = pack "S2", @_; return "GIF89a$size\xf0\x00\x00\x00\x00\x00\xff\xff\xff," . "\x00\x00\x00\x00\x01\x00\x01\x00\x00\x02\x02L\x01\x00;";}
print "Content-Length: 35\n";print "Content-Type: image/gif\n\n";binmode(*STDOUT);print create_gif(65535, 65535);
1;
Apr 12, 2023 23
It works!
Apr 12, 2023 24
(2)(2)
Apr 12, 2023 25
PolyglotPolyglot(i18n)(i18n)
Apr 12, 2023 26
Japanese traditional life’s work on softwareJapanese traditional life’s work on software
L10N (Localization) I18N (Internationalization)M17N (Multilingualization)
Japanese traditional programmer make it one's life to L10N, I18N...
Apr 12, 2023 27
Mylingual.netMylingual.net
(Japanize)(Japanize)
Apr 12, 2023 28
Apr 12, 2023 29
What is Mylingual.net?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
Apr 12, 2023 30
Translation data is Wiki-style
Apr 12, 2023 31
Support for Regexp & Date format
Apr 12, 2023 32
(3)(3)
Apr 12, 2023 33
AJAJAAJAJA
(Server Side JS)(Server Side JS)
Apr 12, 2023 34
What is AJAJA?What is AJAJA?
Implementaion of JavaScript/ASPcf. Legacy: MS IIS JScript/ASP
JS EngineSpiderMonkey + a patch
CGI mode#!/usr/bin/asp_js
Support for SQLite3 (default)use('SQLite');db = new SQLite('sample.db');
Apr 12, 2023 35
Apr 12, 2023 36
Sample code
Apr 12, 2023 37
Sample code of AJAJASample code of AJAJA
hello.asp
<%@ Language=JavaScript %><% var hello = "Hello world";%><html><head> <title><%= hello %></title></head><body> <h1><%= hello %></h1></body></html>
Apr 12, 2023 38
[ソース ]
Apr 12, 2023 39
JSmartyJSmarty(PHP Template on JS)(PHP Template on JS)
Apr 12, 2023 40
bbs.tpl (JSmarty – Smarty compatible)bbs.tpl (JSmarty – Smarty compatible)
View source template file{foreach from=$rows item='row'}<dl><dt>[{$row[0]}] <strong style='color:green;'>{$row[1]}</strong> 投稿者: {$row[2]}投稿日: {$row[3]}</dt><dd><p>{$row[4]}</p></dd></dl><hr>{/foreach}
Apr 12, 2023 41
What is JSmarty?What is JSmarty?
Smarty is…One of the famous PHP Template Engine
JSmarty is…Smarty on JavaScriptSmarty clone
Emulate PHP strings function on JScan use old Smarty template filealmost compatiblehas a little incompatibleplug-in
Using JSAN.js to load
Apr 12, 2023 42
PMconnectPMconnect(JS + Perl CPAN)(JS + Perl CPAN)
Apr 12, 2023 43
pmconnect (Akira Higuchi)pmconnect (Akira Higuchi)
SpiderMonkey (JS) <-> Perl binding library/* GD */Perl.Use("GD");var im = new Perl("GD::Image",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("FileHandle");var fh = new Perl("FileHandle", "gdout.png", "w");fh.print(s);fh.close();
Apr 12, 2023 44
≠ JSAN
Apr 12, 2023 45
pmconnect – samples – oleexcel.js
Apr 12, 2023 46
(4)(4)
Apr 12, 2023 47
CycalCycal(Ajax spreadsheet)(Ajax spreadsheet)
Apr 12, 2023 48
What is Cycal?What is Cycal?
online Ajax spreadsheet
http://spreadsheet.sakura.ne.jp/ (by Abui Daisuke)
Apr 12, 2023 49
vs. Google
Apr 12, 2023 50cf. http://spreadsheet.sakura.ne.jp/paper/master's_paper.pdf (paper in Japanese)cf. http://spreadsheet.sakura.ne.jp/paper/master's_paper.pdf (paper in Japanese)
Cycal vs. Google spreadsheetCycal vs. Google spreadsheet
Apr 12, 2023 51
vs. Excel
Apr 12, 2023 52
Cycal vs. Excel 2007Cycal vs. Excel 2007
Cycal won!
Apr 12, 2023 53
You don’t need Excel 2007any more.
You don’t need Excel 2007any more.
B.C. - Before CycalA.D. - Abui Daisuke
Apr 12, 2023 54
other JapaneseJS products
Apr 12, 2023 55
(5)(5)
Apr 12, 2023 56
FastladderFastladder(livedoor Reader)(livedoor Reader)
Apr 12, 2023 57
Apr 12, 2023 58
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
Apr 12, 2023 59
Fastladder (livedoor Reader)is known as
“fastest” RSS/Atom feed Reader
in the world.
Apr 12, 2023 60
a.k.a
Apr 12, 2023 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
Apr 12, 2023 62mala++
Apr 12, 2023 63
(6)(6)
Apr 12, 2023 64
AutoPagerizeAutoPagerize(swdyh)(swdyh)
Apr 12, 2023 65http://userscripts.org/scripts/show/8551
Apr 12, 2023 66
AutoPagerize →
http://d.hatena.ne.jp/toshi123/20070601#p1
Apr 12, 2023 67
Wiki-Style : SITEINFO
Sharing Regexp, XPath database.
Apr 12, 2023 68http://labs.gmo.jp/blog/ku/2007/07/autopagerizexpath_autopagerize_ide.html
AutoPagerize IDE – Visual XPath
Apr 12, 2023 69
XPath++DOM++
Apr 12, 2023 70
Lightning Talks
Apr 12, 2023 71
(7)(7)
Apr 12, 2023 72
“orto”JavaVM on JavaScript
“orto”JavaVM on JavaScript
by Yu Kobayashi
(Next Talk…)
by Yu Kobayashi
(Next Talk…)
Apr 12, 2023 73
↑Implementation JavaVM on JavaScript
↓Java byte code (J2ME)
Apr 12, 2023 74
Apr 12, 2023 75
It works on iPhone!
< とおる。 >: But I can't control because iphone has no keyboard;(
Apr 12, 2023 76
(8)(8)
Apr 12, 2023 77
CSS3 Selectors to XPath( 高橋メソッド in XUL)
CSS3 Selectors to XPath( 高橋メソッド in XUL)
by Piro(Next Talk…)
by Piro(Next Talk…)
Apr 12, 2023 78
Piro++
Apr 12, 2023 79
(9)(9)
Apr 12, 2023 80
Fast JS XPath Engine for IE (and Safari2)
Fast JS XPath Engine for IE (and Safari2)
by amachang(Next Talk…)
by amachang(Next Talk…)
Apr 12, 2023 81
http://usrb.in/amachang/static/amacan/
Apr 12, 2023 82
We loveJavaScript!
Apr 12, 2023 83
Thank you! ご清聴ありがとうございましたThank you! ご清聴ありがとうございました
[宣伝 ] サイボウズ・ラボでは人材募集中です
[宣伝 ] サイボウズ・ラボでは人材募集中です