Railsで使えるGem

Rails3.2でhtml5で取得した位置情報をAjaxで住所表示する~geocoder

投稿日:

 

 

HTML5ではブラウザからユーザーのPCの位置情報を取得することができるGeoLocation APIというものがある

(もちろんデフォルトではユーザーに確認をする設定になっている)

これを使ってjavascriptで取得した位置情報をRailsのアドレスにAjaxで送信してコントローラーで位置情報の値を処理するということをやってみたい

というか、

www.nicocharlery.fr/posts/rails-3-1-and-the-html5-geolocation-api

をほぼ参考にしている

そのた参考にしたページ

www6.ocn.ne.jp/~wot/web/html5/geoapi/

完成イメージはシンプルなもの

リンクを押すとその下に現在の住所が出る(現在地は偽装してます)

仕組みとしては、①リンクを押す、②Javascriptが呼び出されて位置情報を取得する、③取得した値をRailsのアドレスに投げる、④コントローラーでparamsとして取得して処理、⑤format.jsでjQueryのテンプレートに当てはめる、⑥htmlのdiv要素の文字を住所に書き換える、という手順だ

一つ一つの仕組みは簡単だけど、一回はまるとどこが悪いのかわからなくなるゼ

スケルトンをつくる

まず、リンクを押すとなにか文字が出てくるというひな形をつくる

index.html.erb

知らなかったけど、controllerとactionの指定を{}でくくっておかないとremoteが機能しないので注意

home_controller.rb

これでrailsはget_geo.js.erbというテンプレートファイルを探しに行く

get_geo.js.erb

config/routes.rb

最後にconfig/routes.rbを書き換えてget_geoがとりあえず見られるようにする

これでリンクを押したら’HELLO’と表示されればOK

位置情報を取得する

Nicolasのページや参考先をみながらcoffeeスクリプトを書く

インデント怖い

あと+とかも前後スペースをあけないと変な解釈をされたりするので注意が必要

位置情報には少し時間がかかるのでpostするタイミングはonSuccessのなかに書かないとうまくいかなかった

対応するPCでコンソールをみながらやったほうがいい

ちなみに、自宅のデスクトップでは位置情報の取得はできなくて、MBAでやったら位置情報の取得ができた

Railsで情報を読む

ここまでこればログに投稿した情報が出ているのでparamsで見られる

 controller

これをインスタンス変数でテンプレートに投げれば位置情報がブラウザに表示される

 view

うちの場合はクリックしてから表示されるまで5~6秒 かかったので少し待ってほしい

あと、jQueryのclickイベントリスナーを設定したのでlink_toはもうダミーでOK

位置情報を住所の表示に変える

 

Gemfile

bundle

controller

view

これで住所の表示ができた

まだ住所の日本語表示ができてないけどそれはまた今度

-Railsで使えるGem
-, ,

執筆者:

  • たつや

    とてもわかりやすい解説で、とても参考になっております。
    ところで、1つ質問がございます。
    クリックしなくても、ページを読み込んだときに位置情報を取得するにはどうしたらよろしいでしょうか?
    ぜひ、ご教授願います。

    • 記事を読んでいただいてありがとうございます.

      get_geo.js.erbに書いたもの(2 位置情報を取得する)を、そのままassets/javascripts以下のcoffeescriptに移して、

      $(“#getLocation”).click( ->
      getCurrent()
      )

      を単に

      getCurrent()

      に変えたらどうでしょうか.

      • たつや

        ありがとうございました!
        クリックせずとも位置情報を取得できました!

関連記事

全文検索エンジンGroongaをRubyから利用するライブラリのチュートリアルをやってみた〜rroonga

By: Kevin Jarrett – CC BY 2.0 目次1 Groonga2 Groongaのインストール3 rroongaのインストール4 チュートリアルの開始5 データベースの …

Rails3でajaxでD&Dでまとめてファイルアップロード~jQueryFileUpload for Rails

Rubyでデータクリーニング~mechanize & active_support

  オライリー・ジャパンから「d3をはじめよう」という本が発売されたので読んだ 棒グラフ、折れ線グラフ、インタラクション(マウスオーバーで丸が大きくなるとかラベル表示とか、横のリストからグラ …

no image

Rails3.2でBackbone.jsとPrivate_pubでToDoアプリをリアルタイム化(できた!)

参考 Rails3.2でリアルタイムメッセージング~Private_pub、Faye Rails3.2とBackbone.jsでToDoアプリを作ってみた~backbone-on-rails &nbs …

Rails3.2からMongoDBを使ってアプリをつくってみる~mongoid

MongoDBはとても素直で扱いやすいということがわかってきたので、以前作成した郵便番号・住所の相互検索アプリをまたつくってみた 参照 MongoDBのチュートリアルをこなす KEN_ALL.CSVを …