Kawanet Tech Blog

Incredible JavaScript+Canvas 3D demos from Japan!

Mr. Satoshi Ueyama hacked out the new era of JavaScript 3D tech by unveiling the real of Google Chrome's power. Satoshi is one of the great JavaScript hackers in Japan, and also known as gyuque listed on the article of 30 Japanese geeks you should follow on Twitter. (cached)

He has introduced the brand new JavaScript technique using Canvas for 3D on his post. Browsing with Google Chrome is strongly recommended for all demos below.

I'm sure this could be one giant leap for JavaScript user interface technologies.

Demo #1: 3D texture mapped with physical computing

This is his first demo which shows 3D textured by Canvas. You can click on the cloth to make it waved.

http://gyu.que.jp/jscloth/

Demo #2: Hatsune Miku 3D with OOP

The 3D Miku is OO-style implemented as an object which has swing() method. This means she swings green onion in her hand when swing() method is called. Click on her.

http://gyu.que.jp/jscloth/miku.html
She wears hundreds of polygons. The demo was created for Paul Bakaus, jQuery UI lib's lead, visiting Japan.

Demo #3: 3D iPod touch with environment mapping

You may find the all demos above have the same width as 480px. Yes, it is definitely same as the horizontal viewport size which iPhone and iPod touch have. Now you can see iPod touch displayed on your iPod touch by the demo #3!

It could be slightly slow on ITSELF, however, it's still cool. These demos show us that we rarely need Flash anymore on the mobile platform, right? ;)

http://gyu.que.jp/jscloth/touch.html
But the most important point of the demo is not its width. You need to see behind of it. He also implemented the reflection mapping feature on his lib.

http://gyu.que.jp/jscloth/touch.html
The all demos above are coded only by pure JavaScript using Canvas. Here are no Java, Flash, ActionScript etc. but just the Web standards.

You can see Google Chrome runs all demos much faster than any other browsers. It has a great rendering engine named Skia. CPUs are already enough fast to calculate most things, you know, and now JITs are implemented as well. But canvas renderers admit of their performance. Skia is special. Safari is also fine. Firefox, 3.0 and 3.1 JIT-ed, are seem to be slower, unfortunately. We don't have to say that IE have no capability to run these.

Gyuque runs several benchmarks to describe Skia has significant advantage on its canvas rendering engine.

http://d.hatena.ne.jp/gyuque/20090211#1234364019
The 3D JavaScript tech could be one of the killer applications of Chrome now. I guess the next generation of browsers will soon compete on Canvas performance.

Original of this post was written for my Japanese blog.
You must see more detail on gyuque's post.

The 2nd JUI Conference in Adobe MAX Japan 2009

Almost one year has been past since we held the 1st JUI conference in Tokyo. The JUI is a conference forcused into user interface techs using JavaScript. At he end of this January, we held the JUI again in Adobe MAX Japan 2009 conference as a sub conference. I think it's definitely true that Adobe is really big-hearted company. Five of JavaScript guys could talked only about JavaScript at the session which has the sub-title of "we don't need FLash any more!" in Japanese.

At first, I gave an introduction talk.

http://www.slideshare.net/kawa0117/jui-flash

JavaScript Hot Topics 2008 (Adobe MAX Edition)
#10 - 10th Anniversary of MM_SwapImage()
#9 - Shibuya.js comes to Kyoto
#8 - ECMAScript 4 failed. Now 3.1 instead.
#7 - Adobe launches Flash 10
#6 - iPhone 3G integrated with JavaScript
#5 - Many companies switching to JavaScript
#4 - Microsoft follows web standards by IE8
#3 - Varieties of JavaScript libraries
#2 - Playing .swf by JavaScript on the scene
#1 - Too Rapid JavaScript. No JIT, No Life.

The 2nd speaker was Yu Kobayashi a.k.a. yukoba who was the author of HotRuby virtual machine. His talk was about "How to implement a Flash Player."

http://www.slideshare.net/yukoba/flash-player

The next was Satoshi Ueyama a.k.a. gyuque. He also implemented another Flash Player named "JSplash" which had a trick to translate ActionScript code to JavaScript code. This pre-compiling feature gave it enough performance compared to Adobe's native Flash Player. That means we don't need flash player any more.

