モチベーション
店舗一覧画面では店舗情報を取得して表示する必要がある。情報量が多く普段よく使うGoogleではAPIが利用可能である。
GoogleAPIをアプリと紐付けて情報取得および店舗情報の一覧を作成したい。
目次
| ページ内リンク |
|---|
| 1. GoogleAPIの取得および設定 |
| 2. アプリ側の設定 |
| 3. 実装 |
| 4. 結果 |
| Reference |
| 余談 |
1. GoogleAPIの取得および設定
GoogleAPI利用するにはGoogleCloudにアカウント登録、利用したいAPIの有効化、APIキーの取得と制限が必要。[1]を参考にして有効化しました。
店舗一覧とマップ機能を利用したいので、以下のAPIを有効化しました。
Places API (詳細は[2]参照)
Maps JavaScript API
2. アプリ側の設定
アプリ側の設定も必要です。[3]ではAPIキーの設定を.envファイルへ書き込み、envファイルをgitに上げないようにするまでの内容が書かれています。[4]では各ファイルの役割や利用例などが書かれています。
PlacesAPIのリクエスト・レスポンスについては[5]参照。
3. 実装の流れ
実装内容は書いて良いかわからなかったのでとりあえず載せずに流れだけ載せます。
3-1. 必要なGemインストール
Gemfileに"httparty"と"dotenv-rails"を記述
ターミナルでbundle install
3-2. APIキーを.envへ記述
googleAPIのキーを記述。
.gitignoreに.envが未記載の場合、記述して漏洩防止。
3-3. サービスクラス作成
servicesフォルダ作成してサービスクラス用ファイル作成。
作成したrbファイルには以下を記述。
- initializaメソッドでAPIキー取得
- 検索メソッドを作成。引数としてlocation, 検索半径を設定。以下を実行する。
-- 検索ワードなどの任意引数を設定。
-- HTTPartyのgetメソッド実行。
3-4. コントローラ作成および呼び出し
indexメソッド(アクション)として以下を記述。
検索場所設定(デフォルト場所も設定)、上記サービスクラスのインスタンス生成、処理実行。
処理成功した場合、実行結果を変数へ格納。
上記以外の場合、空文字を変数へ格納。取得失敗したことをflashで表示。
3-5. ビューの作成
コントローラで取得した情報分だけeach文でループ。
表示したい内容を変数から出力。
3-6. ルーティングの設定
config/routes.rbに「getメソッドで【コントローラ名】が呼ばれた時、【コントローラ名】のindexアクションを実行する」ができるように記述。
すると一覧が表示されました！！！！！初めて動いたのでめっっっっっっちゃ感動しました！！！！！
4. 結果
参考資料とChatGPTのおかげで初めて画面を作成して動かすことができました！この感動を共有できる人がいないのが寂しいですが、おそらく忘れないでしょう。
詰まったところとしては、メソッド名の頭文字が大文字にしていてAPIが取得できなかったことです。ちゃんとメソッド名の頭文字は小文字でないといけないみたいです。
ここまで読んでくださりありがとうございました！
Reference
[1]yo4shi80, Google Places API (New) を使った店舗情報と口コミデータの取得方法, (2024), https://note.com/yo4shi80/n/n37b720b6d95c
[2]@jinta_02(jinta), Google Places APIを使用して情報を取得（Rails）, (2025), https://qiita.com/jinta_02/items/d7c62be909ac4edca5d2
[3]Miyachi Labo, 【Rails】Googleマップに掲載されている店舗情報をAPIで自由に取得する,(2021), https://labo.kon-ruri.co.jp/rails-google-places-api/#index_id0
[4]@fumiya1800(f n), Rails 環境変数の設定方法（dotenv-rails）, (2023), https://qiita.com/fumiya1800/items/6795e5e1046ec6f60aed
[5]@yoshii0110(Yoshitaka KOITABASHI), Google mapのPlaces APIで指定したエリア内にある特定の場所を調べてみよう！, (2021), https://qiita.com/yoshii0110/items/7938085151f569427af6
余談
初めて目次と見出しとのページリンクを作成しました。
リンク作成にはいくつかの条件があり、以下の資料が参考になりました。
hタグをつけるとリンクできないことを知らず詰まりました。
@shizen-shin, 【実例解説】Qiitaでページ内リンクを使う方法（マークダウンによるアンカーリンクの書き方）, https://qiita.com/shizen-shin/items/a65f1e2b6a3c3a4a28e1