「日経ソフトウェア2013年2月号」の「HTML5スマホアプリ開発入門」を勉強してみた。

今回は「Web SQL Database API」を使ったデータベースアプリの作り方の紹介です。

日経ソフトウエア 2013年 02月号 [雑誌]

日経BP

「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>