http://www.slideshare.net/gyuque/jsplash-adobe-max-2009

The 4th was Moriyoshi Koizumi who was one of Japanese PHP committers. He gave a talk about "JavaScript's Sound Generation" using data scheme.

http://www.slideshare.net/moriyoshi/adobe-max-japan-2009-jui-javascript

The last was Hotoshi Amano a.k.a. amachang. He always starts to develop new presentation tool before he writes slides for each conferences. Now he made it in 3D. Note that only nightly build of WebKits - at that time, now Safari 4 is available - could show his slides. His talk itself was about "DOM Performance Tuning."

http://amachang.sakura.ne.jp/misc/max/

Anyway, in the Adobe's conference, we're happy to let them know these crazy JavaScript guys're existing and working hard for the high level of techniques and user experience.

The 2nd JUI Speakers

The original post of this was written in Japanese.

YAPC::NA 2008 in Chicago

I have proudly attended YAPC::NA 2008 in Chicago and enjoyed that.
YAPC::NA is original yet another Perl conference since 1999.

You can see more my photos in Chicago on flickr.

YAPC::NA 2008 Pre-Conference Dinner

Ingy bring me to the restaurant by his motorcycle. ingy++

YAPC::NA 2008 (Day 1) Get it started

I attended every YAPC::Asias which were exciting and held three times in Tokyo. However, this is my first time to come to YAPC::NA.

YAPC::NA 2008 (Day 2) Just two seconds to generate .pm by WSST

I gave my first talk titled:
WSS - WebService Specification Schema and LL libraries
I still used JavaScript-powered S6 presentation tool with one-click translation feature for my slides.

YAPC::NA 2008 (Day 2) "Moose" by Stevan Little

Stevan Little gave a general talk about Moose:
Moose - A post modern object system for Perl 5
Moose is getting much popular also in Japan this year.

YAPC::NA 2008 (Day 2) "use the Moose;" by Ingy

Ingy döt Net gave an interesting talk about:
Perl and JavaScript
I like teh incredible the.pm module.

YAPC::NA 2008 (Day 3) Lightning Talks!

I gave another talk titled:
DOM manipulation by Gainer/Wiimote over HTTP.
Before starting presentation, I had a technical trouble with my real device gadgets, however I made it.
I'll give this talk again at YAPC::Europe 2008 in Copenhagen, Denmark.

YAPC::NA 2008 (Day 3) Improvised Lightning Talks

This is a brand-new style of lightning talk.
It's absolutely fantastic that Ingy's one thing which he'd never do in Perl.
He's true entertainer!

YAPC::NA 2008 is over

I appreciate the organizer Josh McAdams's hospitality. jmcada++

Differences between YAPC::NA and YAPC::Asia

I could find some of interesting differences between the conference and other conferences in Japan including YAPC::Asia.

* More foods and drinks
YAPC::Asia started to provide lunch and snacks this year.
Here are free drinks and delightful fruits provided in YAPC::NA.

* More interruptions
I think it's not common for Japanese audiences to interrupt speaker's talk to ask something. Dan-san could be probably only Japanese hacker who can do that? ;-)

* More chats in hall
Not only few people here prefer to stay at entrance to chat with another perl hackers rather than just listen presentations.

* More BOFs
I don't see such concurrent meetings which occur naturally in Japan.

* More women
Josh said that there were 17 women in second day's conference dinner.
It's definitely rare that we could have two-digit numbers of women attend such technical conference in Japan.

* Less technological previews, more productive solutions
Personally, I love talks about cutting-edge technologies, future glances, ingenious topics etc. We can see such "I-Made-It!"-styled talks in Japan.
Here, more speakers provide solutions for attendees' daily production.

* Few Japanese attendees
I was only Japanese attendee come from Japan.
I hope more Japanese hackers could come to give their techs out for global.

My reports written in Japanese

