Ruby on Rails開発のインターン　（Day 13）

Ruby on Rails インターン グーグルマップ

こんにちは、皆さん！

この前、Heroku上でTuneMyGCを使ってみることを提案したから、ここからはメモリリーク以外のことをやっていけると思う。それで、任されたのはグーグルマップの更新。もともとサイト内にマップはあるのだが、デザインと機能を一新するので、いろいろとやることが出てきた。


  • トピック：
  1. Railsにおけるグーグルマップ
  2. geocoderとは？
  3. どっちの方が近いのか調べる


  • 疑問：
  1. グーグルマップをGmapで実行した方がプレーンのJavaScriptより良いことはあるのか？


  • 問題：


  • 学習した内容：
  1. グーグルマップAPIの登録の仕方
  2. 2点間の距離を計算する方法


  • 今後やってみたいこと：
  1. 自分のサイトにもグーグルマップを組み込んでみる


  • リソース：
  1. GitHub - apneadiving/Google-Maps-for-Rails: Enables easy Google map + overlays creation in Ruby apps
  2. Latitude and Longitude Finder on Map Get Coordinates
  3. Geocoder: Display Maps and Find Places in Rails — SitePoint
  4. GitHub - alexreisner/geocoder: Complete Ruby geocoding solution.


Railsにおけるグーグルマップ

Railsでは、普通のHTMLウェブサイトでグーグルマップを実行する方法とRails特有のジェムを使う方法の両方が使えるようだ。
Rails専用のジェムに関しては下記のサイト通りにやればいいみたい（僕はHTML型で実行する方が好きになった）。
GitHub - apneadiving/Google-Maps-for-Rails: Enables easy Google map + overlays creation in Ruby apps


それで、当然のようにAPIキーをこれまた要求されるので一つ作りましょう！
こちらのサイトからAPIキーは手に入れられる。
Google Cloud Platform
このサイトでは、更にAPIキーを利用できるサイトの制限をURLを指定してできるため、安全にAPIキーを利用可能。


このトピックに関する内容はかなりの量のため、ここでは触れないでおく。いづれはチュートリアルという形でまとめていきたいと考えている。

geocoderとは？

Resource: GitHub - alexreisner/geocoder: Complete Ruby geocoding solution.

geocoderはRailsではジェムの一つで緯度と経度の処理をしてくれる優れもの。ジェムをインストール後、そのクラスで定義された様々な便利な関数を利用することができる。
そのジェムをインストールするには下記をGemfileに入れる。

gem 'geocoder'

そしたら、いつも通りbundle install
これで、先ほど述べた便利な関数へのアクセスを確保できた。ここでは、その中の一つ、距離を緯度と経度から計算するものについて、少し紹介したい。

どっちの方が近いのか調べる

距離を計算するためには、以下の関数に2点のそれぞれの緯度と経度を当てはめればよい。

Geocoder::Calculations.distance_between([lat1, lon1], [lat2, lon2])

じゃあ、例えば東京から韓国のソウルまでの距離と大阪からソウルまでの距離を比べてみたいとしよう。
そしたら、それぞれの緯度と経度を入手するためにまずこちらのサイトへ↓↓
Latitude and Longitude Finder on Map Get Coordinates
このサイトで以下の写真のように都市名を入力したら、その後その写真内の数値が得られた。
f:id:Coding_Studio:20180721063213p:plain
f:id:Coding_Studio:20180721063218p:plain
（あ、もし、新宿と大阪市役所が東京と大阪の中心であるとするこの定義に異議ありなら、ぜひグーグルに連絡ください笑）


ここから僕はコンソールでルビーコードを書いていく。
まず、コンソールを開くためにrails cとターミナルでたたく。 そしたら、どっちがソウル (lat: 37.566535, lon: 126.977969)に近いのかを計算するコードを打っていく

# define variables
2.2.2 :001 > seoul = {latitude: 37.566535, longitude: 126.977969}
2.2.2 :002 > tokyo = {latitude: 35.689487, longitude: 139.691706}
2.2.2 :003 > osaka = {latitude: 34.693738, longitude: 135.502165}

# get the distance
2.2.2 :012 > distance_to_tokyo = Geocoder::Calculations.distance_between([seoul[:latitude], seoul[:longitude]], [tokyo[:latitude], tokyo[:longitude]])
 => 716.2062912249935
2.2.2 :013 > distance_to_osaka = Geocoder::Calculations.distance_between([seoul[:latitude], seoul[:longitude]], [osaka[:latitude], osaka[:longitude]])
 => 515.1855204674704

この場合、１つ目の距離の方が2つ目のより大きいので、大阪の方がソウルに近いということが分かる。
つまり、ソウルに行くなら大阪からってことだね(笑)

まとめ

今日はいくつかグーグルマップの基礎的な捜査について学ぶことができた。この系の内容が簡単じゃないのは事実だが。新しいことがいっぱいあるので、どれとどれがどうつながるのかなどの辺はしっかり判別できるようにしていきたい。また、geocoderとgmapsは異なるものであることも学んだ（最初はgeocoderでマップを表示しようと思っていた笑）。
次の日にはもっと深くいろんな関数を掘り下げていこうと思います！！


ご精読ありがとうございました。では、また次回まで✌



Day 14はこちら↓↓
programming-shop.hatenablog.com


Day 12はこちら↓↓
programming-shop.hatenablog.com