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

<img alt="ロゴ – 9.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1843728/9b2d61c3-ce46-fd3e-a62c-91a85d5d66a7.png">
<strong>「近くの二郎系とサウナ一緒に探したいなぁ〜」</strong>
<strong>「Google Mapは少し探しにくいんだよなぁ」</strong>

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

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

<h2>はじめに</h2>

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

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

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

<p><strong>「もっと最高の二郎系ラーメンとサウナのムーブをしたい！そして同志と共有したい！」</strong></p>
<p><strong>「もっと手軽に一瞬でお店を探したい！」</strong></p>

<p>と思うようになり、、、</p>

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

<h2>サービス概要と使い方</h2>
<img alt="ogp.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1843728/24b13968-a695-103a-1e1c-5491f61039d9.png">

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

<p>以下のようにマップ内で自由に場所を指定して検索ボタンを押すと、瞬時に周辺の二郎系とサウナを表示します。</p>
<img alt="IMB_sSZqDZ.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1843728/e38643d9-a5fb-9a07-7e8d-0c8a6b1ee6ac.gif">

<h2>どんな機能がある？</h2>

<p>以下の機能をMVPで作成しました。</p>

<ul>
<li>マップ検索機能</li>
<li>二郎系から探す機能</li>
<li>サウナから探す機能</li>
</ul>

<h3>マップ検索機能</h3>
<img alt="IMB_LOfzDk.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1843728/47595e8b-7128-69c4-1d83-95645120648f.gif">

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

<p>また、以下のように中心点からの距離も表示していいます。</p>
<img alt="スクリーンショット 2022-02-21 21.06.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1843728/a4a3c8e9-a392-a179-1f77-16f2d9ab1677.png">

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

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

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

https://github.com/geokit/geokit-rails

<p>また、ボタンを押せば、現在地からの検索ができ、キーワード検索では、該当箇所へ瞬時に移動できます。</p>
<img width="表示幅" alt="スクリーンショット 2022-02-21 21.10.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1843728/67753d3c-6f10-1f78-7128-b8255b5db767.png">

<h3>二郎系&サウナから探す機能</h3>
<img width="表示幅" alt="IMB_n2uVAE.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1843728/4e509294-e3af-c7bf-a31a-448f69ef1880.gif">

<p>店舗から探すこともできます。</p>

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

<p>また、店舗の営業時間や電話番号、住所なども調べることができます。</p>
<img alt="ラーメン二郎 ひばりヶ丘駅前店 詳細 _ ジロサウナ〜.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1843728/5878985b-d8f8-8d60-30ff-53b91f8f0727.png">

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

<h3>現在アップデート中の機能</h3>
<p>現在、二郎系・サウナの投稿機能を実装しております。</p>
<p>ぜひ皆さまのおすすめの組み合わせを教えてください。</p>

<h2>使用技術</h2>
<blockquote>バックエンド</blockquote>
<ul>
<li>Ruby 3.0.3</li>
<li>Ruby on Rails 6.1.4</li>
</ul>
<blockquote>フロントエンド</blockquote>
<ul>
<li>JavaScript</li>
<li>Tailwind CSS</li>
</ul>
<p>開発前唯一知っていたBootstrapと比較してTailwind CSSの方が記述量は増えるが、柔軟性が高く、JavaScriptへの依存がなくJSフレームワーク（ゆくゆく導入したい）との相性も良いためこちらを採用しました。</p>

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

<h3>ER図</h3>
<img alt="ER.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1843728/87987227-640c-0875-bfbe-e2816c796d7a.png">

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

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

<h4>正確なデータベース</h4>
<p>既存のマップアプリだと、以下のような悩みがあると思います。</p>

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

<p>試しにGoogle Mapにて「中野　二郎」と検索すると、以下のようになります。</p>
<img alt="スクリーンショット 2022-02-21 21.43.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1843728/e9db8a48-2ea3-0737-78ea-4aa4a313e3a2.png">

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

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

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

<h4>マップ検索のしやすさ</h4>

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

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

<p>マップ検索では現在地はもちろん、タップ一つ簡単にさまざまな場所を検索できるように調整しました。</p>
<p>また、ほとんどがスマホでのアクセスになるため、レスポンシブにも対応しました。</p>

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


<h2>終わりに</h2>
<p>この記事をご覧くださり、ありがとうございます！</p>

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

<p>だからこそ、同じ同志の方たちに喜んでもらえる、そして、最高の体験を共有して盛り上がれる空間を作りたかったのです。</p>
<p>今回の記事では技術的なことについては触れませんでしたが、気になる方はgithubを置いておきますので、覗いてみてください。</p>

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

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

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

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