このページの本文へ

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

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>


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

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

iPhone GPS

(1)設定のアイコンをタッチする

(2)Safariの欄をタッチする

iPhone GPS

(3)データベースが作成されている場合はデータベースという欄があるのでタッチする

(4)データベース一覧が表示されるので右上にある「編集」ボタンをタッチする

iPhone GPS

(5)削除したいデータベース名の左側にある(-)をタッチする

(6)削除ボタンが表示されるのでタッチする


■もっと勉強したい人のための参考書(Amazon.co.jp)

前へ 1 2 3 4 5 次へ

この連載の記事

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

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

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