株式会社ライブキャストロゴ 株式会社ライブキャスト

iPhone OS 3.0のSafariでGPS機能を使ったWeb Applicationを作る！（sqlite保存編）

2009年7月23日 iPhone, javascript, SQLite, Stray Child
シェア

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);
  }
 }

画面はこんな感じです。

これで、住所をメモる必要はなくなりました。
次は、保存した住所を見る仕組みを作りたいと思います！

関連記事

»
«