JSはFashを超えるか？kinetic.jsを触ってみる。 : アシアルブログ

201111/21

JSはFashを超えるか？kinetic.jsを触ってみる。

カテゴリ :: フロントエンド（HTML5）
タグ :: Tech; JavaScript; canvas

こんにちは。斉藤です。

11月入ってから、暖かったり寒かったり、気温の変化が激しいですね。
皆様はお元気でお過ごしでしょうか。
自分の方では、一つ気になっているニュースがあります。
モバイルFlash断念はAppleの拒絶が主因――Adobe幹部が説明

このニュースは皆様もご存知でしょうか？？
Flashをよく使っていた自分としては、とても感慨深いものがあります・・・。
FlashからHTML5、という技術の移り変わりを感じさせるニュースですね。

* JSでも、Flashみたいなインタラクティブなものを作りたい！

というわけで、今回はJavaScriptの描画ライブラリ、kinetic.jsを触ってみます。
canvasタグ上に色々描く事が出来るJSです。
www.kineticjs.com

これを使えば、Flashのようなインタラクティブなものが、JSで作れるかもしれません！
他にも、描画ライブラリは複数ありますが、今回は知人から教えていただいた、こちらを使ってみました。
自分で作ってみたデモはこちら。

デモ（Firefox,Chrome,Safariで確認済）

水面と浮かぶボールを作ってみましたが、いかがでしょうか？
クリックで波を起こしたり、ボタンでボールを落としたりできます。

* 解説と感触

それでは、使ってみての解説と感触を書きます。
この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を超える、そんな未来が来るかもしれませんね！