ローカルDBを利用したアドレス帳

　ここでは、ごく簡単なアドレス帳をローカルDBを用いて作成してみる。外観は図1のようにし、名前とアドレスを記入して[追加]ボタンを押すとローカルDBに入力されたデータを登録する。なおFirefox 3ではローカルDBがサポートされていないため、今回はSafari 4.0を使用した。

図1 アドレス帳の外観

　まず外観のHTMLと初期化部分のJavaScriptはリスト1のようになる。最初にローカルDBがサポートされているかを調べ、サポートされている場合にはwondow.openDatabase()を実行する。

リスト1 ページが読込まれる際にDatabaseオブジェクトを取得

  
  
  
    
    
    
  

  

    
ローカルデータベースの使用例

    名前：

    アドレス：

    

    

      
名前
アドレス

    

   
 

　Databaseオブジェクトが取得できたら、SQLを実行してデータベースからアドレスのデータを取り出し、アドレス表を作成する。データはAddressListテーブルに格納されるものとし、もしテーブルが存在しない場合にはこの段階で作成する。getAddressList()関数はそのためのもので、リスト2のようにした。createAddressTable()はSELECT命令に対するコールバック関数で、渡されたSQLResultSetオブジェクトからデータを取得してアドレス表に追加する。

リスト2 AddressListテーブルからデータを取得してアドレス表を構築

    // DBから全アドレスを取得してアドレス表を作成
    function getAddressList() {
      db.transaction(function(tx) {
          tx.executeSql('CREATE TABLE IF NOT EXISTS AddressList(name TEXT, address TEXT)', []);
          tx.executeSql('SELECT * FROM AddressList', [], createAddressTable);
        });
    }

    // アドレス表を作成
    function createAddressTable(tx, rs) {
      for(var i = 0; i < rs.rows.length; i++) {
        var row = rs.rows.item(i);
        addTableRow(row.name, row.address);
      }
    }

    // アドレス表に行を追加
    function addTableRow(name, address) {
      var tableElement = document.getElementById('addressTable');
      // テーブルに追加
      var tr = tableElement.insertRow(tableElement.rows.length);
      var td1 = tr.insertCell(0);
      td1.innerHTML = name;
      var td2 = tr.insertCell(1);
      td2.innerHTML = address;
    }

　[追加]ボタンが押された際には、リスト3のaddAddress()関数が呼び出される。ここではフォームから値を取り出してINSERT文を作成し、AddressListテーブルにデータを追加している。

リスト3 取得したデータをAddressListテーブルに追加

    // DBにアドレスを追加
    function addAddress() {
      name = document.getElementById("namefield").value;
      address = document.getElementById("addressfield").value;
      db.transaction(function(tx) {
          tx.executeSql('INSERT INTO AddressList VALUES(?, ?)', [ name, address ]);
        }, 
        function(error) {
        }, 
        function() {
          addTableRow(name, address);    // アドレス表の更新
        });
    }

　簡単な例だが、一連の流れが掴めただろうか。図2はデータを追加してみた様子である。

図2 アドレスのデータを追加してみた様子

　ちなみにSafariの場合にはエラーコンソールからローカルDBの中身を見ることができる。今回の例では図3のようになっていた。

図3 アドレスのデータを追加してみた様子

　また、ローカルDBのデータを消すには設定画面の[Security]タブにある[Show Database]ボタンをクリックし、データベースとテーブルの一覧から削除したいものを選んで[Remove]ボタンを押せばよい。FirefoxにローカルDBが実装されたときにも同様の機能が提供されて欲しいと思う。