* YAPC::NA 2008 Pre-Conference Dinner
* YAPC::NA 2008 (Day 1) Get it started
* YAPC::NA 2008 (Day 2) Just two seconds to generate .pm by WSST
* YAPC::NA 2008 (Day 2) "Moose" by Stevan Little
* YAPC::NA 2008 (Day 2) "use the Moose;" by Ingy
* YAPC::NA 2008 (Day 3) Lightning Talks!
* YAPC::NA 2008 (Day 3) Improvised Lightning Talks
* YAPC::NA 2008 was over
* YAPC::NA 2008 summary report

"Mashup Application and Google API" @ GDD

Last Tuesday, I gave a talk titled "Mashup Application and Google API" for Google Developer Day 2008 in Japan.

[Topics]
* Google provides 60 APIs!
* Translatable presentation with Google AJAX Language API
* Organizing Mashup Award 4th with 100+ APIs in Japan
* Mashup of Google Maps API and Recruit Web Service UI Library
* Growth of Google Maps family (embeddable、static、flash)
* Google Char API (blank map!)
* AJAX Libraries API (cache for Prototype, jQuery, etc.)
* Brand New APIs (real device web services)

My slides using S6 again is below. (written in Japanese)
http://www.kawa.net/text/google/gdd2008/japan.html

The conference was completely for developers who love Google. I am not Google's employee, you know, but I have surprised that more than 100 attendees have nevertheless come to my room.

In addition to my talk above, I took the platform of keynote to demonstrate in favor for OpenSocial.
We provides a trial service which uses an OpenSocial's container of Shindig.

The JUI 2008 Tokyo was over

The JUI 2008 Tokyo conference was over with great success.
More than 100 attendees came to the venue!
We really enjoyed JavaScript tech talks in depth.

The JUI 2008 Tokyo
* Date: 18:30pm, Monday, March 19, 2008
* Venue: Recruit Ginza 8 Bldg., Tokyo, Japan

[Main Talks]
* Paul Bakaus (from Germany) - An in-depth look at jQuery UI
* amachang - S6
* inucara - inucara.net
* iandeth - Recruit WEB Service UI Library

[Lightning Talks]
* gugod (from Taiwan) - jFormino
* noriaki - jQuery on Greasemonkey
* Yoshiomi KURISU - Colors in jQuery
* monjudoh - Twitter client with jQuery

[Special Guests]
* Ingy (from Seattle/Taipei) - Jemplate
* mala - use DOM
* TAKESAKO - YAPC::Asia 2008 Tokyo

[Pictures]
gugod／iandeth／kawanet／taigo／takesako

We got special guests to give us additional lightning talks!
We also had an after-party with almost half of all attendees.

Amachang, Paul and other great JS hackers're talking about past talks in Shibuya.js user group.
I hope I could host such a great conference again.

YAPC::Asia 2008 Tokyo - DOM manipulation by Wiimote/Gainer over HTTP

I love YAPC::Asia which is really exciting Perl conference.
At YAPC::Asia 2008 Tokyo of this week, I got first chance to give a talk in the conference.

My talk was titled DOM manipulation by Wiimote/Gainer over HTTP.
Some slides are updated from OSDC.TW 2008's one.
I'll give this talk again for YAPC::NA 2008 in Chicago next month.

The room was almost full and had some standees at last!
Thank you for coming to listen my talk.

The venue of the conference was Tokyo Institute of Technology at Ookayama, Tokyo.
It had many trees in the campus and was really nice venue.
The number of attendees was counted as more than 500 people.
The committee announced that the conference cost about three million yen (about USD 30,000) in total.
I'd love to say thank you for organizers and volunteers.

As an aside, RECRUIT Co., Ltd. was one of the gold sponsors of the conference. It was honor of us. The Media Technology Labs have a plan to back up such open source related conference and projects.

* Translated version of the original post of this is here.

Announcement: The JUI 2008 Tokyo

Today I'm proudly announcing the first JUI conference. JavaScript techs enhancing user interface on the web is getting more important not only for developers/engineers but also for general users. The JUI is the conference forcused on JavaScript User Interface techs.

Paul Bakaus, the jQuery UI Lead, will come from Germany. The leading Japanese JavaScript hackers will counter (welcome) him. Register now!

The JUI 2008 Tokyo

