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
-, ,

執筆者:

関連記事

RailsでReactコンポーネントをつかう

By: justine warrington – CC BY 2.0 目次1 React on rails2 インストール3 react on railsで生成されるファイル4 mater …

Rails3.2でフォームの順番をjQuery UI sortableで並べ替えてSubmit~acts_as_list

no image

Ubuntu ServerのGuardからネットワーク経由でWindowsのブラウザをリロードする~guard-livereload

Ubuntu12.04.1でCoffeeScriptの自動makeとブラウザの自動リロード~guard-coffeescript   Ubuntu ServerのGuardからGrowl f …

Rails3.2でユーザー管理機能を追加~Devise

By: Mark Strobl – CC BY 2.0 目次1 前回2 generate3 routes.rb4 index.html.erb5 new6 create7 edit8 up …

WindowsのRubyでxlsxファイルにアクセスする~roo

By: Hajime NAKANO – CC BY 2.0 目次1 rooのインストール2 rooを使ってみる(基本)3 シートを指定する4 セルの値を確認する5 行列を数える rooのイ …