携帯の醍醐味！ 位置情報とGoogleマップを使うには：クラウドとフレームワークで超簡単ケータイ開発（3）（3/3 ページ）

» 2011年03月10日 00時00分 公開
[森俊夫，＠IT]
前のページへ 1|2|3 　　　　　　

Google Static Maps APIで地図画像を表示

　それでは、「Google Static Maps API version2」を使用して、Googleマップを表示してみましょう。

　まず「com.hayato.gpstweet.service.TwitterService」を以下のように編集します。

　TwitterService クラスに地図のデフォルトズームレベルを表す定数「DEFAULT_MAPZOOM」を作成します。次に、GoogleマップのURIを作成するgetMapURI()を作成します。引数に緯度、経度、ツイートの位置情報（markers形式）、ズームレベルを指定します。

……【略】……
    // 地図のデフォルトズームレベル
    public static final Integer DEFAULT_MAPZOOM = 14;
 
……【略】……
 
    // Googleマップの画像URI作成
    public String getMapURI(Double latitude, Double longitude,String tweetLocation, Integer mapzoom) {
        Object[] data = new String[]{latitude.toString(),longitude.toString()};
        String mapURI = MessageFormat.format(
                "http://maps.google.co.jp/maps/api/staticmap?center={0},{1}" +
                "&zoom=" + mapzoom +
                "&size=300x300&mobile=true&sensor=false" +
                "&markers=size:mid|color:red|{0},{1}" +
                tweetLocation,
                data);
        return mapURI;
    }
 ……【略】……
TwitterService.Java

　次に「com.hayato.gpstweet.controller.twitter.ShowController」を以下のように編集します。GoogleマップのURIを作成するcreateMap()メソッドを追加します。

……【略】……
    // GoogleMapsの画像URI作成
    private void createMap(Double latitude, Double longitude)
    throws TwitterException {
 
        // ツイートの位置情報をmarkers形式で取得する
        String tweetLocation = getTweetLocation();
        // ズームレベルをリクエストから取得する
        Integer mapzoom = asInteger("mapzoom");
        // GoogleMapの画像URI作成
        String mapURI =
            service.getMapURI(latitude, longitude, tweetLocation, mapzoom);
        requestScope("mapURI", mapURI);
    } 
……【略】……
ShowController.Java

　検索結果のツイートから位置情報を取得して、markers形式に変換するためにgetTweetLocation()メソッドを追加します。ズームレベルは、リクエストに持たせ、そこから取得します。

……【略】……
    // ツイートの位置情報をmarkers形式で取得する
    private String getTweetLocation() {
        List tweetList = requestScope("tweets");
        // ツイートの位置情報をmarkers形式にする
        String tweetLocation = "";
        for (int i = 0; i < tweetList.size(); i++) {
            Tweet tweet = tweetList.get(i);
            if (tweet.getGeoLocation() != null) {
                tweetLocation +=
                    "&markers=label:" + i + "|size:mid|color:red|"
                        + tweet.getGeoLocation().getLatitude() + ","
                        + tweet.getGeoLocation().getLongitude() + "&";
            }
        }
        return tweetLocation;
    }
……【略】……
ShowController.Java

　tweet.getGeoLocation()メソッドでツイートの位置情報が取得できます。labelに数字を指定したmarkers形式に変換します。

　run()にズームレベルをリクエストに保存するロジックを追加し、処理の最後に、createMap()を呼び出し、Googleマップを作成するようにします。

……【略】……
    // 位置情報による検索
    @Override
    public Navigation run() throws Exception {
        Double latitude, longitude;
        // ズームレベル（デフォルト値を設定）
        Integer mapzoom = TwitterService.DEFAULT_MAPZOOM;
 
        // 位置情報を取得していない場合
        if (requestScope("latitude") == null) {
            Gps gps = getGps();
            latitude = gps.getLat();
            longitude = gps.getLon();
            // 位置情報をリクエストに保存する
            requestScope("latitude", latitude);
            requestScope("longitude", longitude);
            // ズームレベルをリクエストに保存する
            requestScope("mapzoom", mapzoom);
        } else {
            // リクエストから位置情報を取得する
            latitude = asDouble("latitude");
            longitude = asDouble("longitude");
        }
 
        // 位置情報を指定して、TwitterServiceを呼び出す
        List<Tweet> tweetList =
            service.search(latitude, longitude).getTweets();
        requestScope("tweets", tweetList);
 
        // GoogleMapsの画像URI作成
        createMap(latitude, longitude);
 
        return forward("show.jsp");
    }……【略】……
ShowController.Java

　JSPファイル「war/twitter/show.jsp」を以下のように編集します。

……【略】……
<body style="border: 2px solid black;">
<div style="background: none repeat scroll 0% 0% #87CEFA;">
  <br>
  <table border="0" cellpadding="0" cellspacing="0">
  <tbody>
  <tr>
    <td valign="top">
      <img src="${mapURI}">
    </td>
  </tr>
  </tbody>
  </table>
  <br>
  <form method="post" action="tweet" style="margin: 0pt; padding: 0pt;">
……【略】……
show.jsp

　<form>タグの前にGoogleマップを表示するために<img>タグを配置します。srcに先ほどの「${mapURI}」を指定します。

