JavaScript でお絵描き—解決編

2010 年 8 月 24 日 カテゴリー: hack, programming, web | | コメントなし

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

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

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

完成した例題はこちらです。

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

<!DOCTYPE html>
<title>Canvas</title>

<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no, width=device-width">
<meta name="apple-mobile-web-app-capable" content="yes">

<style type="text/css">body { margin: 0px; }</style>

<script type="text/javascript" src="../../lib/jquery.js"></script>
<script type="text/javascript" src="script.js"></script>

<canvas id="canvas"></canvas>

最後の 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 のデフォルトのスワイプが起きないようにしています。簡単でしょ？

Spam Protection by WP-SpamFree