クジラ机ブログ
HTML5のIndexedDBで郵便番号検索を作ってみた

HTML5のIndexed Database API(IndexedDB)を利用して、郵便番号検索を作ってみました。

仕様が今の時点(2013年3月)で策定中ですが、Chrome/Firefox/IEと主要なブラウザでは既にプリフィックスなしで利用できるようになっています。資料が少ないのと古い仕様のままの資料も多くちょっと混乱しました。加えて、SQLを使わない形式のデータベース(NoSQL)で作るので、ちょっと工夫が必要です。

とは言え、少し悩む部分はありましたが、一応、IndexedDBの使い方を一通り楽しむことができました。ソースコード、参考にしてみてください。

IndexedDBの特徴 *

  • ローカルにDBを保存するのでオフラインで可能
  • キー／バリュー型（SQLを使わないDB）
  • Web SQL Databaseは仕様が廃止なので、今後はこちらが主流
  • スキーマレス、JSのオブジェクトを臨機応変に突っ込める
  • インデックス・トランザクション機能がある
  • オリジン単位でデータを管理する
  • まだワーキングドラフトの段階だが、ブラウザのプリフィックスはとれた

Indexed Database APIの実装状況 *

ブラウザ

実装されたバージョン

IE

10.0

Firefox

16.0

Chrome

24.0

悩んだ点など *

今回、以下のようなオブジェクトをDBに突っ込んでいます。

[
  {"zip":"1020072","ken":12,"shi":"千代田区","cho":"飯田橋"},
  {"zip":"1020082","ken":12,"shi":"千代田区","cho":"一番町"},
  {"zip":"1010032","ken":12,"shi":"千代田区","cho":"岩本町"},
  〜省略〜
]

都道府県(ken)のフィールドを数字にしました。というのは、住所から郵便番号を探す部分で、都道府県のフィールドにキーをはって、そこからデータを取り出そうとしたのだけど、どうもうまく行きませんでした。悩んだ末に、ダメもとで都道府県のフィールドを数値に置き換えてやってみたら、なんと、正しくデータを取り出せました。Chrome/Firefoxともにダメだったので、バグというわけでも無さそうです。何が理由でしょうか。

あと作ってみての感想なのですが、せっかくIndexedDBにはオブジェクトがそのまま保存できるので、もう少し、データのもたせ方を工夫して作ればよかったなぁと思いました。NoSQLはまだ経験値不足なので、まだまだ修行が必要です。

作る過程で参考にしたページ *

以下の順に読んでいくと理解しやすいです。