……【略】……
  <form method="post" action="tweet" style="margin: 0pt; padding: 0pt;">
    <input name="latitude" value="${latitude}" type="hidden">
    <input name="longitude" value="${longitude}" type="hidden">
    <input name="mapzoom" value="${mapzoom}" type="hidden">
……【略】……
show.jsp

　<form>タグのhidden項目に「${mapzoom}」を保持します。

……【略】……
    <td style="padding: 5px;">
      <c:url value="/twitter/show" var="url" >
        <c:param name="latitude" value="${latitude}"/>
        <c:param name="longitude" value="${longitude}"/>
        <c:param name="mapzoom" value="${mapzoom}"/>
      </c:url>
      0.<a href="${url}" accesskey="0">更新</a>
    </td>
……【略】……
show.jsp

　更新やタイムラインのリンクにも、URLパラメータとして、「${mapzoom}」を設定します。

……【略】……
      1.<a href="${url}" accesskey="1">タイムライン</a>
    </td>
  </tr>
  <tr>
    <td style="padding: 5px;">
      <c:url value="/twitter/show" var="url" >
        <c:param name="latitude" value="${latitude}"/>
        <c:param name="longitude" value="${longitude}"/>
        <c:param name="mapzoom" value="${mapzoom+1}"/>
      </c:url>
      *.<a href="${url}" accesskey="*">拡大</a>
    </td>
    <td style="padding: 5px;">
      <c:url value="/twitter/show" var="url" >
        <c:param name="latitude" value="${latitude}"/>
        <c:param name="longitude" value="${longitude}"/>
        <c:param name="mapzoom" value="${mapzoom-1}"/>
      </c:url>
      #.<a href="${url}" accesskey="#">縮小</a>
    </td>
  </tr>
……【略】……
show.jsp

　タイムラインのリンクの後に、地図の拡大、縮小のリンクを作成します。「com.hayato.gpstweet.controller.twitter.TimelineController」を以下のように編集します。

……【略】……
    @Override
    public Navigation run() throws Exception {
        // タイムラインの取得
        List<Status> statusList = service.getTimeline();
        requestScope("tweets", statusList);
        // リクエストから位置情報を取得する
        Double latitude = asDouble("latitude");
        Double longitude = asDouble("longitude");
        // GoogleMapsの画像URI作成
        createMap(latitude, longitude);
        return forward("show.jsp");
    }
……【略】……}
TimelineController.Java

　TimelineControllerクラスでも同様にGoogleマップを作成します。

……【略】……
    // ツイートの位置情報をmarkers形式で取得する
    private String getTweetLocation() {
        List<Status> statusList = requestScope("tweets");
        // ツイートの位置情報をmarkers形式にする
        String tweetLocation = "";
        for (int i = 0; i < statusList.size(); i++) {
            Status status = statusList.get(i);
            if (status.getGeoLocation() != null) {
                tweetLocation +=
                    "&markers=label:" + i + "|size:mid|color:red|"
                        + status.getGeoLocation().getLatitude() + ","
                        + status.getGeoLocation().getLongitude() + "&";
            }
        }
        return tweetLocation;
    }
……【略】……}
TimelineController.Java

　タイムラインは、Statusクラスから位置情報を取得します。

……【略】……
    @Override
    public Navigation run() throws Exception {
 
……【略】……
 
        // 位置情報をURLパラメータに設定して、ShowControllerにリダイレクトさせる
        Object[] data = new String[]{
            requestScope("latitude"),
            requestScope("longitude"),
            requestScope("mapzoom"),
            };
        String url = MessageFormat.format(
            "show?latitude={0}&longitude={1}&mapzoom={2}", data);
        return redirect(url);
……【略】……
TweetController.Java

　ShowControllerにリダイレクトさせる際に、mapzoomも設定するよう修正します。

モバイルの新時代を創りあげよう！

　以上で完成です。以下、完成時の画面イメージです。

図5　地図表示 図5　地図表示
図6　タイムライン表示 図6　タイムライン表示


　今回作成したサンプルのソースコードを「gpstweet - Project Hosting on Google Code」で公開しています。またアプリ自体は、Google App Engine上にデプロイしてあるので、触ってみてください。このアプリからつぶやいたツイートは、@gpstweetに反映されます。

　本連載では3回にわたり、ケータイでTwitterの位置情報と地図を使ったサービスを一通り作ってみましたが、いかがでしたでしょうか。

　Mobyletにより、簡単にケータイサイトが作れ、Twitter4jで簡単にTwitterと連携でき、Slim3を使用して、簡単にGoogle App Engineのクラウド上でアプリケーションが構築できることが実感していただければ幸いです。

　ぜひ、皆さんもケータイサイトの構築にチャレンジしてみてください。これからは、ケータイやスマートフォンの時代です。皆さんで新しい時代を創りあげましょう！

「クラウドとフレームワークで超簡単ケータイ開発」バックナンバー
前のページへ 1|2|3 　　　　　　

Copyright © ITmedia, Inc. All Rights Reserved.

スポンサーからのお知らせPR

注目のテーマ

Microsoft ＆ Windows最前線2025
AI for エンジニアリング
ローコード／ノーコード セントラル by ＠IT - ITエンジニアがビジネスの中心で活躍する組織へ
Cloud Native Central by ＠IT - スケーラブルな能力を組織に
システム開発ノウハウ 【発注ナビ】PR
あなたにおすすめの記事PR

@ITについて

RSSについて

アイティメディアIDについて

メールマガジン登録

＠ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。