既存のスクリプトに組み込む
最後に、本連載で以前作成した「シンプルペイント」(HTML5 Canvasを利用したお絵かきツール)にローカルストレージを組み込んでみましょう。シンプルペイントの仕様やCanvasの実装に関しては以下のページを参照してください。HTML/CSSは以前と共通ですのでここではスクリプト部分のみ掲載します。
- ・古籏一浩のJavaScriptラボ ― 第31回
- http://ascii.jp/elem/000/000/513/513377/
シンプルペイントはブラシの色とサイズをユーザーが選択し、Canvas上にお絵かきができるWebアプリケーションです。今回は、ユーザーが選択したブラシサイズと色の情報をローカルストレージに保存し、次回アクセスしたときに再現するように改良しましょう。
ページが読み込まれてスライダーなどの初期設定が完了したらローカルストレージからブラシサイズと色を読み出します。ブラシサイズはbrushSizeに、色はpenColorに保存するものとします。読み出す処理は以下のようになります。
drawData.brushSize = window.localStorage.getItem("brushSize") || 1;
drawData.penColor = window.localStorage.getItem("penColor") || "rgba(255,0,0,1)";
$("#slider").slider("value", drawData.brushSize);
サンプル3と同様に||を使って、ローカルストレージにデータが保存されていな場合は初期値を設定しています。また、jQuery UIで実装しているスライダー(ペンのサイズを指定)の値も忘れずに設定します。スライダーの値はslide()の第1引数に"value"を、第2引数にスライダー値を指定します。
次に、ブラシサイズと色の情報を保存します。ページが切り替わる時点で保存すればよいので、以下のようにunloadイベントが発生したらローカルストレージへ保存します。
window.addEventListener("unload", function(){
window.localStorage.setItem("brushSize", drawData.brushSize);
window.localStorage.setItem("penColor", drawData.penColor);
}, true);
以上をまとめたのがサンプル4です。
●サンプル4(draw.js)
window.addEventListener("load", function(){
var drawData = {
drawFlag : false,
oldX : 0, // 直前のX座標を保存するためのもの
oldY : 0, // 直前のY座標を保存するためのもの
brushSize : 1, // ブラシサイズ
colorList : {
"black" : "rgba(0,0,0,1)",
"blue" : "rgba(0,0,255,1)",
"red" : "rgba(255,0,0,1)",
"magenta" : "rgba(255,0,255,1)",
"green" : "rgba(0,255,0,1)",
"cyan" : "rgba(0,255,255,1)",
"yellow" : "rgba(255,255,0,1)",
"white" : "rgba(255,255,255,1)"
},
penColor : "rgba(255,0,0,1)"
}
var can = document.getElementById("myCanvas");
can.addEventListener("mousemove", function draw(e){
if (!drawData.drawFlag) return;
var x = e.clientX;
var y = e.clientY;
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("mousedown", function(e){
drawData.drawFlag = true;
drawData.oldX = e.clientX;
drawData.oldY = e.clientY;
}, true);
window.addEventListener("mouseup", function(){ // キャンバスでなくウィンドウに
drawData.drawFlag = false;
}, true);
// カラーパレット初期化
$("#colorPalet div").click(function(e){
drawData.penColor = drawData.colorList[this.id];
});
// ブラシサイズの設定を行うスライダー
$("#slider").slider({
min: 0,
max: 100, // ブラシの最大サイズ
value : 1, // 最初のブラシサイズ
slide : function(evt, ui){
drawData.brushSize = ui.value; // ブラシサイズを設定
}
});
// ----------------------------------------------------------
// 追加したローカルストレージのスクリプト
// ----------------------------------------------------------
// ■■■ ローカルストレージからデータを読み出して初期化する
if (window.localStorage){
drawData.brushSize = window.localStorage.getItem("brushSize") || 1;
drawData.penColor = window.localStorage.getItem("penColor") || "rgba(255,0,0,1)";
$("#slider").slider("value", drawData.brushSize);
// ■■■ ページが切り替わる際に保存する
window.addEventListener("unload", function(){
window.localStorage.setItem("brushSize", drawData.brushSize);
window.localStorage.setItem("penColor", drawData.penColor);
}, true);
}
// ----------------------------------------------------------
}, true);
// 保存処理 (Canvas2Image)
// http://www.nihilogic.dk/labs/canvas2image/
function saveData(){
var can = document.getElementById("myCanvas");
Canvas2Image.saveAsPNG(can); // PNG形式で保存
}
◆
今回紹介したように、Web Storageは手軽で便利な機能です。上手に利用することでユーザーの負担を軽減し、使い勝手のいいWebページを作成できます。また、すでに多くのブラウザーで利用できるのも魅力です。ぜひ利用してみてはどうでしょうか。