2010

06/16

iPad の Safari で動作するマルチタッチ対応お絵描きソフトを作ってみた

はいこんにちはー。お久しぶりです。珍しくフロントエンド側のネタで記事を書いてみます。

今回は革新的で魔法のようなデバイスであるところの iPad を使って、マルチタッチ対応お絵描きソフトを作ってみました。 iPad を持っていない人でも見れるように YouTube にビデオをアップロードしてみました。

実際のデモ (PC ブラウザでは動作しません。 Android でも動くかも？)

ソースコード

<!doctype html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" />
	<title>touch!</title>

	<style type="text/css">
		#console
		{
			position: absolute;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 100%;
		}
	</style>
	<script>
	document.addEventListener("DOMContentLoaded", function()
	{
		var canvas = document.getElementById("console");
		var ctx = canvas.getContext("2d");

		document.addEventListener("touchstart", draw, false);	// タップ
		document.addEventListener("touchmove", draw, false); // シングルタッチ
		document.addEventListener("gesturemove", draw, false);	// マルチタッチ

		function draw(e)
		{
			// マルチタッチ処理のキモ？
			// e.touches にタッチした数ぶんの座標が配列で格納される

			for (var i = 0; i < e.touches.length; i++)
			{
				// ランダムに色を作る
				ctx.strokeStyle = getRandomColor();
				ctx.fillStyle = getRandomColor();

				var x = e.touches[i].pageX;
				var y = e.touches[i].pageY;

				// page の座標系を canvas の座標系に変換
				x = 640 * (x / window.innerWidth);
				y = 480 * (y / window.innerHeight);

				// 丸を描く
				ctx.beginPath();
				ctx.arc(x, y, 10, 0, Math.PI * 2, false);
				ctx.fill();
			}

			// イベントの伝播をしないようにしてスクロールを防ぐ
			e.preventDefault();
		}

		function getRandomColor()
		{
			var color = [];

			for (var i = 0; i < 3; i++)
			{
				color.push(Math.floor(Math.random() * 256));
			}

			return 'rgb(' + color.join(',') + ')';
		}
	});
	</script>
</head>
<body>
	<canvas id="console" width="640" height="480"></canvas>
</body>
</html>

やっていることは単純で、画面いっぱいに canvas を配置してタッチイベント (touchmove とか gesturemove) で座標を拾って画面に反映しています。何気に jQuery を使わないの初めてですが WebKit だけで動けば良いので気が楽でした。

アプリではないとマルチタッチの検知ができないのかなと思い込んでいたのですが、HTML (JavaScript) でも検知できることがわかったので、応用すればブラウザでもアプリっぽいことが色々できそうな感じですね。

今後 YouTube のビデオも充実させていきたいなと思いつつ、iPhone/iPad はもちろん、スマートフォン全般に取り組んでいけたらなと思います。(もちろん Ethna ネタもやっていきますよー。) それでは！

preload preload preload