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

まず外観の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はデータを追加してみた様子である。

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

また、ローカルDBのデータを消すには設定画面の[Security]タブにある[Show Database]ボタンをクリックし、データベースとテーブルの一覧から削除したいものを選んで[Remove]ボタンを押せばよい。FirefoxにローカルDBが実装されたときにも同様の機能が提供されて欲しいと思う。
- 新着記事
- 特集
- ブログ
- 企画特集
-
明日からではもう遅い?!
-
IDaaSって何?
-
企業のリスクマネージメント対策に
-
性能の大幅向上を実現!
-
SoRとSoEをつなぐDX推進の要
-
ネットワークもサービスとして使う
-
ゼロトラストに向けた道のりを支援
-
その先へ
-
デジタルを当たり前と言えるか?
-
コスト・運用の壁を崩す!
-
ハイブリッドクラウドとAI
-
クラウド活用 虎の巻
-
M365 活用のセキュリティ対策
-
漫画で解説:IoTはじめの一歩
-
エンジニアのためのREHL8まとめ
-
いまあるデータで身近な業務をDX
-
DX時代のアプリケーションセキュリティ
-
未来のセキュリティイノベーターへ
-
第4回CNBFミートアップレポート
-
連載!プロが語るストレージ戦略
-
連載!プロが語るストレージ戦略
-
セキュリティの今を知る
-
SECCON2020レポート第二弾!
-
厳しい目が向けられる内部不正
-
いまさら聞けない「PPAP」
-
クラウド時代に理想のセキュリティ
-
部分最適だけではダメ
-
次の一手はこれだ!
-
ビッグデータ最前線!
-
次期自治体ネットワーク強靭化へ
-
データの散在と非常率運用がネック
-
特集:IT最適化への道
-
リモート、オフィス、オンサイト
-
連載!プロが語るストレージ戦略