Database」を使おう。Serverなど各データベース製品を利用してサーバサイドでデータをやりとりするのが一般的であった(ActiveXを利用すればJavaScriptコードからデータベース製品を利用することも可能)。重要なデータを保存する場合には、今後もこの流れは変わることはない。個人で利用するだけのデータや、インターネットに接続できないオフライン環境でのアプリケーション利用時であればどうだろう。このようなケースでは、(クライアント環境で)ブラウザごとにデータを保存できる仕組みがあれば、非常に有効だ。API」(以下、IndexedDB)だ。IndexedDBは、JavaScriptを使用してデータを管理できるキー/バリュー型の簡易データベースである。簡易とはいえ、インデックスの設置やトランザクションが利用できるなど、高度な機能も備えている。Storageと同様に、オリジン単位でデータを管理しているため、(もちろん)ほかのアプリケーションにデータが漏えいする心配はない。IndexedDBのイメージは、図1のとおり。IndexedDBイメージ図リレーショナル・データベースの「テーブル」に相当するのが「オブジェクト・ストア」で、キー/バリュー型で格納されている「オブジェクト」が(リレーショナル・データベースの)「レコード」に相当する。インデックスを使用することでオブジェクト・ストア内のオブジェクトを効果的に検索できる。基本的にキーはオブジェクトを指定して取得する際に使用し、インデックスは特定範囲のオブジェクトをまとめて取得する際に使用する。キーおよびインデックスを利用したデータの検索、コーディング方法については後述する。Storageとの使い分けなどが気になる方も多いだろう。Storageは以下のような違いがある。Storageの比較表インデックスやトランザクションなどの機能を利用したい場合はIndexedDBを選択することになるだろう。Storageを使用する方がよい。以下に、IndexedDBを利用できそうなシナリオを挙げてみよう。(1)ブラウザ上でコメント付きブックマークを管理する例えば、はてなブックマークなどのソーシャル・ブックマーク・サービスであればコメントを保有できるが、ブラウザの「お気に入り」機能はできない。IndexedDBを利用すれば、ソーシャル・ブックマーク・サービスのように、コメント付きブックマークを管理するアプリケーションも開発しやすい。APIを併用することで、Webアプリケーションでありながら、インターネットに接続できない環境でも、まるでデスクトップ・クライアント・アプリケーションのように動作するWebアプリケーションを作成できるようになる。Storageよりも、トランザクションやインデックス機能を保有するIndexedDBを使用する方が効率的である。気になるIndexedDBの実装状況だが、2012年1月の時点では、以下のとおりだ。インターフェイスの一部に「moz」というプレフィックスが必要。インターフェイスの一部に「webkit」というプレフィックスが必要。現時点では、主要ブラウザのうち、FirefoxとChromeのみの実装となる。IEでは、次期バージョンとなる「10」からIndexedDBに正式対応の予定だ。それ以外のブラウザも、これからIndexedDBに対応していくだろう。IndexedDBは2012年1月現在でも仕様が変わる「ワーキング・ドラフト」の段階のため、本稿の内容も今後の仕様変更により動作しなくなる可能性がある。動作が不安定な部分がある点だけはご理解いただきたい。本稿のサンプルは、2011年4月19日の段階のワーキング・ドラフトを基に作成している。それでは、IndexedDBの利用方法を見てみよう。APIの対応を確認する方法IndexedDBを利用するに当たっては、まずブラウザがIndexedDBを利用できるかを確認しなければならない。具体的なコードは、以下のとおりだ。APIの利用の可否チェック(IndexedDB.htm)windowオブジェクトのIndexedDBプロパティがある場合はIndexedDBが利用できるものとして実処理を、ない場合は「利用できない」ことを伝えるエラー・メッセージの表示などを行うのが一般的だ。現時点では、IndexedDBプロパティは、それぞれベンダ・プレフィックスを付けて、「webkitIndexedDB」「mozIndexedDB」のように記述しなければならない点にも注意してほしい。使用方法を見てみよう。■IndexedDBを使用して、個人用ブックマーク・アプリケーションを実装する冒頭で触れたように、個人用の気になったサイトのブックマークを保存・管理する個人用ブックマーク・アプリケーションを例に、IndexedDBの利用方法を見てみよう。こちらから実際に試せる。FirefoxとChromeでは、微妙に仕様が異なるため、サンプルはChromeのみでの動作を保証するものとする。サンプルの実行結果は、図2〜4のとおりだ。IndexedDBに保存する値を、それぞれ入力している画面[ページタイトル]と[ブックマークコメント]、[ブックマークURL]を記入したうえで[設定]ボタンをクリックすることで、IndexedDBに値を保存できる。キーを基に、値を取得している画面IndexedDBに値を保存した後、区切り線の下に表示されている[取得したい値のキーを入力してください。]テキストボックスに、キーの値を入力し[値の取得]ボタンをクリックすると、入力したキーを基にデータを取り出すことができる。この例では「@IT」というキー名を入力しているが、当然ながら、[ページタイトル](=キー名)が「@IT」のブックマークを事前に保存していないと、このキーでは値がヒットしない。今回のサンプルは、ボリュームもあるので、以下の3段階に分けて順に解説する。●IndexedDBに格納するオブジェクト本サンプルでIndexedDBに格納するオブジェクトは、以下のとおりだ。以降のコードを読み解く際には、以下のオブジェクト構造を念頭に読み進めてほしい。key」(インライン・キー)と呼ぶ。keyは、後述するkeyPathプロパティに値が指定されている場合に利用されるキーだ。key」(アウトオブライン・キー)と呼ぶ。keyを使うとよいだろう。今の段階の仕様では、「どちらがよい」という指針があるわけではないので、プロジェクトとしてキーを管理しやすい方を選択すればよい。次のページから、具体的なコードについて見ていく。API」に対応していないため、現在のタイトルに変更しました。お詫びして訂正させていただきます。メールマガジンをご購読ください。申し込みページへITmediaはアイティメディア株式会社の登録商標です。