このページの本文へ

iPhoneがJavaScript+SQLiteでGPSレコーダーに! (3/5)

2009年07月13日 16時09分更新

文●古籏一浩

  • この記事をはてなブックマークに追加
本文印刷

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).latrows.item(0).lngrows.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>


この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

Webディレクター江口明日香が行く