Web SQL Databaseに触れるその2

古郡 (2010年8月24日 16:44)
流通システム部

みなさん、こんにちは。
流通システム部の古郡です。

前回の記事でWeb SQL Databaseについて簡単に説明しました。
今回は、実際のコードを使ってもう少し詳しく説明したいと思います。

以下のコードはページのロード時などにWeb SQL Databaseに接続し、
テーブルにデータがあれば取得して画面に表示するJavaScriptのコードです。

//データベース オープン(データベースに接続する)
var db = window.openDatabase("testDb","","testDb","1024");
// テーブルが存在しなければ作成
db.transaction(
  function(tx) {
    tx.executeSql("create table if not exists testTable (id integer primary key autoincrement, name, val)");
  }
);
// データ取得
db.transaction(
  function(tx) {
    tx.executeSql("select * from testTable", [],
      function(tx, rs) {
        // ここで画面表示初期化の処理を呼ぶ
        initTable(); // 実際のコードは省略
        if(rs.rows.length > 0){
          for(var i = 0; i < rs.rows.length; i++){
          var row = rs.rows.item(i);
           // 画面表示の処理を呼ぶ
          addTable(row.id, row.name, row.val); // 実際のコードは省略
          }
        }
      },
      function(tx, ex) {
        alert('Sql Error CallBack');
      }
    );
  },
  function(ex){
    alert('transaction Error CallBack');
  }
);

画面イメージはこちらです。

それでは、詳しいコードの説明に入ります。
まず2行目、ここでは前回紹介したwindow.openDatabaseを使用して、
データベースとの接続を行っています。
今回の例では「testDb」という名前のデータベースに接続しています。
このとき、データベースが存在していない場合は新しく作成されます。

//データベース オープン(データベースに接続する)
var db = window.openDatabase("testDb","","testDb","1024");

戻り値であるオブジェクトはこの後使うので変数に代入します。
本来はこのようなグローバル変数として使用するべきではありませんが、
今回は例ということなので気にしないでください。

4行目では接続したデータベースにテーブルが存在しているか確認し、
テーブルが存在しない場合はテーブルを作成しています。
ここで、前回紹介したtransactionとexecuteSqlを使います。

db.transaction には引数としてトランザクションオブジェクトが渡されます。
このトランザクションオブジェクト(例では変数tx)のexecuteSqlメソッドを使用してSQLを実行します。

// テーブルが存在しなければ作成
db.transaction(
  function(tx) {
    tx.executeSql("create table if not exists testTable (id integer primary key autoincrement, name, val)");
  }
);

10行目以降の処理でテーブルに存在するデータを取得します。
ここで注目すべきは13行目以降の関数です。
これは、実行したSQLが成功したときの処理になります。
この関数には引数として、1つ目の引数にトランザクションオブジェクト、
2つ目の引数に実行結果のオブジェクトが渡されます。

// データ取得
db.transaction(
  function(tx) {
    tx.executeSql("select * from testTable", [],
      function(tx, rs) {
        // ここで画面表示初期化の処理を呼ぶ
        initTable(); // 実際のコードは省略
        if(rs.rows.length > 0){
          for(var i = 0; i < rs.rows.length; i++){
          var row = rs.rows.item(i);
           // 画面表示の処理を呼ぶ
          addTable(row.id, row.name, row.val); // 実際のコードは省略
          }
        }
      },
      function(tx, ex) {
        alert('Sql Error CallBack');
      }
    );
  },
  function(ex){
    alert('transaction Error CallBack');
  }
);

SELECT文の結果は実行結果オブジェクトの「rows」というオブジェクトに格納されます。
「rows」は16行目のようにrows.lengthで結果の件数を取得したり、
18行目のようにrows.item(index)で該当行数の行データを取得することができます。

rows.item(index)で取得した行データは20行目のように、
「行オブジェクト.カラム名」で列データを取得することができます。

          addTable(row.id, row.name, row.val); // 実際のコードは省略

今回はデータベースとの接続、および選択処理を例にWeb SQL Databaseを見てきました。
実際に触ってみる場合は、Google Chromeのデベロッパーツールを使用すると、
テーブルにどのような値が入っているのかを簡単に確認することができるので便利かと思います。

Web SQL Databaseの欠点としては、作成したデータベースを削除する手段が
実際に使用しているファイルを削除するしかないところでしょうか。

私の環境は Windows7 ですが、データベースの削除には
"ユーザフォルダ\AppData\Local\Google\Chrome\User Data\Default\databases"
内のファイルを削除する必要がありました。

前回も少し触れましたがWeb SQL Databaseは仕様凍結状態になっており、
今後の発展が期待できないAPIです。
ただ、デザイナの方などがSQLを学ぶ材料としては非常によくできていると思いますし、
家で簡単に使えるので駆け出しのプログラマの勉強材料としても十分だと思います。

興味を持った方は是非とも触ってみてはいかがでしょうか？

「システム開発ブログ」へのコメントやご意見等ありましたら、ファンページまでお願いします。 Facebook のファンページ

[PR]
他社のシステムも直します。資産を活かしてシステムリフォーム

システムのトラブル解決を承ります。すぐにシステムリフォームを体験できます

システム開発のアイロベックス（東京都新宿区）

/ 流通システム部　  Tweet シェア

システム開発ブログ

最近の記事

カテゴリー

部署

月別アーカイブ

以前の部署別ブログ

検索