2011年11月21日
JSはFashを超えるか？kinetic.jsを触ってみる。
こんにちは。斉藤です。
11月入ってから、暖かったり寒かったり、気温の変化が激しいですね。
皆様はお元気でお過ごしでしょうか。
自分の方では、一つ気になっているニュースがあります。
モバイルFlash断念はAppleの拒絶が主因――Adobe幹部が説明
このニュースは皆様もご存知でしょうか？？
Flashをよく使っていた自分としては、とても感慨深いものがあります・・・。
FlashからHTML5、という技術の移り変わりを感じさせるニュースですね。
* JSでも、Flashみたいなインタラクティブなものを作りたい！
というわけで、今回はJavaScriptの描画ライブラリ、kinetic.jsを触ってみます。
canvasタグ上に色々描く事が出来るJSです。
www.kineticjs.com
これを使えば、Flashのようなインタラクティブなものが、JSで作れるかもしれません！
他にも、描画ライブラリは複数ありますが、今回は知人から教えていただいた、こちらを使ってみました。
自分で作ってみたデモはこちら。
水面と浮かぶボールを作ってみましたが、いかがでしょうか？
クリックで波を起こしたり、ボタンでボールを落としたりできます。
* 解説と感触
それでは、使ってみての解説と感触を書きます。
このkinetic.jsの特徴はこちら。
1.canvasタグのエリアに線を引いたり、○とか、画像とかを描く
2.canvas上のマウスの位置座標を取得
3.各種イベント（マウスダウン、マウス移動など）取得
4.凹凸のある描画図形とマウスの衝突判定
5.描画図形のドラッグアンドドロップ
6.flashのようなベクターではなく、ビットマップを扱う
などなど。
ベクター図形を扱うことが出来ないので、flasherは少し切り替えが必要かも。
自分で感じたメリットはこちら。
1.FlashをHTMLに埋め込むといった作業から離れられる
2.JS上に書くので、HTMLを書く作業と同時にデバッグ可能
3.他のライブラリ(jQueryなど)と、あわせて扱える
また、デメリットは。
1.JSの匿名関数の書き方に慣れなければならない
2.JSなので、シンタックスエラーが見つけにくい
3.コードが丸見え
という感じです。
* Hello world
どんな新しいライブラリでも、ハローワールドは欠かせませんね！
円を描いてみる実装はこちら。
<html>
<head>
<script src="./js/kinetic-v2.0.0.js"></script>
<script>
window.onload = function(){
var stage = new Kinetic.Stage("container", 578, 200);
var canvas = stage.getCanvas();
var context = stage.getContext();
context.beginPath();
context.arc(100, 100, 50, 0, 2 *