Home > Ruby On Rails

Web　酒　肴

«前へ || 1 | 2 || 次へ»

GoogleMapでマッシュアップの練習（Rails編） #4

今度はダミーの文字ではなくて実際にデータを取得しましょう。4travelの旅行記取得APIの仕様を調べたところ、緯度と経度から取得はできないようです。残念。終了。。。。。。。

というわけにもいかないので、何とか実現可能な方法を模索します。地名から旅行記は取得できるようですので地名を取得する方法を考えましょう。Google検索でこんな素晴らしい質問がヒットしました。僕も人力検索使おうかな。

人力検索はてな 緯度経度からだいだいの地名（○県○市くらいの精度で十分です）を得る方法を教えてください。

ここの回答No9の方が紹介されているサイトがこちら（URLは変更されてた。）

逆ジオコーディングサービス

これで方針決定。以下のような2段階処理をすることにしよう。

  • 緯度、経度から地名（都道府県、都市名）を取得
  • その地名で旅行記を取得

まずは1つ目、地名を取得する処理をサーバ側で実装。これはmain_controller.rbのsearchメソッドを修正。ブラウザから送信されたx, yのパラメータを逆ジオコーディングのlon, latパラメータに代入してリクエスト送信でOK。とりあえず返ってきた文字列をそのまま表示するため@resXMLに全文字列を代入。

main_controller.rb

require 'net/http'

class MainController < ApplicationController

  def index
  end

  def search
    #HTTP通信設定
    site = Net::HTTP.start('refits.cgk.affrc.go.jp')

    #地名情報取得
    response = site.get("/tsrv/jp/rgeocode.php?lon=#{params[:x]}&lat=#{params[:y]}")
    @resXML = response.body #とりあえず全結果文字列を表示させる
    site.finish

    render(:layout => false)
  end

  def getNameOfPlace
    #XML要素から都道府県名と都市名を取得する

  end
end

resXMLを返信するためにviewを変更

app/views/main/search.rhtml

<%= @resXML %>

今度の修正はサーバ上のみなのでブラウザの再読み込みは必要なし。そのまま先ほどと同じように地図上をクリック。マジで動いた・・・・。すげぇ。

成功図

GoogleMapでマッシュアップの練習（Rails編） #3

クリックしたら場所をサーバに送信して旅行情報を取得・表示を行う。まずはサーバと通信するところだけを作ってみよう。どこぞのGoogleMapのサンプルで以下のようなコードを拾ってきた。ほぼそのまま使っている。

サーバとの通信部分

function xmlRpc(point){
  var req = GXmlHttp.create();
  req.open("GET", "main/search?x=" + point.x + "&y=" + point.y, true);
  req.onreadystatechange = function(){
    if(req.readyState == 4){
      //dummy
      alert(req.responseXML);
    }
  }

  req.setRequestHeader("Content-Type", "text/html; charset=UTF-8");
  req.send(null);
}

これをトップページに組み込んでクリック時のリスナ関数から呼び出すようにする。

GEvent.addListener(map, 'click', function(overlay, point) {
if (point) {
    alert("x = " + point.x + ", y = " + point.y);
    xmlRpc(point);
  }
});

全体としてこうなった。

<!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"/>
<title>Google Mapテスト</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAABWYMASZTPMzQMXu2alSa6xTvcRCYKSpWpPqDL-sNMuxVdHFI_BTd8zF9kdpV97QhhvGd0NWsQckXsw"
  type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 500px"></div>
<script type="text/javascript">
//<![CDATA[

if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("map"));
    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());
    map.setCenter(new GLatLng(38, 138), 5);
    map.disableDragging();
}

GEvent.addListener(map, 'click', function(overlay, point) {
    if (point) {
        alert("x = " + point.x + ", y = " + point.y);
        //map.openInfoWindow(point,
        //document.createTextNode("openInfoWindow Test"));

        xmlRpc(point);
    }
});

