pirosikick's diary

君のハートにunshift

HTML5 Web Database まとめ

最近WebDatabaseを使ってWebアプリを作る機会があったので、その時に学習したことをまとめます。

開発するならSafariがおすすめ

現在、Google ChromeSafariがWebDatabaseに対応していますが、Safariで開発した方が楽な気がします。なぜならば、Safariには「Webインスペクタ」という機能があるからです。
この機能はFirefoxでいうならばFirebugみたいなものなのですが、WebDatabaseやLocalStorage・SessionStorageの中身を見ることができ、さらに中身を書き換えることや実際にSQLを実行することもできます。

Webインスペクタの表示

「Webインスペクタ」はデフォルトでメニューに表示されないように設定されていますので、macの場合だと「環境設定」>「詳細」>「メニューバーに”開発”メニューを表示する」にチェックを入れる>メニューバーの”開発”を開く>「Webインスペクタを表示」でWebインスペクタを表示できます。今回は特に「ストレージ」の部分を使います。
f:id:pirosikick:20100821000959p:image

データベース作成&読み込み

データベースを作成または読み込むには「openDatabase」関数を使います。

// openDatabase(データベース名, "1.0", ディスプレイ名, サイズ [, コールバック関数]);
var db = openDatabase("sample", "1.0", "Sample database", 1024 * 1024);

「ディスプレイ名」は直接処理には関係ありませんがWebインスペクタなどで見たときに表示されるデータベースの名前を指定します。「サイズ」はバイトで指定します。最大サイズはブラウザに依存します。上記を実行するとインスペクタに「sample」データベースが表示されます。

f:id:pirosikick:20100821000229p:image
openDatabaseの返り値はDatabaseオブジェクトで、SQLを実行したりするのに使います。

トランザクション実行

テーブルの作成や検索などでSQLを実行するにはトランザクションを実行します。

// db.transaction(トランザクション関数, トランザクション成功時コールバック関数, トランザクションエラー時コールバック関数);
db.transaction(
    function (t) {
        t.executeSql(〜);
    },
    function () {
        // success
    },
    function (error) {
        // error
    }
);
SQL実行

SQLの実行は以下のように行ないます。テーブルを作ります。

db.transaction(
    function (t) {
        t.executeSQL("CREATE TABLE IF NOT EXISTS test_table (id INTEGER, name TEXT)");
    }
);

f:id:pirosikick:20100821003338p:image
できてますね。

思ったより長くなりそうなので今日はここまででー。

参考にしたページ