第2回HTML5のススメ

最近、通勤には自転車を使っています。痩せるといいな。KOYAです。

第2回はHTML5で追加された機能、「Web Storage」について話していこうと思います。

WebStorageってなに？っていうと、memcachedだったり、TokyoTyrantだったりと同様のKey-Value型のストレージ機能です。

ただし、WebStorageはクライアント側に保存することができるというところがかなり魅力的です。

WebStorageは大別すると2種類存在します。

sessionStorage…ブラウザを終了するとデータが失われる。

localStorage…ブラウザを閉じてもデータが残る。

今回は永続的に保存することが可能なlocalStorageの話をしていきます。

実はすごく簡単で以下の様に記述すればすぐに実装が可能です。

// "test"というKeyに"abcdefg"とい文字列を保存

localStorage.setItem("test", "abcdefg");

// "test"をアラートで表示。

alert(localStorage.getItem("test"));

通常WebStorageに保存する場合、setItemでデータを保存し、getItemで出力するという形になっています。

ですが、一々webStorageなのか違うのかなんて意識しないでも保存する方法があります。それが以下の記述の仕方です。

// "test"というKeyに"abcdefg"とい文字列を保存

localStorage.test = "abcdefg";

// "test"をアラートで表示。

alert(localStorage.test );

オブジェクトのプロパティに値を格納するかの如く保存できています。すごいですね、WebStorageは。

さぁ、そしてここからが本題です。

第1回でお話しした、画像表示ですが、画像自体をクライアント側に保持できないか？と思い挑戦しました。

実はこのWebStorage、1つ弱点があり、実は文字列しか格納することができません。

ですので、画像自体はバイナリデータなので保存することができません。

なので、一旦base64に変更してから保存するしかありませんでした。

※アプリケーションキャッシュを使うという手もありますが、それはまたの機会に。

以下ソースとなります。

window.onload = function () {

main();

}

function main() {

// ローカルストレージに画象がない場合

if (localStorage.imageData == null) {

// キャンバスの作成

var saveCanvas = document.createElement('canvas');

// コンテキストの取得

saveCtx = saveCanvas.getContext("2d");

// Imageオブジェクトの作成

var objectCaba = new Image();

objectCaba.src = "http://～～～～tayutau.png";

// 読み込み完了時

objectCaba.onload = function() {

saveCtx.drawImage(objectCaba, 0, 0);

// ローカルストレージに保存

localStorage.imageData = saveCanvas.toDataURL("image/png");

// ローカルストレージから描画する。

draw();

}

} else {

// ローカルストレージから描画する。

draw();

}

}

function draw() {

// キャンバスの取得

canvas = document.getElementById("test");

// コンテキストの取得

ctx = canvas.getContext("2d");

// Imageオブジェクトの作成

var objectCaba = new Image();

// ローカルストレージから画象の読み込み

objectCaba.src = localStorage.imageData;

// 読み込み完了時

objectCaba.onload = function() {

ctx.drawImage(objectCaba, 0, 0);

}

}

とこのような感じで書けば、画象を保存し表示することが可能です。

どのようにそれを実現しているかを説明します。

var saveCanvas = document.createElement('canvas');

という記述で、canvasを作成し、

localStorage.imageData = saveCanvas.toDataURL("image/png");

のtoDataURLで現在キャンバスに描かれているデータをbase64に変換し、ストレージに保存しています。

他の記述は前回と同様に単純に表示しているだけですので、割愛させて頂きます。

以外に簡単にできたように見えますが、当初作成していたときに実はjavascriptの構造上の落とし穴に引っかかりましたが

その話は次回に持ち越すことにします。

ということで、次回は、canvasを表示する際の"落とし穴"の話と、標準搭載ではなくなってしまったWebDataBaseの話をしていこうと思います。