Indexed Database APIによるデータベース(6/7):JavaScriptによるHTML5プログラミング入門

libro

www.tuyano.com

Indexed Database APIによるデータベース (6/7)

作成:2011-09-19 09:30
更新:2012-04-10 16:12

■データの一覧表示

検索のように特定のデータだけをピックアップする他に、「すべてのデータを取り出して処理する」というようなことも必要な場合があります。これには、getとはまた別のアプローチが必要となるでしょう。

データを纏めて取り出す場合には「カーソル」というものを利用します。これは「openCursor」というメソッドを使って利用します。

変数 =【IDBObjectStore】.openCursor();

これで変数には、IDBRequestオブジェクトが返されます。このIDBRequestでは、openCursorが成功すると、onsuccessの関数が呼び出されます。ここで渡される引数から、必要な情報を取得します。

【IDBRequest】.onsuccess = function(event){
    変数 = event.target.result;
}

先ほどのgetと基本的な考え方は同じですね。ただし、event.target.resultで得られるのは「IDBCursorWithValue」というオブジェクトです。ここからvalueプロパティの値を取り出すと、今回の（？）データが得られます。

得られるデータは、やっぱり１つだけです。が、このIDBCursorWithValueには「続ける」というメソッドがあるのです。こういうものです。

【IDBCursorWithValue】.continue();

これにより、２つ目のデータ取得が実行されます。そして取り出されると、再びonsuccessの関数が実行されるのです。そしてまたcontinueするとまたonsuccessが……という具合に、「continueしてはonsuccessの関数で必要情報を得る」ということを繰り返してデータを順に取り出していくというわけです。

では、これも利用例を挙げておきましょう。下のリスト欄のサンプルは、保管した全データをテーブルにまとめて表示するものです。ここでは、onsuccessで、以下のような形でデータの取得を行っていることがわかります。

re.onsuccess = function(event){
    var cur = event.target.result;
    if (!cur) return;
    var val = cur.value;
    ……略……
    cur.continue();
};

onsuccessのメソッドでは、まずevent.target.resultを取得し、そこからvalueでデータを取り出して必要な処理をしています。そしてそれらが終わったら、最後にcur.continue();で次のデータ取得を呼び出しているのです。これで必要なだけいくらでもデータを順に取り出せるのですね。

ざっと使ってみて、Indexed Database APIは、「イベントのプロパティに関数を設定し、その関数内で必要な処理をする」といったコーディングがかなり多いことが分かるでしょう。やや面倒くさい感じはしますが、慣れてしまえばそんなに複雑な処理ではありません。これでごくシンプルなデータベースなどは十分作成できるでしょう。

(by. SYODA-Tuyano.)

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

●プログラム・リスト●

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type"
	content="text/html; charset=utf-8">
<title>Sample</title>
<style>
h1 {font-size: 14pt; font-weight:bold;
	background-color:#DDF; padding:3px; }
#ftable tr td { background-color:#CFC; }
#datas tr td { background-color:#FCC; }
</style>

<script type="text/javascript">
var IDBTransaction;
var IndexedDB;
var db;
var objectStore;

function initial(){
	IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction;
	try {
		IndexedDB = mozIndexedDB;
	} catch(e){}
	try {
		IndexedDB = webkitIndexedDB;
	} catch(e){}
	var request = IndexedDB.open("MyTestDatabase");
	
	request.onerror = function(event) {
		alert("ERROR!");
	};
	request.onsuccess = function(event) {
		db = request.result;
		createObjectStoreMethod();
		//alert("OK!");
	};
}

function createObjectStoreMethod(){
	var request = db.setVersion("1.0");
	request.onerror = function(event) { /* ERROR */ };
	request.onsuccess = function(event) {
		try {
			objectStore = db.createObjectStore("mydata", { keyPath: "name" });
			objectStore.createIndex("name", "name", { unique: true });
		}catch(e){}
		createList();
	};
}

function createList(){
	if (!db) return;
	var datas = document.getElementById("datas");
	for (var i =datas.childNodes.length-1; i>=0; i--){
		datas.removeChild(datas.childNodes[i]);
	}
	var objectStore = db.transaction("mydata").objectStore("mydata");
	var re = objectStore.openCursor();
	re.onsuccess = function(event){
		var cur = event.target.result;
		if (!cur) return;
		var val = cur.value;
		var tr = document.createElement("tr");
		var td1 = document.createElement("td");
		td1.innerHTML = val.name;
		tr.appendChild(td1);
		var td2 = document.createElement("td");
		td2.innerHTML = val.email;
		tr.appendChild(td2);
		var td3 = document.createElement("td");
		td3.innerHTML = val.tel;
		tr.appendChild(td3);
		datas.appendChild(tr);
		cur.continue();
	};
}
</script>
</head>

<body onload="initial();">
<h1>Index DB Sample.</h1>
<table id="datas" width="400px"></table>
</body>
</html>

※関連コンテンツ

<< prev next >>

「JavaScriptによるHTML5プログラミング入門」に戻る