第６章「イマココ！」

この章のハイライト

この章は、iPhone用のWebアプリケーションを開発する方法について説明します。開発中にも実機を使ったテストができる方法やJavaScriptでGPSを扱う方法などがポイントです。そして、Google Mapsを使った独自の地図を表示する方法についても説明します。Google Maps API V3を使うと、とても簡単にGoogle App Engineを使って地図を表示することができます。

使用する機能

Google App Engine : サーブレット & JSP ｜データストア

その他 : Geolocation API ｜ Google Maps JavaScript API ｜ JavaScript ｜jQuery ｜ JSON

サンプルのURL

位置情報の登録 http://ima-koko.appspot.com/

地図の表示 http://ima-koko.appspot.com/map

サンプル画面

改造

削除機能の追加

登録した位置情報を削除する機能を追加しました。 今回作成、または修正したファイルは以下のようになります。

• • DeleteMarkerServlet.java（新規作成）

  • idパラメータで指定された位置情報をデータストアから削除するサーブレットです。

  • web.xml（修正）

  • DeleteMarkerServletの登録

  • map.js（修正）

  • 画面左のペインに"削除"リンク、ならびにDeleteMarkerServletの呼び出し処理を追加

DeleteMarkerServlet.java

package com.appspot.imakoko;

import java.io.IOException;

import java.util.List;

import javax.jdo.PersistenceManager;

import javax.jdo.Query;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

@SuppressWarnings("serial")

public class DeleteMarkerServlet extends HttpServlet {

@Override @SuppressWarnings("unchecked")

protected void doGet(HttpServletRequest req, HttpServletResponse resp)

throws ServletException, IOException {

String id = req.getParameter("id");

/* 位置情報をデータストアから削除する */

PersistenceManager pm = PMF.get().getPersistenceManager();

try {

Query query = pm.newQuery(Place.class);

query.setFilter("id == " + id);

Place place = ((List<Place>) query.execute()).get(0);

pm.deletePersistent(place);

} finally {

pm.close();

}

}

}

web.xml（抜粋）

<servlet>

<servlet-name>DeleteMarker</servlet-name>

<servlet-class>com.appspot.imakoko.DeleteMarkerServlet</servlet-class>

</servlet>

:

<servlet-mapping>

<servlet-name>DeleteMarker</servlet-name>

<url-pattern>/deletemarker</url-pattern>

</servlet-mapping>

map.js（抜粋）

/* マーカーを追加する */

function addMarker(place) {

/* マーカーを追加する */

var myLatlng = new google.maps.LatLng(place.lat, place.lng);

var marker = new google.maps.Marker({

map : map,

position : myLatlng

});

markersArray.push(marker);

/* 位置情報を追加する */

div = $('<div class="place">' + '<a class="nickname" href="">nickname</a>'

+ ' <span class="message">message</span>'

+ '<div class="elapseTime">' + '<span>elapseTime</span>'

+ ' <a href="#" onclick="javascript:deleteMarker(' + place.id

+ ');">削除</a>' + '</div>' + '</div>');

$('a.nickname', div).attr('href',

'javascript:setCenter(' + place.lat + ',' + place.lng + ');').text(

place.nickname);

$('span.message', div).text(place.message);

$('div.elapseTime span', div).text(place.elapseTime);

$('#places').prepend(div);

/* マーカーを地図の中心に移動する */

setCenter(place.lat, place.lng);

}

/* マーカーを削除する */

function deleteMarker(id) {

var data = {};

data.id = id;

$.ajax({

type : 'GET',

url : '/deletemarker',

data : data,

cache : false,

complete : function() {

/* 削除されたら画面を再描画する */

window.location.reload();

}

});

}