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

■IDBFactory、IDBDatabase、IDBRequest

では、実際に<<ｂb[Indexed Database APIの使い方について説明をしていくことにしましょう。Indexed Database APIでは、データベースに関するいくつかの重要なオブジェクトが用意されています。これらを用意し、そのオブジェクト内にあるメソッドなどを呼び出すことでデータベース機能の利用をしていくことになります。

オブジェクトは多数ありますが、データベース機能を利用する上でもっとも基本となるのは、以下の３つのオブジェクトでしょう。

IDBFactory――データベースのオープン、削除などを行うもの。
IDBDatabase――データベースの基本オブジェクト。ここから必要に応じてデータベース操作のためのオブジェクトを取得していく。
IDBRequest――データベースをオープンした時のリクエスト管理オブジェクト。ここからIDBDatabaseなどが取得できる。

データベース機能を使う場合、基本的には「IDBDatabaseを用意する」ことを考えることになります。これが用意できれば、あとはIDBDatabaseのメソッドからいろいろと必要なオブジェクトを取り出していけるのです。基本的な流れを整理すると――。

1. IDBFactoryの用意
まず、IDBFactoryオブジェクトを用意します。これは、Firefoxでは「mozIndexedDB」、Chromeでは「webkitIndexedDB」という名前のオブジェクトとして用意されています。

2. IDBRequestの取得
用意したIDBFactoryの「open」メソッドを呼び出し、指定のデータベースを開いて、そのリクエストをIDBRequestオブジェクトとして取得します。これは以下のように行います。引数には使用するデータベース名をテキストで渡します。

変数 = 【IDBFactory】.open( データベース名 );

3. onerror、onsuccessの設定
取得したIDBRequestには「onerror」「onsuccess」というプロパティがあります。これらは、データベース接続に成功した時と失敗したときにそれぞれ呼び出される関数を示すものです。このonsuccessに関数を割り当て、その中でデータベース接続ができたときの処理を用意します。

4. IDBDatabaseの取得
onsuccess時の関数では、引数にEventオブジェクトが渡されます。このオブジェクトの「result」に、IDBDatabaseオブジェクトが用意されています。これを取り出し、以後はこのIDBDatabaseを使ってデータベース操作を行うことになります。

――ざっと流れが頭に入ったら、実際のスクリプトを見て流れを確認しておきましょう。下のリスト欄に、データベースの準備部分の処理をまとめておきました。ここでは、上記のオブジェクト以外に「IDBTransaction」というものも用意しています。この部分ですね。

IDBTransaction = window.IDBTransaction 

 window.webkitIDBTransaction;

<!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;
		alert("OK!");
	};
}
</script>
</head>

<body onload="initial();">
<h1>Index DB Sample.</h1>
</body>
</html>