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()

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

      • たつや

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

関連記事

Refinery CMS3.0にBootstrap3.1を適用する

目次1 Gemfile2 Sprocketを設定3 application.htmlをoverrideする4 Grid Layout5 Navbar6 Panel7 Well8 できた Gemfile …

no image

Ubuntu server12.04でRails4とPostgreSQL9.3をつかう〜hstoreとか

目次1 準備2 rails new3 config/database.yml4 hstoreとarrayを試してみる 準備 Ubuntu server12.04にPostgreSQL9.3をインストー …

backbone-railsのscaffoldで生成されるコードでルーティングとCRUDの処理をどうやってるのか読んでみた

By: asobi tsuchiya   目次1 はじめに2 サンプルの準備3 初期化4 ルーター5 READ6 CREATE7 UPDATE8 DELETE はじめに backbone-r …

ActionCableのサンプルをみてみた

By: Samantha Brough – CC BY 2.0 目次1 ActionCableとは2 rails4での利用3 redisサーバーの準備4 cableサーバーの準備5 チャッ …

Rails3.2でリアルタイムメッセージング~Private_pub、Faye

  Railsで簡単に非同期通信ができるPrivate_pubというgemを試した もともとrubyにはFayeという非同期通信ができるgemがあったが、簡単に安全な接続ができる実装を加えた …