「Gear 5」でローカルデータベースへの保存部分をクリアする
位置情報の読み出し部分は簡単に移植できましたが、問題は取得した位置情報をローカルデータベースへ保存する部分です。HTML 5のデータベースストレージとAndroidのGearsとではオブジェクトやメソッドが違うので、当然ながらそのままでは動きません。
ありがたいことに、HTML5のAPIをGearsでエミュレートする「Gear 5」というライブラリーが白石俊平氏によって公開されています。Gear 5は、HTML 5のデータベースストレージの処理にも対応しており、<script>タグでライブラリーを読み込むだけで、iPhone 3GのSafari用に書いたプログラムがそのままAndroid携帯で動作します。また、最新版のGear 5はGPS関連のメソッドもiPhone 3Gと同じ階層にマッピングするため、Gear 5を使えばサンプル01で追加した「if(!navigator.geolocation)～」の行も不要になります。
実際に組み込んだものがサンプル02です。実行すると下の画面のように確認のダイアログが表示されます。
OKボタンを押してGPSデータの取得、ローカルデータベースに保存できるようにする
しばらくするとデータベースが作成され、Googleマップの画面と現在位置が表示されます。ごくわずかな作業で、iPhone 3G向けのスクリプトがAndroid携帯でも動作するようになりました。
現在位置が表示される。残念ながら場所によっては精度があまりよくないようだ
●サンプル02のソースコード
<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>GPS iPhone 3G and Android</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="gear5-0.2.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データ");
myDB.transaction(
function(transaction){
transaction.executeSql('CREATE TABLE IF NOT EXISTS gpstable(lat REAL, lng REAL, time REAL );');
},
function (err){
document.getElementById("msg").innerHTML = "データベースエラーです : "+err.code;
},
function (){ document.getElementById("msg").innerHTML = "新規にデータベースgpsDBを作成しました" }
)
// データベースにGPSデータを保存
function saveDB(lat, lng){
myDB.transaction(
function(transaction){
var time = parseInt((new Date()).getTime());
transaction.executeSql('INSERT INTO gpstable values ('+lat+','+lng+','+time+')');
},
function(err){ document.getElementById("msg").innerHTML = "DB Error : "+err.code; }
);
}
// データベースからGPSデータを読み出し最新10件を表示
function readDB(){
myDB.transaction(
function(transaction){
transaction.executeSql('SELECT * from gpstable order by time desc limit 10;',
[ ],
function (transaction, rs){
var txt = "";
for (var i=0; i<rs.rows.length; i++){
var row = rs.rows.item(i);
var dt = new Date(row.time);
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+1) + " : "+row.lat+","+row.lng+" : "+tmsg+"<br>";
}
document.getElementById("gpsData").innerHTML = txt;
});
}
);
}
// ページが読み込まれたときの処理
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"
});
navigator.geolocation.watchPosition(update);
setInterval("readDB()", 5 * 1000); // 5秒に一回データベース内のGPSデータを表示する
}
// GPSデータを受信した時の処理
function update(position){
var lat = position.coords.latitude;
var lng = position.coords.longitude;
saveDB(lat, lng); // 現在地をデータベースに保存
var currentPos = new google.maps.LatLng(lat, lng);
var acc = position.coords.accuracy; // 誤差を表示する
gmap.set_center(currentPos); // 地図の中心を現在地にする
gmarker.set_position(currentPos);
document.getElementById("pos").innerHTML = lat+","+lng+",誤差:"+acc;
}
// --></script>
</head>
<body>
<div id="map_canvas" style="width:90%;height:75%"></div>
<div id="pos">lat, lng</div>
<div id="gpsData"></div>
<div id="msg"></div>
</body>
</html>
◆
GearsとGear 5ライブラリーを使えば、iPhone 3Gで作成したコードがほぼそのままAndroid携帯で動くため、移植の手間が軽減されます。iPhone 3G／Android携帯の両方に対応したWebアプリケーションやWebサイトを、これまで以上に手軽に作成できるでしょう。この機会に試してみてはいかがでしょうか。
Gearsに保存したデータを削除したい場合は……
保存したデータを削除したい場合は、ページが表示されている状態で[menu]ボタンを押します。Gearsを有効にした時と同じように「その他」→「設定」を選択します。設定画面の下にGearsの設定があるので選択します。
Gearsの設定を選択する
するとデータを保存したサイトのドメイン名が表示されます。ドメイン名をタッチします。「このサイトをGearsから削除」を選択すれば、保存されたデータが削除されます。GPSデータだけ必要でローカルデータベースへの保存が不要な場合なども、この画面で設定できます。
データを保存したサイトのドメイン名を選んで削除を選択すればローカルに保存したデータを削除できる
