GPSテーブルへの情報追加と取得
データベースの準備ができたので、今度はGPSテーブルにデータを追加してみましょう。テーブル作成時と同様、transaction()メソッドでコールバック関数を指定し、コールバック関数内の executeSql()にSQL文を記述します。異なるのはSQL文の内容だけです。gpstableは「緯度、経度、時刻」の順で列を定義しましたので、以下のようなSQL文でデータを追加できます。
INSERT INTO gpstable values (12.3, 45.6, 78.9);
次に保存したデータを取得して表示しましょう。以下のようなSQL文で、GPSテーブルに保存されているすべての行を取得できます。
SELECT * from gpstable;
SQL文の実行方法はテーブル作成（CREATE）やデータの追加（INSERT INTO）と同じですが、実行した結果のデータを取得するにはどうしたらいいのでしょうか？
次に保存したデータを読み出して表示させてみましょう。ここでも transaction() を使います。executeSql() を使ってSQL文を発行し、executeSql() の3番目のパラメーターにデータを読み出したときの処理を関数で指定します。この関数にはいくつかのパラメーターが渡されます。読み出したデータは2番目のパラメーターとして渡されます。
実は、executeSql()メソッドは、データを読み出したときのコールバック関数をexecuteSql(<SQL文>, , <コールバック関数> )のように指定できるのです。読み出したデータは、コールバック関数の第2引数のオブジェクトとして渡されます。データの総数はこのオブジェクトの rows.length で、個々のデータはたとえば最初のデータは rows.item(0).lat、rows.item(0).lng、rows.item(0).timeのように rows.item(番号).名前 の形式で取得できます。読み出したデータを画面に表示するには、for() を使ってデータを1行ずつ取り出し、HTMLとして加工すればいいわけです。
ここまでをコードにしたのがサンプル05です。画面にある「SaveDB」のリンクをタッチし、「DBレコード読み込み」のリンクをタッチすると保存したデータがすべて表示されます。
この状態でSaveDBのリンクをタッチすると...（左）データが保存される（中央）。DBレコード読み込みボタンをタッチすると保存したすべてのデータ（レコード）が表示される（右）
●サンプル05のソースコード
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>Safari + Database</title>
<style type="text/css"><!--
h1 { font-size:16pt; }
--></style>
<script type="text/javascript"><!--
// データベース作成
var myDB = openDatabase("testDB");
// ページが構築されたら処理を行う
window.onload = function(){
var ele = document.getElementById("msg");
myDB.transaction(
function(tx){
tx.executeSql('CREATE TABLE gpstable(lat REAL, lng REAL, time REAL );');
},
function (err){
if (err.code == 1) {
ele.innerHTML = "データベースtestDBはすでにあります";
}else{
ele.innerHTML = "データベースエラーです : "+err.code;
}
},
function (){ ele.innerHTML = "testDBを作成しました"; }
);
}
// データベースへの保存
function saveDB(){
myDB.transaction(
function(tx){
// 3つのデータを書き込む
tx.executeSql('INSERT INTO gpstable values (12.3, 45.6, 78.9)');
},
function(err){ alert("データベースエラー : "+err.code); },
function (){ document.getElementById("msg").innerHTML = "データを保存しました" }
);
}
// 保存してあるデータを読み出す
function readDB(){
myDB.transaction(
function(tx){
// 全てのデータを読み出す
tx.executeSql('SELECT * from gpstable;',
[ ],
function (tx, rs){
var txt = "";
// データの数(rs.rows.length)だけ繰り返し読み出す
for (var i=0; i<rs.rows.length; i++){
var row = rs.rows.item(i);
txt = txt + row.lat+","+row.lng+" : "+row.time+"<br>";
}
// 画面に表示する
document.getElementById("msg").innerHTML = txt;
});
}
);
}
</script>
</head>
<body>
<h1>Databaseへの書き込みと読み出し</h1>
<a href="#" onclick="saveDB();return false;">SaveDB</a><br>
<a href="#" onclick="readDB();return false;">DBレコード読み込み</a><br>
<div id="msg"></div>
</body>
</html>
