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

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

文●古籏一浩

ツイートする

データの消去

　GPSデータは高頻度で記録されるので、localStorageがすぐにいっぱいになってしまう場合があります。また、記録されたデータを消去したい場合もあるでしょう。

　localStorageは、clear()メソッドを使って同一オリジンに記録されたデータを消去できます。HTMLに消去ボタンを追加し、ID名を指定します。今回は以下のように「clearButton」というID名を付けました。

<input type="button" value="データを全て消去" id="clearButton">

　ボタンがクリックされたらwindow.localStorage.clear()としてデータをすべて消去します。clear()メソッドの消去はオリジン単位なので、個別にデータを消したい場合は困るかもしれません（URL単位でも処理できるようなオプションがあれば便利ですが……）。ちなみに、PC版のSafariではデバッガーを使って保存したデータを個別に消去できます。

　GPSデータを消去したら記録しているデータ数も0にし、localStorageに保存します。その後、最新の10件を表示すればできあがりです。

document.getElementById("clearButton").addEventListener("click", function(){
window.localStorage.clear();    // 同じオリジンのデータを消去【要注意】
document.getElementById("msg").innerHTML = "データを消去しました";
count = 0;
window.localStorage.setItem("jp.ascii.gpsDataCount", count);    // 記録データ数を保存
readDB(); // データベースからデータを読み出し表示
}, true);

　GPSデータを受信し、Googleマップに表示する処理は連載の第2回を参照してください。なお、現在のGoogle Maps API v3ではset_center()はsetCenter()に、set_position()はsetPosition()に変更されています。

　ここまでをまとめたプログラムがサンプル01です。

■サンプル01[HTML]

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta charset="utf-8" />
<title>Safari + GPS + localStorage </title>
<style type="text/css">
h1 { font-size:16pt; }
#pos, #msg { font-size:9pt; }
#gpsData { font-size:8pt;line-height:110%; }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
// 記録数を読み出す
var count = window.localStorage.getItem("jp.ascii.gpsDataCount") || 0;  // 保存してあるデータ数を読み出す。なければ0
alert("データは"+count+"個記録されています");
// ローカルストレージにGPSデータを保存（順序は1～）
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+"番目のデータを保存しました";
}
// ローカルストレージからGPSデータを読み出し最新10件を表示
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;
}
// ページが読み込まれたときの処理
window.addEventListener("load", function(){
readDB(); // データベースからデータを読み出し表示
// グーグルマップ 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"
});
navigator.geolocation.watchPosition(update,GPSerror,{
enableHighAccuracy: true    // 高精度で取得
});
// 消去ボタンが押された場合の処理
document.getElementById("clearButton").addEventListener("click", function(){
window.localStorage.clear();    // 同じオリジンのデータを消去【要注意】
document.getElementById("msg").innerHTML = "データを消去しました";
count = 0;
window.localStorage.setItem("jp.ascii.gpsDataCount", count);    // 記録データ数を保存
readDB(); // データベースからデータを読み出し表示
}, true);
}, true);
// GPSデータを受信した時の処理
function update(position){
var lat = position.coords.latitude;
var lng = position.coords.longitude;
var time = (new Date()).getTime();  // 1970年1月1日からの経過ミリ秒（timestampは使わず）
saveDB(lat, lng, time);   // 現在地をデータベースに保存
readDB(); // データベースからデータを読み出し表示
var currentPos = new google.maps.LatLng(lat, lng);
var acc = position.coords.accuracy;   // 誤差を表示する
gmap.setCenter(currentPos);   // 地図の中心を現在地にする
gmarker.setPosition(currentPos);
document.getElementById("pos").innerHTML = lat+","+lng+",誤差:"+acc+"m";
}
// GPSデータが受信できない場合のエラー処理
function GPSerror(err){
document.getElementById("msg").innerHTML = "位置を検出できません";
}
</script>
</head>
<body>
<div id="map_canvas" style="width:90%;height:300px;border:1px solid black;"></div>
<div id="pos">lat, lng</div>
<div id="msg"></div>
<form>
<input type="button" value="データを全て消去" id="clearButton">
</form>
<div id="gpsData"></div>
</body>
</html>