145
69

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【個人開発】近くの二郎とサウナを一瞬で検索し、黄金ムーブがすぐできるアプリを作った

Last updated at Posted at 2022-02-21
ロゴ – 9.png 「近くの二郎系とサウナ一緒に探したいなぁ〜」 「Google Mapは少し探しにくいんだよなぁ」

こんな悩みを解決するアプリ「ジロサウナ〜」を開発しました。

【サービスURL】
https://www.jirosauna.com/maps

はじめに

こんにちは、「二郎とサウナは万能薬」を信じる@botcher_matsuと申します。

言わずもがな、僕は、二郎系ラーメンをすすってからサウナで整うという所謂、「黄金ムーブ」が大好きなのです。

そして、二郎系ラーメンからサウナをキメるという合法麻薬(合法ですよね...?)にハマりすぎた僕の熱意はどんどん膨れ上がりました。

「もっと最高の二郎系ラーメンとサウナのムーブをしたい!そして同志と共有したい!」

「もっと手軽に一瞬でお店を探したい!」

と思うようになり、、、

二郎とサウナに特化したアプリを作ってしまいました(・ω<)

サービス概要と使い方

ogp.png

開発したアプリ「ジロサウナ〜」はマップからポイントを指定してボタンを押すと周囲の二郎系とサウナを一瞬で検索することができるアプリです。

以下のようにマップ内で自由に場所を指定して検索ボタンを押すと、瞬時に周辺の二郎系とサウナを表示します。

IMB_sSZqDZ.gif

どんな機能がある?

以下の機能をMVPで作成しました。

  • マップ検索機能
  • 二郎系から探す機能
  • サウナから探す機能

マップ検索機能

IMB_LOfzDk.gif

前述の通り、マップにピンを指してボタンを押すだけで周囲1.5km以内の二郎系とサウナを表示します。

また、以下のように中心点からの距離も表示していいます。

スクリーンショット 2022-02-21 21.06.35.png

こうすることで、「今日は、ここの駅からこの二郎を食べて、このサウナへいこう!」

というように距離と相談しつつ予定を立てることができます。

2地点間の距離の計算はgemのgeokit-railsを使用しました。

また、ボタンを押せば、現在地からの検索ができ、キーワード検索では、該当箇所へ瞬時に移動できます。

スクリーンショット 2022-02-21 21.10.05.png

二郎系&サウナから探す機能

IMB_n2uVAE.gif

店舗から探すこともできます。

店舗詳細には、近くのサウナ、または、二郎を表示しています。

また、店舗の営業時間や電話番号、住所なども調べることができます。

ラーメン二郎 ひばりヶ丘駅前店 詳細 _ ジロサウナ〜.png

Google Mapへのリンクも貼っていますので、Googleマップで経路についても確認しやすくしました。

現在アップデート中の機能

現在、二郎系・サウナの投稿機能を実装しております。

ぜひ皆さまのおすすめの組み合わせを教えてください。

使用技術

バックエンド
  • Ruby 3.0.3
  • Ruby on Rails 6.1.4
フロントエンド
  • JavaScript
  • Tailwind CSS

開発前唯一知っていたBootstrapと比較してTailwind CSSの方が記述量は増えるが、柔軟性が高く、JavaScriptへの依存がなくJSフレームワーク(ゆくゆく導入したい)との相性も良いためこちらを採用しました。

テスト
  • RSpec
バックエンド
  • Rubocop
API
  • Google Maps JavaScript API(マップ検索に使用)
  • Google Places API(店舗情報の取得に使用)
  • Google Photos API(店舗外観画像の取得に使用)
  • Geolocation API(現在地の取得に使用)
  • Heart Rails GEO API(Twitter共有時、検索エリアの取得に使用)

ER図

ER.png

このアプリ、何がいいの?

二郎とサウナを探すことに特化しているということ以外にも、ジロリアン・サウナーの方にぜひ使っていただきたい理由が以下2点あります。

  1. 正確なデータベース
  2. マップでの検索のしやすさ

正確なデータベース

既存のマップアプリだと、以下のような悩みがあると思います。

  • どうしても正確に二郎系の店舗のみを検出できない
  • サウナがある店舗を検出できない

試しにGoogle Mapにて「中野 二郎」と検索すると、以下のようになります。

スクリーンショット 2022-02-21 21.43.53.png

非常に見づらいですし、二郎系ではないお店も検索結果に含まれてしまっています(Googleが二郎とはなんたるか?理解するにはまだまだ時間がかかるようです)。

そこで、正しく二郎系とサウナを表示するために正しいデータを作成するということにこだわっています。

もちろん、現段階では、不足している店舗や該当しない店舗も含まれているかと思いますが、アップデートを重ね、正確なデータベースを作成していく所存です!(ぜひ皆さまからの情報提供をお待ちしております!)

マップ検索のしやすさ

既存のアプリだと、周辺の情報を検索することはできても、先程の画像のように、場所を指定して特定の店舗を検索することはあまり得意ではありません。

何より、検索フォームに「場所 二郎」と何度も検索をかけることが面倒です。

マップ検索では現在地はもちろん、タップ一つ簡単にさまざまな場所を検索できるように調整しました。

また、ほとんどがスマホでのアクセスになるため、レスポンシブにも対応しました。

上記2点を踏まえると、二郎とサウナを探すことに関しては、既存のGoogle Mapよりも使いやすいアプリに仕上げることができたのではないでしょうか?

終わりに

この記事をご覧くださり、ありがとうございます!

僕は、仲間と「二郎と食べてサウナへいく」という遊びがこの世で一番好きです。

だからこそ、同じ同志の方たちに喜んでもらえる、そして、最高の体験を共有して盛り上がれる空間を作りたかったのです。

今回の記事では技術的なことについては触れませんでしたが、気になる方はgithubを置いておきますので、覗いてみてください。

【github】
https://github.com/ShoKubota/jirosauna

アップデートのお知らせは以下のTwitterよりお知らせいたしますので、ぜひフォローお願いします!(追加店舗についても情報提供お願い致します🙇‍♂️)

【Twitter】
https://twitter.com/jirosauna

【サービスURL】
https://www.jirosauna.com/maps

145
69
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
145
69

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?