* Date: Monday, May 19, 2008
* Time: 6:30pm - 9:00pm
* Venue: 8-4-17 Ginza, Chuo-ku, Tokyo, JAPAN [map] [map]
* Host: The JUI Committee
* Sponsor: RECRUIT Media Technology Labs
* Contact: jui-committee [at] googlegroups.com
* Facebook: http://www.facebook.com/event.php?eid=11240373854

[ MAIN SPEAKERS ]
* Paul Bakaus (from Germany) - http://ui.jquery.com/
* amachang - http://d.hatena.ne.jp/amachang/
* inucara - http://inucara.net/
* iandeth - http://iandeth.dyndns.org/mt/ian/

[ LIGHTNING TALKS ] ^updated
* monjudoh - http://d.hatena.ne.jp/monjudoh/
* noriaki - http://blog.fulltext-search.biz/
* Yoshiomi KURISU - http://dev.chrisryu.com/
* gugod (from Taiwan) - http://blog.gugod.org/

[ REGISTRATION ] (free of charge)
http://mtl.recruit.co.jp/jui/form/
English translated version of the form is also tested and available.

[ CONTACT ]
* jui-committee [at] googlegroups.com

* Translated version of the original post of this is here.

2008.05.19 LT speakers updated

Translatable presentation with the S6 JavaScript library

For my talk at OSDC.TW 2008 in Taiwan, I have added a couple of features to the S6. The S6 is a great presentation tool developed by amachang, based on HTML/Web standards and implemented in pure JavaScript. (demo)

Writing a slide with the lib is entirely easy:

<div class="s6_fadeScale">
    <h3>page title here</h3>
    <p>page body here</p>
</div>

class="s6_fadeScale" means the fading/scaling effect on paging.

And the most noteworthy feature of this special version of the S6 is automatic translation feature which is powered by Google AJAX Language API.

Just clicking a text node on the slide, it's translated into Japanese or another language in a moment. This is efficient for I18N, M17N and native language support. (demo)

13 languages, Japanese, Korean, Traditional Chinese, Simplified Chinese, Arabic, Russian, Greek, German, Italian, Dutch, French, Spanish and Portuguese, are supported to be translated into. The number of languages is depend on it of the Google Translate. Reverse translation, ex. translating from Japanese to English, is also supported for granted.

This means, with the lib, your presentation would get more familiar for the people who could not read the language of it.
I'll welcome you giving cool talks in Japan with the lib. We Japanese don't need to be afraid of slides written in English anymore! :-)

Download it now and enjoy!

* The original post of this was written in Japanese and was translatable.

OSDC.TW 2008 - DOM manipulation by Wiimote/Gainer over HTTP

12th April, I gave a new talk titled "DOM manipulation by Wiimote/Gainer over HTTP" for the OSDC.TW 2008 at Taipei.

I think manipulating DOM is a bother. That is why I have developed the JKL.ParseXML and XML.ObjTree libraries for my use. And I was involved in kinds of real device web service techs in these days. The presentation could be an answer from me about DOM manipulation. ;-)

The same titled talk will be soon made again in both of the YAPC::Asia 2008 Tokyo and the YAPC::NA 2008 at Chicago.

Special thanks:
* Hiroshi Nemoto - Wiimote HTTPd's co-author
* Hitoshi Amano (a.k.a. amachang) - S6 presentation tool's author
* Shuhei Terai (a.k.a. trick7) - Gainer's maestro

Anyway, this was my first time to get to Taiwan. I must say that the Formosa was the great island of good foods and kind full people.

After the conference, I moved to gugod's office in the Jhubei City which is next to Hsinchu. I love 小籠包 (Xiaolongbao) above, however, 潤餅 (Taiwanese crepe) at a street stand was really tasty.

I'd love to back to Taiwan again next year. More photos...

[Event] OpenSocial - Google JAPAN's developer roundtable #5

At 14th March, I have participated in the Google JAPAN's developer roundtable as a panel member.

The the great venue was the Aoyama Diamond Hall, Omote-Sando.

The official report from Google is out:
Google JAPAN's developer roundtable #5 - OpenSocial

I introduced the Dokoiku's experimental OpenSocial container implemented with Shindig.