iOS 4.2×localStorageで作るGPSレコーダー (2/5)

2011年03月02日　13時00分更新

文●古籏一浩

ツイートする

データの保存と読み出し

　次に、GPSデータを保存する処理を作成します。今回は本連載の第2回で作成したプログラムと同じ関数名にしてあります。GPSデータを保存するsaveDB関数を用意し、緯度、経度、時間の3つのパラメータを渡します。SQLiteを使った場合に比べて、非常にシンプルなプログラムになっています。

function saveDB(lat, lng, time){
count++;    // 保存するデータ数を増やす
window.localStorage.setItem("jp.ascii.gpsData"+count, lat+","+lng+","+time);    // 位置を記録
window.localStorage.setItem("jp.ascii.gpsDataCount", count);    // 記録データ数を保存
document.getElementById("msg").innerHTML = count+"番目のデータを保存しました";
}

　続いて、localStorageに記録したデータから最新の10件を表示します。記録されているデータの総数は変数countに入っているので、変数countの値を基準にして10件さかのぼって表示すればよいわけです。10件表示する処理はfor()を使って以下のように書きます。

for(var i=count; (i>0 && i>count-10); i--){

　(i>0 && i>count-10)はあまり見慣れない書き方かもしれません。for()は多くの場合、一定回数の繰り返しに使われるので、以下のように書くことがほとんどです（以下は処理を10回繰り返す）。

for(var i=0; i<10; i++){～}

　for()の2番目に指定するのは終了値ではなく終了条件ですので、(i>0 && i>count-10)のように書くと変数iが0より大きく、なおかつ変数iが変数count-10より大きい場合のみ繰り返し処理が実行されます。もし、i>count-10だけを指定すると変数iの値が負数になってしまい、localStorageに記録されていないデータを読み出してしまうことがあります。そこで、(i>0 && i>count-10)のようにして2つの条件を同時に満たした場合のみ繰り返し処理するようにしています。

　localStorageに保存してあるデータはカンマ(,)区切りになっているので、以下のようにsplit(",")を使うと変数dataにデータが分割されて入ります。

var data = window.localStorage.getItem("jp.ascii.gpsData"+i).split(",");

　あとは、緯度、経度、時間をページ上に表示すればできあがりです。

function readDB(){
var txt = "";
for(var i=count; (i>0 && i>count-10); i--){
var data = window.localStorage.getItem("jp.ascii.gpsData"+i).split(",");
var dt = new Date(parseInt(data[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+"秒";
txt = txt + i + " : "+data[0]+","+data[1]+" : "+tmsg+"<br>";
}
document.getElementById("gpsData").innerHTML = txt;
}