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


Apr 12, 2023 19

HTML/CSS in GIF89aHTML/CSS in GIF89a


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! ご清聴ありがとうございました

[宣伝 ] サイボウズ・ラボでは人材募集中です

[宣伝 ] サイボウズ・ラボでは人材募集中です

Technology

Shibuyajs Digest