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 * Math.PI, false);
context.fillStyle = "#ff9900";
context.fill();
};
</script>
</head>
<body onmousedown="return false;">
<div id="container"></div>
</body>
</html>
あんまりFlashと変わりないですね。
1.beginPathで線を描きは じめるという宣言
2.arcで円を描く
3.strokeで終わり
といった簡単な実装です。実行結果はこんな感じです。
同じようなやり方で、長方形を描いたり、フォントを指定してテキストを書いたりできます。
長方形を描きたい
テキストを描きたい
* フレーム
他に実装的な特徴のある部分は、フレーム制御の部分です。
window.requestAnimFrame = (function(callback){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback){
window.setTimeout(callback, 1000/60);
};
})();
見たことの無いコードがありますね・・・。
xxxRequestAnimationFrameというのはcanvasのフレーム関係の関数です。jsはブラウザ依存するので、webkit,moz系などと複数定義します。
こちらを駆使して、フレームを更新します。
これを使うと、動きのあるものが作れます。
参考ページ
* その他ポイント
関数の書き方
jQueryでもそうでしたが、関数の書 き方が少し異なることが多くなります。これが少し手ごわいかもしれませんね・・・。
window.onload = function(){
}
みたいな書き方は、なかなか最初のうちは慣れないかもです。
クラスベースでやろうとすると特に。
デバッグ
JSなので、fireBugなど、ブラウザのデバッグツールを駆使しましょう。
シンタックスエラーをだしてくれるエディタが、今のところ見つかっ ていません。
* 終わりに
個人的には、JS自体がもっと早くなって、JSを書く環境がもっともっと整えば、と思います。
jQuery、lightboxなどの他のライブラリをあわせて使えるという点で、JS市場がFlashより大きくなるということは、考えられるのではないでしょうか。
もちろん適材適所だと思うのですが、JSがFlashを超える、そんな未来が来るかもしれませんね！
* 参考
本家：www.kineticjs.com/
使い方：www.html5canvastutorials.com
その他描画ライブラリ
box2d-js.sourceforge.net/
peterned.home.xs4all.nl/demooo/cubes.html
