「日経ソフトウェア2013年2月号」の「HTML5スマホアプリ開発入門」を勉強してみた。
今回は「Web SQL Database API」を使ったデータベースアプリの作り方の紹介です。
![日経ソフトウエア 2013年 02月号 [雑誌]](https://m.media-amazon.com/images/I/61vhz6jolaL._SL500_.jpg "日経ソフトウエア 2013年 02月号 [雑誌]")
「Web SQL Database API」は、HTML5（W3Cが策定）の仕様から外されてしまっている為か、Googleさんで検索してみても、あまり情報が出て来ないのですが、この記事によるとGoogleChromeやAppleSafariなどのブラウザに実装されてて問題なく動くとのことで、勉強しといても損はないかなと思いつつ読んでみました。
記事に載っていたサンプルコードを参考にしつつ、ちょいと修正したものを書いておこうと思います。
<!DOCTYPE html><html lang="ja">
<head>
<meta charset="utf-8" />
<script>
<!-- ブラウザがWeb SQL Databaseに対応しているかどうかを判定 -->
window.onload = function () {
if (window.openDatabase == undefined) {
alert("Web SQL Databaseに対応していません");
return;
}
<!-- データベースをオープンしてデータベースオブジェクトを取得 -->
var dbName = 'test';
var displayName = 'TestDB';
var dbSize = 1024 * 100;
var db = openDatabase(dbName, '', displayName, dbSize);
<!-- データベースオブジェクトのtransactionメソッドのコールバック関数でexecuteSqlメソッドを実行 -->
db.transaction(
function (tr) {
tr.executeSql("CREATE TABLE IF NOT EXISTS persons(name TEXT, fName TEXT, age INTEGER)");
tr.executeSql("INSERT INTO persons(name, fName, age) VALUES('シンジ', '碇', '14')");
tr.executeSql("INSERT INTO persons(name, fName, age) VALUES('ゲンドウ', '碇', '48')");
tr.executeSql("INSERT INTO persons(name, fName, age) VALUES('レイ', '綾波', '14')");
tr.executeSql("INSERT INTO persons(name, fName, age) VALUES(?,?,?)", ['ユイ','碇',27]);
}
);
var select = document.querySelector('#select');
var textBox1 = document.querySelector('#textBox1');
<!-- SELECTボタンがクリックされた時に実行する処理 -->
select.addEventListener('click',
function() {
db.transaction(
function (tr) {
tr.executeSql("SELECT * FROM persons where fName=?", [textBox1.value],
function(tr, rs) {
for (var i=0; i<rs.rows.length; i++) {
var row = rs.rows.item(i);
alert(row.fName + ' ' + row.name + ':' + row.age + '歳');
}
}
);
}
);
}, false
);
}
</script>
</head>
<body>
<input type="text" id="textBox1" placeholder="family name">
<input type="button" id="select" value="SELECT">
</body>
</html>
