flashcast：フリーで働くITエンジニア集団のブログ: iPhone OS 3.0のSafariでGPS機能を使ったWeb Applicationを作る！（iPhoneでテスト編）の続きです。
いままでのサンプルアプリは住所を表示するだけなので、もう一工夫して、その住所を保存できるようにしたいと思います。
保存先は、tonomemoと同じように組み込みデータベースのSQLiteにします。
まず、テーブル構造を考えます。
緯度と経度と・・・
ん。よく考えるとGoogle Maps APIの戻り値は、JSONオブジェクトなので、とのさまのflashcast：フリーで働くITエンジニア集団のブログ: ipod touch用のWeb Applicationを作成してみる（JSONについて）のアイデアが使えそうです。
JSONを、まんま1カラムにぶち込みます。
これは非常にいいアイデアです。
今までのサンプルでは、JSONオブジェクトの一部の情報しか使用していませんが、今後、機能拡張した場合にもテーブル設計を見直す必要はありません。また、Google Maps APIの仕様が変わっても、柔軟に対応できるはずです。
$(document).ready(function() {
var isDbConnect = true;
try {
db = openDatabase('iPhone GPS Sample', '0.9', 'iPhone GPS Sample');
db.transaction(
function(transaction) {
transaction.executeSql('CREATE TABLE IF NOT EXISTS location (id INTEGER PRIMARY KEY, dat TEXT, locale TEXT)');
},
function(error){
isDbConnect = false;
}
);
}
catch (error) {
isDbConnect = false;
}
finally {
$("body").attr("onload", initialize(isDbConnect));
}
});
画面の方は、住所が表示されている吹き出しの中に、「save」リンクを作ります。
function showAddress(response, latlng, isDbConnect) {
if (response != null && response.Status.code == 200) {
map.clearOverlays();
place = response.Placemark[0];
marker = new GMarker(latlng);
map.addOverlay(marker);
marker.openInfoWindowHtml('<b>Address:<¥/b>' + place.address +
((isDbConnect) ? "<br ¥/><a href='javascript:saveLocation();'>save<¥/a>" : ""));
address = response;
}
else {
alert("Not found.");
}
}
ここでは、SQLiteが利用できないブラウザも考慮して、DB接続できない場合は「save」リンクを出さないようにしています。
「save」リンククリック時の処理は、以下のようになります。
function saveLocation() {
try {
db.transaction(
function(transaction) {
transaction.executeSql('INSERT INTO location(dat, locale) VALUES(?, ?)', [tonosamart.obj2Json(address), (new Date()).toLocaleString()]);
},
function(error){
alert("saveLocation:" + error.message);
},
function(){
map.clearOverlays();
alert("saveLocation complete!");
}
);
}
catch (error) {
alert("saveLocation:" + error.message);
}
}
画面はこんな感じです。
これで、住所をメモる必要はなくなりました。
次は、保存した住所を見る仕組みを作りたいと思います！