HTML 5のクライアントサイド・データベースストレージ

杉山貴章(オングス)
2008-12-16 17:00:00
  • このエントリーをはてなブックマークに追加
最新特集【一覧】

SQLでより複雑なデータの保存が可能に

 前回まではHTML 5で新しく導入される予定のDOM Storageを使ってローカル側にデータを保存する方法を紹介してきた。HTML 5にはもうひとつ、クライアントサイド・データベースストレージと呼ばれる機能が用意される(長いのでここではローカルDBと記載することにする)。これはローカル側のリレーショナルデータベースに、ウェブアプリケーションで利用するデータを保存し、SQLでアクセスできるというもの。DOM Storageはキーと値のセットという形でしかデータを保持できなかったが、ローカルDBを使えばより複雑な構造を持ったデータを保存することが可能となる。

 残念ながら、Firefox 3ではまだこの機能はサポートされていない。FirefoxではFirefox 2の頃よりローカル側にデータを保存するデータベース機能が用意されていたが、これは拡張機能のためのものであり、ウェブアプリケーションからアクセスすることはできない。とは言えFirefoxはHTML 5に準拠させるという方針で開発されているため、近い将来サポートされることになるだろう。

 さて、HTML 5ではこのローカルDBを扱うオブジェクトとして「Database」というオブジェクトが新しく定義された。データの格納や取り出しは、1.まずこのDatabaseオブジェクトを取得し、2.トランザクションを開始した上で、3.SQLを実行する、という手順で行う。そのために、それぞれ次のようなメソッドが用意されている。

  1. openDatabase() - データベースを開いてDatabaseオブジェクトを取得する
  2. transaction() - トランザクションを開始する
  3. executeSql() - SQLを実行する

 openDatabase()はWindowオブジェクトが持つメソッドである。transaction()はopenDatabase()によって取得したDatabaseオブジェクトに対して使用することでトランザクションを開始し、esecuteSql()によるSQLの実行を可能にする。

 なお、ローカルDBはDOM Storageと同様にsame-origin-policyに則って同じOriginを持つサイト間でのみ共有される。次回からは各メソッドの具体的な使用方法を解説する。

  • 新着記事
  • 特集
  • ブログ