jsdo.itで遊ぼう！

既にご存知の方も多いと思いますが、1週間ほど前にKAYACさんの新サービスjsdo.itがリリースされています。
jsdo.itはHTML, CSS, JavaScriptを編集してその場で実行、共有するプログラマ向けコミュニティサイトです。wonderflをご存知の方はそのJavaScript版の一言で十分でしょう。
単にコードを書いて公開するだけでなく、その場で実行したり、favorite に登録したり、forkしたり、コメントを書いたりと、ソーシャルな要素が強いところがポイントです。
とりわけforkが特徴で、公開されているコードをベースにして改良を加えてみたり、パラメータを変えてどうなるのか実験してみたり、といったことが簡単にできます。また、わからないところがあればquestionタグを付けてどこがわからないのか書いておけば、誰かが回答付きでforkしてくれるかもしれません。questionタグをつけていなくても、上手い方法を知っている人がforkで改良版を公開するかもしれません。それを自分なりに改良して、さらにアイディアが出てきて…と、forkの連鎖で驚くほどの進化をするといったことが起こったりもします。OpenIDに対応しているので、気軽に初めて見ることができるので、是非jsdo.itで遊びましょう！

と、折角なので自前のコードを紹介。

• JSパーティクル崩し - jsdo.it - Share JavaScript, HTML5 and CSS
  • 最初に公開したのは少し前に書いたJSパーティクル崩し。オリジナルはid:coppieeeさん作で、KAYACのagoさんがcanvasをバイト単位で修正する方法（ImageDataの使い方） | tech.kayac.com - KAYAC engineers' blogでJavaScriptにポートしたコードを改良を加えて頑張って最適化した結果、Flash版に遜色ないレベルになりました。で、agoさんとお会いしたときにwonderflみたいにちょっと編集して公開したいですねと仰っていて、まさにそれを実現するjsdo.itが公開されました。というわけで、jsdo.itが生まれたきっかけ？とも言えるJSパーティクル崩しだったりします。折角なのでGoogle Gadget経由で貼り付け。
• Dot3D demo - jsdo.it - Share JavaScript, HTML5 and CSS
• Dot3D text - jsdo.it - Share JavaScript, HTML5 and CSS
• channel3JS demo - jsdo.it - Share JavaScript, HTML5 and CSS
  • この辺は3D系です。これらも少し前に書いたコードで、折角なのでjsdo.itでも公開してみました。
• forked from: Particle 10000 - jsdo.it - Share JavaScript, HTML5 and CSS
  • こちらはclockmakerさんのParticle 3000 - jsdo.it - Share JavaScript, HTML5 and CSSをforkして何パターンか作ってみたコードで割と気に入っているバージョンです。このシリーズにはid:uupaaさんも参戦しています。
• Blue Particles (Pure JavaScript) - jsdo.it - Share JavaScript, HTML5 and CSS
  • bkzenさんが公開していたBlue Particles forked from: 30,000 Particles - jsdo.it - Share JavaScript, HTML5 and CSSはperlin noiseをFlashを使って作るという方法を使っていたのですが、それをJavaScriptで実装してみました。perlin noiseの実装はPerlin Noiseに載っていたので簡単だったんですが、すごく重いしFlash版と全然違うので悩みましたが、小さく作って拡大すると似たような感じになるのに気がついてなんとかなりました。
• Canvas Snow:: forked from: Particle Text - jsdo.it - Share JavaScript, HTML5 and CSS
  • 小さく作って拡大するというアイディアを引き継いでできたのがこのCanvas Snowです。ちょうどclockmakerさんがParticle Text - jsdo.it - Share JavaScript, HTML5 and CSSを公開していて、これのオリジナルであるSnowも1pxを4倍に拡大することでキラキラを表現していたのを思い出して試してみたところ見事にハマりました。Snowは以前にもチャレンジしていたのですが、jsdo.itのおかげで見違えるほど進歩しました。
• HTML slide - jsdo.it - Share JavaScript, HTML5 and CSS
  • ここまではFlashでできることを無理してJavaScriptでやっている感が否めないところがあります。個人的には実装していて楽しいし勉強になるのでOKなんですが、やはりHTMLらしさもほしいですね。というわけで、それを意識して作ったのがこのHTML slideです。HTMLで作ったスライドと言ってしまえばそれだけなんですが、最小限のHTML、クロスブラウザ、最新のブラウザではリッチな表示、であることを目指して作っています。とにかくシンプルなので、HTML, CSS, JavaScriptの知識があれば、これをベースに気軽に改良できるのがポイントです。

こうして振り返ってみると、一週間の間にだいぶ作りました…。まあ、以前書いたものの焼き直しがほとんどなのでそれほど時間はかかってはないですし、なんといっても得られるものがありました。というわけで、jsdo.itは本当にオススメです。