古籏一浩のJavaScriptラボ ― 第2回

iPhoneがJavaScript＋SQLiteでGPSレコーダーに！

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

古籏一浩

ツイートする

●サンプル07のソースコード


<!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 + GPS + Database</title>
<style><!--
#pos, #msg { font-size:9pt; }
#gpsData { font-size:8pt;line-height:110%; }
--></style>
<script type="text/javascript" src="gears_init.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript"><!--
// GPSデータ保存用データベースを開く（記録されたデータベースが存在することが必須）
var myDB = openDatabase("gpsDB","1.0","GPSデータ");
var db = new Array(); // 配列にまとめて読み出す
var maxCount = 0; // 記録されたデータの最大数を入れる変数
// データベースからGPSデータを読み出し
function readDB(){
    myDB.transaction(
        function(tx){
            tx.executeSql('SELECT * from gpstable;',
            [ ],
            function (tx, rs){
                maxCount = rs.rows.length;  // 記録された数（最大値）を変数maxCountに入れる
                for (var i=0; i<maxCount; i++){
                    var row = rs.rows.item(i);
                    db[i] = [row.lat, row.lng, row.time]; // 配列に読み出した情報を入れる
                }
            });
        },
        function(){
            document.getElementById("pos").innerHTML = "データベース読み出しエラー";
        },
        function(){
            // データベース内のデータを全て読み終わった時の処理
            setTimeout("moveGMap()", 100);  // 0.1秒ごとにマップの更新を行う
        }
    );
}
// ページが読み込まれたときの処理
window.onload = function(){
    // グーグルマップ ver 3の構築と表示
    var defPos = new google.maps.LatLng(36, 137); // 座標値はどこでもよい
    gmap = new google.maps.Map(document.getElementById("map_canvas"), {
        zoom : 17,
        center : defPos,
        mapTypeId : google.maps.MapTypeId.ROADMAP
    });
    gmarker = new google.maps.Marker({
        positon : defPos,
        map:gmap,
        icon : "./arrow.png"
    });
    readDB(); // データベースから記録された座標値を読み出す
    count = 0;
}
// マップ移動表示
function moveGMap(){
    var lat =  db[count][0];
    var lng =  db[count][1];
    var dt = new Date(db[count][2]);    // 記録された日付オブジェクト生成
    var M = dt.getMonth() + 1;  // 月を求める
    var D = dt.getDate(); // 日にちを求める
    var h = dt.getHours();  // 時を求める
    var m = dt.getMinutes();    // 分を求める
    var s = dt.getSeconds();    // 秒を求める
    // 緯度、経度と時間を組み合わせた文字列を生成
    var tmsg = M+"月"+D+"日 "+h+"時"+m+"分"+s+"秒";
    // 読み出した緯度、経度をグーグルマップ上に反映
    var currentPos = new google.maps.LatLng(lat, lng);
    gmap.set_center(currentPos);
    gmarker.set_position(currentPos);
    document.getElementById("pos").innerHTML = (count+1)+"/"+maxCount+" : " + lat+","+lng+"<br>"+tmsg;
    // 配列からの読み出す場所（要素番号）を1つ増やす。最大値未満の場合だけ繰り返す
    count++;
    if (count < maxCount) { setTimeout("moveGMap()", 250); }
}
// --></script>
</head>
<body>
<div id="map_canvas" style="width:90%;height:75%"></div>
<div id="pos">lat, lng</div>
</body>
</html>

エラーが発生したときには……データベースの削除方法

　サンプルプログラムを実行した際、何らかの原因でエラーが発生した場合には以下の手順で一度データベースを手動で削除してから再度テストしてみてください。


（1）設定のアイコンをタッチする		（2）Safariの欄をタッチする


（3）データベースが作成されている場合はデータベースという欄があるのでタッチする		（4）データベース一覧が表示されるので右上にある「編集」ボタンをタッチする