function xmlRpc(point){
    var req = GXmlHttp.create();
    req.open("GET", "main/search?x=" + point.x + "&y=" + point.y, true); //app/controllers/main_controller.rb のsearchメソッドが呼び出される（パラメータはxが経度、yが緯度）
    req.onreadystatechange = function(){
        if(req.readyState == 4){
            //dummy
            alert(req.responseXML); (←とりあえず結果を表示させるだけ）
        }
    }

    req.setRequestHeader("Content-Type", "text/html; charset=UTF-8");
    req.send(null);
}
//]]>
</script>
</body>
</html>

次はサーバ側の処理。app/controllers/main_controller.rbにsearchメソッドを追加。

class MainController < ApplicationController

    def index
    end

    def search
        render(:layout => false)
    end
end

レイアウトは使用してないけど、画面表示をさせないということから念の為に無効化しています。次にviewを作成。app/views/main/search.rhtmlを以下のように作成します。

dummyString!!

で、ページを再読み込みして地図上をクリック。 緯度、経度が表示された後、「dummyString!!」が表示されれば・・・・

されない・・・

nullが表示されます。なぜだ？と調査開始。サーバのログを見るとsearchメソッドは正常に呼び出されてHTTPレスポンスコードも200。つまりサーバに問題はない。それならクライアント側ってことで、JavaScript部分を見直していると気になったのはこの部分。

alert(req.responseXML);

メソッド名から察するに結果XMLを取得しているわけだが、今回は結果は単なる文字列であってXMLではない。そう思って調査していると以下のページを見つけた。予想は正しくreq.responseTextじゃないというメソッドもあるようだ。

XMLHttpRequest入門【メソッド等の確認とシンプルなコード】

修正後、ページを再読み込みして画面クリックすると、見ごとに「dummyString!!」が表示された。今回はここまで。

GoogleMapでマッシュアップの練習（Rails編） #2

環境

  • Windows上でVMwareにFedoraCore4 + Ruby On Rails（Rubyともにバージョンは現在2007/09/17の最新←テキトーだな）
  • Puttyで接続してvimで開発
  • Googleでキー取得のときに申請したホスト名は本番環境用なので、暫定的にHostsファイルをいじってローカルのFedoraのIPを割り当てる。

Rails でアプリ作成（アプリ名：map）

[obanetty@fedora ~]$rails map

トップページ用のmainコントローラとindexページ作成

　
[obanetty@fedora ~]$script/generate controller main index
　

トップページであるapp/views/main/index.rhtmlにGoogleMapを設置

もう、このサイトの言う通りにやったらすぐにできました。 素晴らしいです。

Geekなぺーじ - Google MAPS APIプログラミング

app/views/main/index.rhtmlの内容

<!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"/>
    <title>Google Mapテスト</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAABWYMASZTPMzQMXu2alSa6xTvcRCYKSpWpPqDL-sNMuxVdHFI_BTd8zF9kdpV97QhhvGd0NWsQckXsw"
      type="text/javascript"></script>
  </head>
  <body>
    <div id="map" style="width: 500px; height: 500px"></div>
    <script type="text/javascript">
    //<![CDATA[
    if (GBrowserIsCompatible()) {
      var map = new GMap2(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng(38, 138), 5);
      map.disableDragging();
    }
    GEvent.addListener(map, 'click', function(overlay, point) {
      if (point) {
          alert("x = " + point.x + ", y = " + point.y);
          map.openInfoWindow(point,
          document.createTextNode("openInfoWindow Test"));
      }
    });
    //]]>
    </script>
  </body>
</html>

設定内容は以下（日本列島だけを表示するようにした） + 初期化位置を指定する + コントロールボタンを表示する + 地図をドラッグで移動できないようにする + クリック処理

クリックしたポイントの緯度と経度をalert表示させる処理も入れておいた。alertのスペルを忘れてて２、３度苦戦。

　サーバ起動

[obanetty@fedora map]$ script/server -p 80

80番ポートで起動しないと申請した内容と変わるため。んで80番ポートを使用するには管理者権限が必要だった。

以降はサーバ起動したままで別のPutty窓からアプリを編集。この方がサーバの再起動が必要ないから楽。これはRailのWebrickサーバがデフォルト指定ではdevelopmentモードで起動し、サーバの再起動なしに動的にアプリケーションを読み込んでくれるから。

GoogleMapでマッシュアップの練習（Rails編） #1

マッシュアップをしてみたい。とりあえずGoogleMapでやってみたい。Ruby On Railsも使ってみたい。でもどっちもあんまりやったことない。備忘録程度にその軌跡を残しておこう。

使うもの

  • RubyOnRails
  • GoogleMap
  • 4travel.jp 旅行記検索API

地図上の場所をクリックしたら、その近辺の旅行記が表示されるものでも作ってみる。多分、そんなのすでにどこかにあるだろう。それはわかってる。何事も最初は模倣から。ありきたりなものを作って基礎体力を作る。これが大事なのだと思う今日この頃。

必要な知識

  • JavaScript（Ajax）
  • GoogleMap
  • Ruby On Rails
  • WEB API
  • Linuxサーバ

僕のスペック

  • Java歴・・・５年
  • JavaScript（Ajax）・・・入門
  • GoogleMap・・・初めて
  • Ruby ( On Rails )・・・ だらだらと１年
  • WEB API・・・初めて

上記の知識をある程度前提として、自分が知らなかった部分を中心にメモしているので、このブログを見て同じことをしてもらおうというつもりでは書いていません。部分的にでも誰かの役に立てば、というつもりで書いています。

まとめ記事としてはまた別の場所に書くつもり。では、次回より構築します

«前へ || 1 | 2 || 次へ»

Home > Ruby On Rails

プロフィール

follow obanetty at http://twitter.com
スポンサードリンク

カテゴリ
アーカイブ
最近の投稿
最近１ヶ月の検索キーワード
リンク
Search
Feeds

Page Top