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

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

作成:2011-09-19 09:16
更新:2011-09-19 09:32

■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;
これもFirefoxとChromeで用意されているプロパティ名が違うため、このようにしてオブジェクトをIDBTransactionに取り出すようにしています。これは、今回のサンプルでは何も使っていませんが、以後、スクリプトを拡張していく過程で必要となるので最初に用意をしてあります。

IndexedDB変数には、それぞれのブラウザのIDBFactoryオブジェクトを保管してあります。これはtryを使い、値が存在しない場合エラーでスクリプトが止まらないようにしてあります。そしてオブジェクト取得後、まずopenでデータベースをオープンします。
var request = IndexedDB.open("MyTestDatabase");
ここでは、MyTestDatabaseという名前のデータベースをオープンしています。そして、onsuccessに関数を設定し、その中でIDBRequestオブジェクトを変数dbに取り出しています。
request.onsuccess = function(event) {
    db = request.result;
    alert("OK!");
};
これで、データベースを利用するための準備は整いました。後は、dbのオブジェクトを使ってデータベース利用のためのオブジェクトを取り出し、操作をしていくことになります。
(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;
		alert("OK!");
	};
}
</script>
</head>

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

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