古籏一浩のJavaScriptラボ ― 第64回

Canvasで作ったWebアプリをiPhoneアプリに変換

2011年07月11日 13時00分更新

古籏一浩

ツイートする

設定したカラーを保存する

　最後に、設定したカラーを保存する処理を追加してアプリを完成させましょう。NimbleKitではアプリケーションの設定値を保存するためのNKSettingsクラスが用意されています。NKsettingsはKey Value方式でデータを扱いますので、HTML5のWeb Storageと使い方は似ています。

　NKSettingsクラスもnewでオブジェクトを生成します。NKSettingsオブジェクトには、保存済みのデータを読み出すためのgetValueForKey()メソッドと、データを保存するためのsetValueForKey()メソッドが用意されています。

　保存済みのデータはgetValueForKey()の引数にデータのキーを指定して読み出します。データがない場合は(null)が返されますが、以下のように記述してもNimbleKitでは動作しません。

n = settings.getValueForKey("red") | 255

　NimbleKitでは以下のようにeval()を使ってnullとして評価します。

eval(settings.getValueForKey("red")) || 255;

　ブラシの描画色は、スライダーがドラッグされたときにNKSettingsを使って値を保存します。ところが、iOSシミュレーターでテストしてみると問題なく動作するのに、iPhone 4などの実機で動かしてみるとスライダーの動きが悪く、快適に操作できません。頻繁にデータを保存するような処理は難しいようです。

　そこで、以下のように2秒に1回の割合でカラー値を保存する処理にします。これなら実機で動作させても快適に利用できます。

function saveColor(){
  settings.setValueForKey(drawData.red, "red");
  settings.setValueForKey(drawData.green, "green");
  settings.setValueForKey(drawData.blue, "blue");
}
setInterval("saveColor()", 2*1000);  // 2秒に1度の割合で保存する

　以上でiPhone版シンプルペイントの完成です（サンプル4）。実機であれば複数の指を使って同時にスライダーを動かしつつ、Canvasに描けます。さすがにiPhoneでは画面が狭いので難しいですが、画面が広いiPadであればブラシの描画色を次々に変えながら面白い絵が描けるでしょう。

■サンプル4[HTML]

<html>
<head>
<meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="NKit.js"></script>
<style>
body { margin:0; padding: 0; background-color:black;
    -webkit-user-select: none;
}
canvas { background-color: white; }
#drawColor {
  color:white;
  font-size: 9pt;
  width:100%;
  height:10pt;
  background-color: red; }
</style>
</head>
<body>
<canvas id="myCanvas" width="320" height="320"></canvas>
<div id="drawColor"></div>
<script type="text/javascript" src="js/draw.js"></script>
</body>
</html>

■サンプル4[draw.js]

var drawData = {
  drawFlag : false,
  oldX : 0, // 直前のX座標を保存するためのもの
  oldY : 0, // 直前のY座標を保存するためのもの
  brushSize : 4, // ブラシサイズ
  red : 0,
  green : 0,
  blue : 0,
  penColor : "rgba(255,0,0,1)"
}
var can = document.getElementById("myCanvas");
can.addEventListener("touchmove", function draw(e){
  if (!drawData.drawFlag) return;
  var x = e.touches[0].pageX;
  var y = e.touches[0].pageY;
  var can = document.getElementById("myCanvas");
  var context = can.getContext("2d");
  context.strokeStyle = drawData.penColor;
  context.lineWidth = drawData.brushSize;
  context.lineJoin= "round"; // 連結部分を丸にする
  context.lineCap = "round";
  context.beginPath();
  context.moveTo(drawData.oldX, drawData.oldY);
  context.lineTo(x, y);
  context.stroke();
  context.closePath();
  drawData.oldX = x;
  drawData.oldY = y;
}, true);
can.addEventListener("touchstart", function(e){
  drawData.drawFlag = true;
  drawData.oldX = e.touches[0].pageX;
  drawData.oldY = e.touches[0].pageY;
}, true);
can.addEventListener("touchend", function(){
  drawData.drawFlag = false;
}, true);
// デフォルトのイベントを禁止
document.ontouchmove = function(evt){
  evt.preventDefault();
}
// 前回の設定を読み込む
var settings = new NKSettings();
drawData.red = eval(settings.getValueForKey("red")) || 255;
drawData.green = eval(settings.getValueForKey("green")) || 0;
drawData.blue = eval(settings.getValueForKey("blue")) || 0;
drawData.penColor = "rgba("+drawData.red+","+drawData.green+","+drawData.blue+", 1)";
var dc = document.getElementById("drawColor");
dc.style.backgroundColor = drawData.penColor;
dc.innerHTML = drawData.red+","+drawData.green+","+drawData.blue;
// NimbleKit Slider
var slider = {
  red : new NKSlider(), // ID 0
  green: new NKSlider(), // ID 1
  blue : new NKSlider() // ID 2
}
slider.red.init(10,340, 300, "setColor");
slider.red.setValue(drawData.red/2.55);  // 初期値を設定
slider.red.show();
slider.green.init(10,380, 300, "setColor");
slider.green.setValue(drawData.green/2.55);  // 初期値を設定
slider.green.show();
slider.blue.init(10,420, 300, "setColor");
slider.blue.setValue(drawData.blue/2.55); // 初期値を設定
slider.blue.show();
// ペンの色を設定
function setColor(n, id){
  if(id == 0){ drawData.red = Math.floor(n*2.55); }
  if(id == 1){ drawData.green = Math.floor(n*2.55); }
  if(id == 2){ drawData.blue = Math.floor(n*2.55); }
  drawData.penColor = "rgba("+drawData.red+","+drawData.green+","+drawData.blue+", 1)";
  dc.style.backgroundColor = drawData.penColor;
  dc.innerHTML = drawData.red+","+drawData.green+","+drawData.blue;
}
// 設定保存
function saveColor(){
  settings.setValueForKey(drawData.red, "red");
  settings.setValueForKey(drawData.green, "green");
  settings.setValueForKey(drawData.blue, "blue");
}
setInterval("saveColor()", 2*1000);  // 2秒に1度の割合で保存する

　NimbleKitを使ったiPhoneアプリの作成は今回で終わりです。NimbleKitにはほかにも変わった機能がありますので、ドキュメントをチェックしてみるとよいでしょう。カメラ機能なども扱えれば面白いのですが、現在のバージョンではできないようです。将来のバージョンアップに期待したいところです。

前へ 1 2 3 4 次へ

カテゴリートップへ