このページの本文へ

サーバー不要で保存できる「Web Storage」の使い方 (5/5)

2010年09月28日 10時00分更新

文●古籏一浩

  • この記事をはてなブックマークに追加
本文印刷

既存のスクリプトに組み込む

 最後に、本連載で以前作成した「シンプルペイント」(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です。

【図】10.png

ブラシのサイズと色を変えて描く。その後、他のページに移動する

【図】11.png

他のページに移動してもローカルストレージに保存したデータは消えない

【図】12.png

戻ってきたときには以前の状態になる。ブラウザーを閉じても変わらず、数日後にアクセスしても変わらない

サンプル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ページを作成できます。また、すでに多くのブラウザーで利用できるのも魅力です。ぜひ利用してみてはどうでしょうか。

前へ 1 2 3 4 5 次へ

この連載の記事

一覧へ

この記事の編集者は以下の記事をオススメしています