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

関連記事

Trackback URL