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

執筆者:

関連記事

ActionCableのサンプルをみてみた

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

今度こそRails3.2からdocxを生成する

目次1 前提2 構想3 アップロード4 スキームの保存5 docxの生成6 レイアウトと画面遷移を考える7 データの更新8 データの削除 前提 Rubyからdocxを生成する 前回、イキオイアマって自 …

Rubyでdocxをいろいろ分析してみた

  目次1 解凍~minizip2 ファイルを開く~File.open3 全ファイルを解凍せずにzip内の必要なファイルだけを開く~zipruby4 置換~gsub5 xmlの操作~noko …

RailsでこんにちはBackbone.Marionette

By: palindrome6996 – CC BY 2.0 自分の中でmarionette熱がだんだんと高まりつつあり、特徴的なItemView、CollectionView、Compo …

no image

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

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