Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

IE10で動くHTML5アプリ実装例
「Indexed Database APIを使用したフィード取得アプリ」

最新ブラウザ「Internet Explorer10」と「HTML5」のAPI情報(2)

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2012/04/18 14:00

目次

IndexedDBを初期化する

 IndexedDBは、「indexedDB」というグローバル変数を起点としてプログラミングを開始します。また、IndexedDBを用いたプログラミングには、他にもIndexedDBにおけるトランザクションを表す「IDBTransaction」、データを順次フェッチするためのカーソルを表す「IDBCursor」、検索インデックスの範囲を絞り込むための「IDBKeyRange」などのインターフェースを必要とします。

 しかしこの記事の執筆時点では、これらのグローバル変数/インターフェースは、多くのブラウザにおいて異なる「ベンダープレフィックス」付きで提供されています。そのため、出来る限り多くのブラウザでこのデモが動作するように、ベンダープレフィックスを総当りで試して、見つかったものを使用するという処理を行っています。

var indexedDB = window.indexedDB || window.webkitIndexedDB
        || window.mozIndexedDB || window.moz_indexedDB
        || window.msIndexedDB;
var IDBCursor = window.IDBCursor || window.webkitIDBCursor
        || window.mozIDBCursor || window.moz_IDBCursor
        || window.msIDBCursor;
var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction
        || window.mozIDBTransaction || window.moz_IDBTransaction
        || window.msIDBTransaction;
var IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange
        || window.mozIDBKeyRange || window.moz_IDBKeyRange
        || window.msIDBKeyRange;

 IndexedDBを使用するには、まずデータベースをオープンしなくてはなりません。データベースをオープンするためのメソッドはopenですが、このメソッドはすぐに処理が呼び出し元に戻り、実際のオープン処理はバックグラウンドで実行されます。

var req = indexedDB.open(DB_NAME, latestVersion);

 IndexedDBには、どんな環境でも使用できる非同期型のAPIと、Web Workers内でのみ使用可能な同期型のAPIがありますが、このデモでは非同期型のAPIを使用しています。IndexedDBでは、非同期で呼び出されるメソッドの戻り値に対して「onsuccess」「onerror」と言ったイベントハンドラを設定することで、非同期処理の終了時に処理を行うことができます。また、非同期処理の結果は、非同期メソッドの戻り値が持つ「result」プロパティに格納されています。

var db;
req.onsuccess = function(event) {
    // オープンしたデータベースはresultプロパティに格納されている
    db = req.result;
    ...
};

 上のように、オープンに成功するとresultプロパティにデータベースオブジェクト(正確にはIDBDatabaseオブジェクト)が格納されています。


  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 石川 将行(イシカワ マサユキ)

    株式会社シーエー・モバイルにてスマートフォン向けWebアプリケーションの開発を担当、現在はグリー株式会社でエンジニアとしてソーシャルアプリの開発を行なっている。

バックナンバー

連載:最新ブラウザ「Internet Explorer10」と「HTML5」のAPI紹介
All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5