2011年11月21日

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

asial

Pocket

こんにちは。斉藤です。

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を超える、そんな未来が来るかもしれませんね！