[HTML5] Indexed DBで検索結果をキャッシュする #1

Indexed Database API が2013年4月に、W3C Candidate Recommendation（勧告候補）となりました。ここから大きく仕様の変更がかかる可能性も低くなり、実際のアプリケーション開発で使用するにあたっての敷居は、ぐっと下がったと言えます。今回は、Indexed DB を使用して、よくある業務アプリの一覧画面を例に、検索結果をローカルデータベースにキャッシュし、高速でページングやソートなどを行うサンプルを作りながら、Indexed DB の使い方を紹介したいと思います。

Indexed DBとは

概要

Indexed Database API は、key-value ストア型のデータベースをローカルに構築する仕組みです。Chrome・Firefox・IE の執筆時点での最新版は、いずれも Indexed Database API を実装しています。ベンダープレフィクスも不要で、基本的には同じソースコードで動きます。

各ブラウザのサポート状況

IE	Firefox	Chrome	Safari	Android Browser	Crome(Android)	Safari(iOS)
10.0以降	16.0以降	24.0以降	-	4.4以降	30.0以降	-

ベンダープレフィクス抜きで動作するバージョンです。現状では、モバイル端末におけるサポート状況が弱いようです。Safari が非対応なのが厳しいですね。

Web Storage との違い

ローカルにデータを保持する仕組みとしては、Indexed DB 以外にも Cookie と Web Storage があります。Cookie と Web Storage の違いについては Web Storage を解説している記事に譲るとして、ここでは Indexed DB と Web Storage の違いについて軽く触れておきます。

複数のオブジェクトストアを使用できる

Web Storage と Indexed DB は、どちらも key-value ストア型の容れ物である点については同じです。Web Storage では、ドメイン＋ポート番号を合わせた一つのオリジンごとに一つのオブジェクトストアを使えますが、Indexed DB では、いくつでもデータベースとオブジェクトストアを定義できます。
（ただし、デフォルトで利用可能な容量については制限があり、Chrome では共に 5MB となります。）

非同期処理

Web Storage へのアクセスは、同期処理で行われます。プログラムは簡潔なもので済みますが、処理の間、画面の動きやユーザーの操作はブロックされてしまいます。一方、Indexed DB へのアクセスは、操作の要求に対して完了次第コールバックが呼び出される非同期処理となります。プログラムは若干複雑になりますが、大量のデータを扱っても他の処理がブロックされることはありません。

インデックス

Indexed DB は、その名前が示す通り、オブジェクトストアにインデックスを作成して高速にデータの検索や並び替えを行う事ができます。あえて Web Storage ではなく Indexed DB を選ぶにあたっての、最大の理由と言っても良いでしょう。

トランザクション

Indexed DB では、データの読み書きはトランザクションを介して行います。トランザクションの途中でエラーなどが起こった場合には自動でロールバックされます。任意のタイミングでロールバックさせることも、もちろん可能です。

Web SQL Database について

ローカルにデータベースを構築するもう一つの仕組みとして、Web SQL Database があります。SQL を使用して複雑なデータ構造をローカルに構築できるもので、Webkit 系ブラウザには実装されていますが、W3C によって正式に廃止されてしまいました。様々な事情があったのだと思いますが、選択肢が減ったのは残念なことですね。

設計

今回のサンプルでは、以下の機能を実装します。

• 検索結果を模した架空の個人情報テストデータ1000件をダウンロードする
• テストデータを Indexed DB のオブジェクトストアに保存する
• オブジェクトストアからデータを20件ずつ読みだしてリスト表示する
• ページング、ソート項目の変更を行う
• 検索結果のフィルタを行う
• リスト行のクリックで詳細データを表示する

Indexed DBで検索結果をキャッシュする #2 へ続きます。