Webアプリもオフライン実行？ Indexed Databaseを使いこなそう：連載：人気順に説明する初めてのHTML5開発（2/2 ページ）

……省略……
ページタイトル（キー）<input type="text" id="setkey" /><br />
ブックマークコメント（バリュー）<input type="text" id="setvalue" /><br />
ブックマークURL（バリュー）<input type="text" id="setvalue2" />
<input type="button" id="set" value="設定" /><hr />
取得したい値のキーを入力してください。<input type="text" id="getkey" />
<input type="button" id="show" value="値の取得" />
<input type="button" id="showIndex" value="アルファベットで始まるページタイトル一覧の取得" />
<ul id="list">
</ul>

<script type="text/javascript">
var version = "1.1";
var db;

// （1）IndexedDBの実装チェックとプレフィックスやイベント・ハンドラの登録
if (window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB) {
  window.alert("このブラウザではindexedDB は利用できます");
  var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB;
  var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.mozIDBTransaction;
  var IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.mozIDBKeyRange;
  var IDBCursor = window.IDBCursor || window.webkitIDBCursor;
  document.getElementById("set").addEventListener("click", setvalue, false);
  document.getElementById("show").addEventListener("click", showvalue, false);
  document.getElementById("showIndex").addEventListener("click", showindex, false);
  // （2）IndexedDBにアクセス
  var IDBreq = indexedDB.open("atmarkit");
} else {
  window.alert("このブラウザではindexedDB は利用できません");
}

// IndexedDBアクセス成功時に呼び出されるコールバック関数
IDBreq.onsuccess = function (event) {
  db = this.result;

  // （3）IndexedDBのバージョン・チェック
  if (version != db.version) {
    // IndexedDBにバージョンをセット
    var setVrequest = db.setVersion(version);
    // バージョン・セット成功時に呼び出されるコールバック関数
    setVrequest.onsuccess = function (event) {
      // （4）オブジェクト・ストアの作成
      var store = db.createObjectStore("Name", { keyPath: "BookmarkKey", autoIncrement: false });
    }
  }
}

……省略……
</script>
……省略……

var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB;
var IDBreq = indexedDB.open("＜DBの名前＞");

var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB;
var IDBreq = indexedDB.open("＜DBの名前＞");
IDBreq.onsuccess = function(event) {
  var db = this.result;
  db.createObjectStore("＜オブジェクト・ストアの名前＞",{ keyPath: ＜キーの名前＞, autoIncrement: ＜インクリメントの利用の有無＞});
}

……省略……
ページタイトル（キー）<input type="text" id="setkey" /><br />
ブックマークコメント（バリュー）<input type="text" id="setvalue" /><br />
ブックマークURL（バリュー）<input type="text" id="setvalue2" />
<input type="button" id="set" value="設定" /><hr />
取得したい値のキーを入力してください。<input type="text" id="getkey" />
<input type="button" id="show" value="値の取得" />
<input type="button" id="showIndex" value="アルファベットで始まるページタイトル一覧の取得" />
<ul id="list">
</ul>

<script type="text/javascript">
……省略（前述の「IndexedDBサンプルにおけるデータベース初期化の記述例」のコード内容）……

// 値の保存時に呼び出されるコールバック関数
function setvalue(event) {
  var key = document.getElementById("setkey").value;
  var value = document.getElementById("setvalue").value;
  var value2 = document.getElementById("setvalue2").value;
  // （5）トランザクションを利用してオブジェクトの保存
  var trans = db.transaction("Name", IDBTransaction.READ_WRITE);
  var store = trans.objectStore("Name");
  var data = { BookmarkKey: key, Comment: value, URL: value2 };
  var request = store.put(data);
}

// 値の取得時に呼び出されるコールバック関数
function showvalue(event) {
  var key = document.getElementById("getkey").value;
  // （6）トランザクションを利用してオブジェクトの取得
  var trans = db.transaction("Name", IDBTransaction.READ_WRITE);
  var store = trans.objectStore("Name");
  var req = store.get(key);
  var ul = document.getElementById("list");
  req.onsuccess = function (event) {
    if (this.result === undefined) {
      alert("そのキーで保存されているブックマークはありません");
    } else {
      ul.innerHTML += "<li><a href='" + this.result.URL + "' >[" + this.result.BookmarkKey + "]</a>" + this.result.Comment + "</li>";
    }
  }
}
</script>
……省略……

// トランザクションの開始
var trans = db.transaction("＜オブジェクト・ストアの名前＞", IDBTransaction.＜トランザクション・モード＞);
// オブジェクト・ストアのオープン
var store = trans.objectStore("＜オブジェクト・ストアの名前＞");

// オブジェクト・ストアのオープン
var store = trans.objectStore("＜オブジェクト・ストアの名前＞");
var data = { ＜オブジェクト＞ };
var req = store.put(data);

// autoIncrement有りで、inline-key利用時
// keyPath指定無し（キーは自動再生される）
var req = store.put({ name: "naoki", age: 29 });

// autoIncrement無しで、inline-key利用時
// keyPath指定： UserIDがキー
var req = store.put({ UserID: 1, name: "naoki", age: 29 });

// autoIncrement無しで、out-of-line key利用時
var req = store.put({ name: "naoki", age: 29 }, 1);

store.createIndex("＜インデックス名＞","＜オブジェクト・ストアの名前＞","＜キー名＞",
 { unique: ＜インデックスを一意のものにするかどうか（true／false）＞ });

……省略……
  // IndexedDBのバージョン・チェック
  if (version != db.version) {
    // IndexedDBにバージョンをセット
    var setVrequest = db.setVersion(version);

    // バージョン・セット成功時に呼び出されるコールバック関数
    setVrequest.onsuccess = function (event) {
      // オブジェクト・ストアの作成、並びにインデックスの作成
      var store = db.createObjectStore("Name", { keyPath: "BookmarkKey", autoIncrement: false });
      var index = store.createIndex("BookmarkKey", "BookmarkKey");
    }
……省略……

……省略……

// インデックスを使用した値の取得
function showindex(event) {

  // （7）レンジの作成
  var range = IDBKeyRange.bound("A","Z");
  var trans = db.transaction("Name", IDBTransaction.READ_WRITE);
  var store = trans.objectStore("Name");

  // （8）インデックスからデータを検索し取得
  var req = store.index("BookmarkKey").openCursor(range, IDBCursor.NEXT);
  var ul = document.getElementById("list");

  req.onsuccess = function (event) {
    if (this.result === undefined) {
      // データが無い場合の処理
    } else {
      ul.innerHTML += "<li><a href='" + this.result.value.URL + "'>[" + this.result.value.BookmarkKey + "]</a>" + this.result.value.Comment + "</li>";
      console.log(this.result);
      // 次の検索結果でonsuccessコールバック関数を呼び出す
      this.result.continue();
    }
  }
}
……省略……

// キー・レンジを生成
var range = IDBKeyRange.bound(＜最小値のキー＞, ＜最大値のキー＞);

// インデックスを利用したデータ取得
var req = store.index(＜インデックス名＞).openCursor(＜キーの範囲＞, ＜並び順＞);