Indexed Database API－HTML5のAPI、および、関連仕様

トップページ > HTML5のAPI、および、関連仕様 > Indexed Database API

★Indexed Database API

Indexed Database API
Internet Explorer10

注：このページの解説は、途中までとなっています。

■Indexed Database APIとは

Indexed Database APIは、JavaScriptでデータベースを可能にするための仕様です。 Indexed Databaseでは、データをキー（key）と値（value）のセットにして、JavaScriptのオブジェクトとして保存します。データは、ユーザーのローカル環境（ブラウザ）に保存されます。

Indexed Databaseは、key-value型のストレージをデータベースとして利用できるように発展させた仕様と言えるでしょう。データベースの構造を表すスキーマを定義する必要はありません。 SQLを使用することはできませんが、keyの指定のみでデータを取り出すことができます。

一方で、データの検索をしやすくするためのインデックス作成や、複数の処理を一連で実行するトランザクション処理などが可能となっています。リレーショナル・データベースではありませんが、それに近い使い方もできるなど、データベースとしての基本的な機能は備わっています。

■Indexed Databaseの基本

Indexed Databaseによる基本的な処理の流れは、以下の通りです。

データベースをオープンする
オブジェクトストアを作成する（当サイトでは未解説）
インデックスを作成する（当サイトでは未解説）
個々のデータを保存・取得・削除する（当サイトでは未解説）

Indexed Databaseでは、まずデータベースを作成して、その中にオブジェクトストアと呼ばれる個々のデータの保存先を作成します。 1つのデータベースの中には、複数のオブジェクトストアを作成することができます。また、オブジェクトストアの中には、個々のデータをJavaScriptのオブジェクトとしてkey-value型で保存することができます。

■データベースをオープンする

Indexed Databaseを利用する際には、まず最初に、indexedDBオブジェクトに対してopen()メソッドを使用してデータベースをオープンします。

var indexedDB = window.indexedDB;
var request = indexedDB.open("データベース名", "データベースの説明");
request.onsuccess = function(evt) {
  //データベースのオープンに成功した場合の処理
}
request.onerror = function(evt) {
  //データベースのオープンに失敗した場合の処理
}

データベースをオープンしたら、onsuccessやonerrorなどのイベントに応じて処理を行います。

イベントハンドラ名	イベント発生のタイミング
onsuccess	成功した場合
onerror	失敗した場合

Indexed Database APIは、まだ仕様が完全には確定しておらず、現時点では、実装されているブラウザで利用する場合でも、そのブラウザに合わせたベンダープレフィックスを付けてやる必要があるようです。

webkitIndexedDB … Chrome 11
moz_indexedDB … Firefox 4.8
mozindexedDB … Firefox 4.9

以下のサンプルは、Indexed Databaseでデータベースがオープンできるかどうかを確かめるだけのごく簡単なものです。 Google Chrome向けとFirefox向けのベンダープレフィックスを付けた書式も含めています。

※メモ：以下のサンプルは、Google Chromeでは動くようですが、Firefoxでは動かないようです。作成のしかたが悪いのかもしれません。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset=utf-8>
<script>
window.onload = function() {

  //結果表示する要素を取得
  var msg = document.getElementById("msg");
  //Google Chrome向けとFirefox向けのベンダープレフィックスを付けた書式も含める
  var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.moz_indexedDB;

  //データベースのオープン
  var request = indexedDB.open("sample", "サンプルデータベース");

  //データベースのオープンに成功した場合
  request.onsuccess = function(evt) {
    msg.innerHTML = "データベースをオープンしました。";
  }
  //データベースのオープンに失敗した場合
  request.onerror = function(evt) {
    msg.innerHTML = "データベースをオープンできません。";
  }

}
</script>
<title>Indexed Databaseサンプル1</title>
</head>
<body>
<h4>Indexed Databaseでデータベースをオープンできるかどうかを確認</h4>
<div id="msg"></div>
</body>
</html>

サンプルを別画面で開く

Indexed Databaseの解説は、とりあえずここまでです。もう少し仕様が確定してブラウザの動作が安定してきたら続きを解説するかも…です。

<前へ

記事一覧へ

次へ>