libro
www.tuyano.com
JavaScriptによるHTML5プログラミング入門

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

作成:2011-09-19 09:22
更新:2011-09-19 09:33

■IDBObjectStoreの作成と削除

IDBDatabaseオブジェクトは、これ自体はデータベースにデータを保存したりはできません。ここから「オブジェクトストア」と呼ばれるオブジェクトを作成します。

このオブジェクトストアは「IDBObjectStore」というオブジェクトで、データベースへのデータの保存や検索など、基本的なデータ操作のための機能を提供するものです。これは保存するデータごとに作成することができます。つまり、１つのデータベースであっても、いくつかの種類のデータを保存する場合は、それぞれにIDBObjectStoreが用意されるわけです。

このIDBObjectStoreを用意する場合、注意しなければならないのは「既にIDBObjectStoreがあるかどうかによって処理が違う」という点でしょう。データベースはローカルボリュームに保存されますから、一度作成してしまえば、以後はブラウザを終了したりしてもデータベースは保管され続けられます。したがって、最初にデータベースを利用するときには「IDBObjectStoreを新たに作成する」ことになりますが、二回目以降は「既にあるIDBObjectStoreを取得する」ということになります。では、これもそれぞれの機能の使い方をざっと整理しておきましょう。

・IDBObjectStoreの作成
変数 = 【IDBDatabase】.createObjectStore( 名前, 連想配列 );
新たにIDBObjectStoreを作成するものです。引数にはデータの名前、必要な設定情報を渡すための連想配列を渡します。この連想配列には、通常「keyPath」と呼ばれる値を用意します。これはデータベース検索時に用いられる「キー」となる項目名を指定するものです。


・インデックスの作成
【IDBObjectStore】.createIndex(名前, キー名, 連想配列 );
作成したIDBObjectStoreでは、「インデックス」と呼ばれるものを生成しておきます。これは指定のキーに従ってデータを整理し検索できるようにするために必要となるものです。これでようやくオブジェクトストアが使える状態となりました。


・オブジェクトストアの削除
【IDBObjectStore】.deleteObjectStore( 名前 );
作成済みのオブジェクトストアを削除する場合には、deleteObjectStoreを呼び出します。引数には、削除するオブジェクトストアの名前を指定します。これは、createObjectStoreで指定した名前を利用すればよいでしょう。


・オブジェクトストアの取得
変数 =【IDBDatabase】.transaction( 引数指定 ).objectStore("mydata");
既にあるオブジェクトストアを取り出すときにはちょっと注意が必要です。IDBDatabaseには「指定のオブジェクトストアを取り出す」というメソッドはないのです。ではどうするのかというと、まずIDBDatabaseから「IDBTransaction」オブジェクトを取得し、そこから「objectStore」メソッドで指定のオブジェクトストアのオブジェクトを取り出す、という形になります。

IDBTransactionの取得は、transactionというメソッドを呼び出します。これは引数にいろいろと指定することが出来ます。第１引数にはデータの範囲を示す配列を渡します。全範囲を対象とするなら、カラの配列を渡せばOKです。第２引数にアクセス権に関する値を指定することもできますが、今回はとりあえず「transaction([])とすればいい」と考えてください。


――では、実際の利用例を挙げておきましょう。先ほどのスクリプトに加筆したものです。新たに追加したcreateObjectStoreMethodメソッドにより、データベースを新しく作成しています。また既にある場合には、それを取得しています。

ここでは、createObjectStoreMethod関数でオブジェクトストアの準備をしていますが、まず最初にちょっと不思議なことをしていますね。
var request = db.setVersion("1.0");
これは、IDBVersionChangeRequestの取得をするものです。データベース利用の際には、まずsetVersionでバージョンの設定を行います。そしてこれが成功したなら、onsuccessプロパティに設定されている関数を呼び出し処理をします。つまり、ここにオブジェクトストア取得のための処理を用意しておけばいいわけです。

ここでは、try内でcreateObjectStoreとcreateIndexを実行しています。オブジェクトストアがなければ、ここで作成されます。もし既にある場合には、createObjectStore時に例外が発生するため、catchにジャンプし、ここにある処理を実行します。ここでは何もしていませんが、例えばここで既にあるオブジェクトストアを取得したければ、transaction().objectStoreを呼び出せばよいでしょう。

さて、createObjectStoreメソッドでは、２つの引数が用意されていますね。１つ目の"mydata"は、オブジェクトストアの名前です。そして２つ目の{ keyPath: "name" }は、「"name"という名前の項目をインデックス用に設定する」ということを示します。Indexed Database APIでは、あらかじめ「この項目を使ってデータを検索したり並べ替えたりする」というのを決めておく必要があります。ここでは、"name"という項目を使ってデータを管理する、ということを設定していたのですね。

とりあえず、これでオブジェクトストアの準備までは出来ました。ようやくこれで、データを追加したり検索したりといった操作を行う準備ができたわけです。
(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){}
	};
}
</script>
</head>

<body onload="initial();">
<h1>Index DB Sample.</h1>
</body>
</html>
※関連コンテンツ
<< prev next >>

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