アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

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

こんにちは。斉藤です。

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を書く環境がもっともっと整えば、と思います。
jQuerylightboxなどの他のライブラリをあわせて使えるという点で、JS市場がFlashより大きくなるということは、考えられるのではないでしょうか。
もちろん適材適所だと思うのですが、JSがFlashを超える、そんな未来が来るかもしれませんね!



* 参考


本家:www.kineticjs.com/
使い方:www.html5canvastutorials.com

その他描画ライブラリ
box2d-js.sourceforge.net/
peterned.home.xs4all.nl/demooo/cubes.html