flashcast：フリーで働くITエンジニア集団のブログ: iPhone OS 3.0のSafariでGPS機能を使ったWeb Applicationを作る！（sqlite保存編）の続きです。
前回は表示されている住所の吹き出しの中に、「save」リンクを設け、その住所をSQLiteに保存するようにしましたので、その住所を見るための履歴画面を作ります。
htmlの見た目は極めて単純なものにします。この時点ではかっこよさとかは気にしません。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=320px, user-scalable=no" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <title>iPhone GPS Sample</title> </head> <body> <div id="header"> <div id="title">Histories</div> <a href="../sqlite/">back</a> </div> <div id="main"></div> </body> </html>
データを検索して、1件以上あれば、画面上に表示します。
function initialize() {
try {
db.transaction(
function(transaction) {
transaction.executeSql("SELECT dat FROM location ORDER BY id DESC", [],
setLocations,
function(error) {
alert("initialize:" + error.message);
}
);
},
function(error) {
alert("initialize:" + error.message);
}
);
}
catch (error) {
alert("initialize:" + error.message);
}
}
function setLocations(transaction, resultSet) {
var html = "";
for (i = 0; i < resultSet.rows.length; i++) {
var address = tonosamart.evalJson(resultSet.rows.item(i).dat);
if (address) {
html += "<div><p>" + address.Placemark[0].address + "</p></div>";
}
}
$("#main").html(html);
}
あれ？うまくいきません。
よく見ると、JSONからオブジェクトに変換するところの正規表現でエラーになってます。
var address = tonosamart.evalJson(resultSet.rows.item(i).dat);
JSONの最後の部分に、ナゾのフィールドがあります。
“__shared”:undefined}”
これが正規表現に引っかかってました。何に使うんでしょう・・・
ナゾですが、値が入ってきた時のことも考慮して、SQLiteに保存する前に、
if (address.__shared == undefined) {
address.__shared = "";
}
このような処理を入れることにしました。
やっと、うまくいきました。画面はこんな感じす。
次に、地図の画面から履歴画面に遷移できるようにします。
Google Mapsのカスタムマップコントロールを使います。
コントロール – Google Maps API – Google Code
履歴画面にリンクするだけのものなので、単純なものにします。
function LocationControl() {
}
LocationControl.prototype = new GControl();
LocationControl.prototype.initialize = function(map) {
var container = document.createElement("div");
var control = document.createElement("a");
control.href = "../history/";
this.setButtonStyle_(control);
container.appendChild(control);
control.appendChild(document.createTextNode("histories"));
map.getContainer().appendChild(container);
return container;
};
LocationControl.prototype.getDefaultPosition = function() {
return new GControlPosition(G_ANCHOR_TOP_LEFT , new GSize(5, 5));
};
LocationControl.prototype.setButtonStyle_ = function(button) {
button.style.color = "#000000";
button.style.backgroundColor = "#FFFFFF";
button.style.cursor = "pointer";
};
画面はこんな感じです。
ここまでで、こんなのができました。もし良かったら、試してみてください！
iPhone GPS Sample