いまから1年半もまえのことになるのですが、JavaScript と HTML 5 の Canvas の機能を使って簡単なお絵描きをしてみました。

ひとまずうまくできたのですが、iPod Touch で開いて触ると画面がスクロールしてしまうという問題がありました。ドラッグ操作でペイントできるようなツールが作りたかったのに、iPhone ではスワイプと誤解されてしまうのが問題でした。

昨日、[[PhoneGap:http://phonegap.pbworks.com/Preventing-Scrolling-on-iPhone-Phonegap-Applications%5D%5Dという開発ツールの Wiki を眺めていて、ようやくこのiOS のデフォルトの機能を抑制する方法が見つかりましたので紹介します。

完成した[[例題はこちら:http://ken-wakita.net/js/apps/Canvas/%5D%5Dです。

以下にソースを掲載します。HTML と JavaScript からできています。まず、HTML からいきます。HTML 5 で書いたので、すごく簡単です。

Canvas

body { margin: 0px; }

最後の canvas タグだけが bodyで、残りはすべて head です。ミソはいくつかあります。

– viewport は iThing で見たときの画面の大きさに関する設定です
– apple-mobile-web-app-capable = yes にしておくと、iThing に上のページを保存したときに mobile Safari の画面ではなく、あたかもアプリケーションのように起動します。
– スクリプトとしては最近はやっているらしい jQuery と私がつくった script.js を使っています。

では、script.js を見ていきましょう。

var $canvas;

var draw = function(gc) {
var X = $canvas.attr(‘width’), Y = $canvas.attr(‘height’), STEPS = 100, i;
gc.clearRect(0, 0, X, Y);
gc.lineWidth = 1;
gc.beginPath();
for (i = 0; i <= STEPS; i++) {
gc.moveTo(0, 0);
gc.lineTo(X – X * i / STEPS, Y * i / STEPS);
}
gc.closePath();
gc.stroke();
};

$(document).ready(function () {
document.body.ontouchmove = function (e) { e.preventDefault(); };
$canvas = $('#canvas');
$canvas.attr({ width: document.width, height: document.height });
canvas = $canvas[0];
if (canvas.getContext) draw(canvas.getContext('2d'));
else alert('2D context not available.');
});

難しいことはほとんどしていません。注意を要するのは一点で、それは ''$(document).ready'' の第2行目の ''ontouchmove'' イベントのハンドラの設定です。ここで ''preventDefault()'' を利用することによって、ドラッグをしても iThing のデフォルトのスワイプが起きないようにしています。簡単でしょ？