はじめに
みなさんキャンプはお好きですか？キャンプで焚き火を囲んでいるだけでも心が浄化されますよね。焚き火には「1/f ゆらぎ」と呼ばれる成分が含まれていて化学的にその癒し効果が証明されているそうです。焚き火をしながら「1/f ゆらぎ」の声を持つ宇多田ヒカルの曲を聴き、好きなビールでも飲めば大抵の嫌なことなんて忘れてしまいます。僕は焚き火をするのに無料キャンプ場をよく利用しています。コスパ最強の無料キャンプ場を多くの人に知ってもらいたいと思い、このサービスを作りました。
サービス概要
CAMPHOOD -無料キャンプ場をもっと身近に利用しよう-
URL: https://www.camphood.net
キャンプに行く前はとにかく情報収集が大事です。僕はいつも下記のようなことをざっと調べていましたが、まだまだ他のことを調べるかたもいらっしゃると思います。忘れ物とかもよくありますし・・・
- 目的地までの道のり、所要時間
- 食料・薪などをどこで調達するか（スーパー、ホームセンター、コンビニ)
- 地場の食材を買いたいから道の駅に行きたい
- お風呂入りたいけど、どこにあるか
- キャンプ場周辺の天気（昼と夜の寒暖差を知りたい）
- もし体調悪くなったときに近くに病院はあるのか
- あわよくば宿泊の次の日は周辺でランチを食べて帰りたい
- そして気分が乗ったら観光も少し楽しみたい
使い方
トップページ
セレクトボックスから都道府県を選択出来ます。キャンプ場一覧から全ての無料キャンプ場を見ることも出来ます。(2022/2月現在、全国で241件の無料キャンプ場が登録されています)
ログイン後は「レビュー投稿、いいね機能」を使用することができます。
キャンプ場詳細ページ
各キャンプ場の基本情報やざっくりとしたマップ情報を確認することが出来ます。各種SNSへ当該ページを拡散することや、投稿されたレビュー、レビューの平均や件数も確認することが出来ます。
画像上の、行きたい！の炎のマークをクリックするとお気に入りに登録することが出来ます。見た目も可愛くて気に入っています。
このキャンプ場詳細ページへの「この無料キャンプ場の周辺案内を行う」ボタンをクリックすると、キャンプ場周辺案内ページへと遷移します。
キャンプ場周辺案内ページ
このページでは下記のような情報を得ることが出来ます。
- 現在地から当該キャンプ場への車での距離と所要時間
- キャンプ場周辺のストリートビューをマップと並べて確認が可能（場所によってはストリートビューに対応していない箇所もあります）
- セレクトボックスから周辺施設を検索し、該当した施設(検索できる施設は下記一覧)の一覧をレビューの評価順にソートして表示。選択すると、当該施設がマップ上に表示される。
- スーパー
- ショッピングモール
- コンビニ
- ホームセンター
- 銭湯・温泉
- 医療機関
- 道の駅
- 観光地
- 飲食店
- キャンプ場周辺の天気予報を6時間ごと表示(5日間)
- キャンプ場周辺のホテル情報（もしも道中、豪雨に見舞われた際にキャンプを諦めて宿泊施設に泊まるという選択肢があるかもしれないため。笑）
- おすすめのテント情報（無料キャンプ場を使い続けて節約すると憧れのあのテントも買えますよというメッセージも含む）
- おすすめのキャンプ関連雑誌を表示（まずは雑誌を読んで物欲を爆上げさせようという魂胆）
マップ上の、「現在地からキャンプ場への道のりを見る」ボタンを押すと、現在地からキャンプ場までの距離と時間を下記のように表示してくれます。
僕はこのキャンプ場まで車で12時間12分かかるみたいなので行くことは諦めます。
「周辺のストリートビューを見る」ボタンを押すと、マップとストリートビューを見比べながら操作することが可能です。これでマップ上のペグマン1 が向いている方向も確認できるため、ストリートビューを操作しながら「いやっこれ今どっちに向かってるんだよ」状態をなくすことが出来ます。
周辺施設検索機能
ここは僕がいつも調べるようなことをある程度把握できたらいいなと思い実装しました。僕の場合は、キャンプ場からどれくらいの位置に施設があるのかということを事前に知りたいです。そしたら予定も立てやすいので。検索して、該当する施設があると下記のように評価順にソートされた情報が一覧に表示されます。マップ上では詳細表示と現在地からの道順とマーカーで表示されているため、すぐに詳細な情報を調べることが出来ます。
キャンプ場周辺の天気予報が6時間ごと、5日分表示されます。天気マークも表示されるため、一目で確認することが出来ます。周辺のホテル情報は半径3キロ以内にあるホテルを表示します。これで道中、天気予報で補足しきれなかったゲリラ豪雨に見舞われても安心ですね！
おすすめのテントとキャンプ雑誌が表示されます。上位20件を取得し、その中から4件をランダムに表示させています。本当にテントが欲しくなりました。
使用技術について
Ruby on Rails 6.0.4.1
Ruby 2.6.8
各種API
-
Google Maps API
- Places API
- Maps JavaScript API
- Geocoding API
- Direction API
- Maps Static API
-
楽天API
- Travel
- Ichiba
- Books
主な使用gem
- sorcery
- geocoder
- jp_prefecture
- gon
- carrierwave
- gretel
- kaminari
- ransack
苦労した点
- 緯度経度の取得
Google Maps APIとOpenWeatherMap APIは緯度経度を必要とするのですが、それらをどうやって取得しようかと方針に悩みました。結果的にはgem 'geocoder' を使用して解決しました。しかし、gem 'geocoder' だけでは精度が低い為、ここでGoogle Maps APIのGeocoding APIを使用して高精度で住所から緯度経度を特定出来るように実装しました。ここも深ぼって記事に出来たらなと思います。 - やはりGoogle Map周辺の実装には苦労しました。JavaScriptの知識が浅い状態で始めたので大変勉強になりました。しかし、Google Maps APIは公式のドキュメントで動くサンプルとコードがたくさんあるので実装はしやすかったと思います。
おまけ
焚き火の中に「アートファイヤー」という粉を入れたら炎色反応で焚き火の色が変化するというのが好きでよくやるんですが、新規登録・ログインページ・マイページ・マイページ編集ページの背景画像で、アニメーションを使用し炎の色が変化するっていうのを表現しました。（表現したつもりです。。。）見にくいかもしれませんが見ていただけると嬉しいです。
おわりに
今回初めてのサービスを無事にリリースすることができました。無料キャンプ場ってこんなにあるんだと知れたのも含めて楽しかったです。
今後も引き続き、改善していきたいと思っているのでフィードバックなど貰えると幸いです。
-
※ペグマン（Pegman）とは、Googleマップで地図画面の右下に表示される黄色い人型アイコンのこと。 ↩