★Indexed Database API

私たちはカジノサイトを独自にレビューしています。当社のリンクを通じてサインアップすると、追加料金なしで当社に手数料が発生する場合があります。

Indexed Database API
Internet Explorer10
Firefox4.8(moz)
Google Chrome11(webkit)
広告






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




■Indexed Database APIとは

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

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

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

■Indexed Databaseの基本

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

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

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




<前へ 記事一覧へ 次へ>
広告



山田 太郎
テック・リード
山田太郎は、ウェブ開発やグラフィックスプログラミングに10年以上の経験を持つテクノロジーの専門家です。特にHTML5 CanvasやJavaScript、インタラクティブメディアに精通しており、動的なユーザーインターフェースや最先端のウェブアプリケーションの開発に携わってきました。複雑な図形描画や画像操作、リアルタイムグラフィックスに関する知識が豊富で、ウェブ技術の限界を追求する開発者たちにとって頼りになる存在です。知識の共有に情熱を持ち、初心者からプロフェッショナルまで幅広く支援するため、技術フォーラムやブログにも積極的に貢献しています。

ギャンブルガイド もっと見る

カジノファインダー

どのカジノが自分に最適か分からないですか?

サインアップは必要なく、1 分以内に最適なブックメーカーを簡単に見つけることができます。
カジノを探す
Back
質問
Select one of the following options
{"is_any_tile":true}

どのカジノが自分に最適か分からないですか?

Back
Restart
やったー!
これはあなたの選択に基づいた最高のカジノです...
63 users signed up
もっと表示する