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

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

      • たつや

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

関連記事

Rails4でつかえるインラインエディタを試してみた〜X-editable-rails

目次1 x-editable2 bootstrapを導入3 x-editable-rails4 サンプルアプリ x-editable 文字をダブルクリックして編集できるやつ x-editable vi …

WindowsのRubyでxlsxファイルを生成する~axlsx

By: Roman Boed – CC BY 2.0 目次1 axlsxのインストール2 hello axlsx3 サンプル4 参考 axlsxのインストール コマンドラインからインストー …

Rails3.2のアプリをデプロイ~apache+passenger+postgresql

  環境 ubuntu server 12.04 目次1 postgresql2 apache+passenger3 デプロイ準備 postgresql インストール 参照 Ubuntu s …

Rails3.2のproduction環境で動画再生~flowplayer+carrierwave+nginx+unicorn

  By: Creative Tools – CC BY 2.0 目次1 前提2 unicornの設定3 nginxのインストール4 nginxの設定5 アセット関係6  ストリ …

Rails3.2でajaxなフォルダツリーを導入する2~dynatree-rails

  目次1 jQuery ajax送信側2 app/views/folders/show.js.coffee3  で、コントローラーを設定4 今までのは置いといてJsonでやり取りするアプロ …