【個人開発】大阪西成での飲み歩きを支援するサービス「西成泥酔旅行」を開発しました

## はじめに
みなさんはいわゆる「はしご酒」がお好きでしょうか？

休日お昼の明るいうちから生ビールをひとつ。2 軒目は寿司でも軽くつまみながら緑茶ハイ...といったように、お店×料理×お酒の膨大な組み合わせから、その時の気分に応じて自由に楽しめるのが「はしご酒」の魅力です。

私がその魅力を知ったのは新卒1年目の頃で、それから現在まで趣味として細々と飲み歩きを続けてまいりました。

大阪在住のため、主に難波や梅田といった有名エリアで活動することも多いですが、特に私が大好きになったのが「西成」という街です。


## サービス開発の背景
ここでいう「西成」は、大阪西成の[新今宮エリア](https://shin-imamiya-osaka.com/)を指しています。

かつては西成といえば「治安の悪い街」というイメージが色濃くありましたが、近年は道頓堀やUSJ、さらには京都など様々な観光地へのアクセスの良さから、若者や外国人観光客が多く訪れるスポットになっています。2022年に星野リゾートが新今宮駅前にオープンしたのもそのためです。

私はこのエリアで飲み歩きを始めて以来、100 店舗以上の居酒屋を巡ってきました。
今ではGoogle Mapのピンがどえらいことになっております。

<img width="350" alt="img" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3119590/86265462-5d4d-9936-2718-bd555753be09.jpeg">


安くておいしい上に、下町人情を感じるあたたかいお店がたくさんあり、時間がいくらあっても足りません。
飲み歩きするのにこれ以上最高な街はないと思っています。

「この良さをもっと知ってほしい！」と、今までは私自身が友人などを現地案内して布教を行なってきましたが、己の身ひとつで広められる範囲には限度があります。

「それなら、長年培った知識経験を全て落とし込んだサービスを作って、より多くの人に西成で飲み歩きする楽しさを伝えたい！」と思い立ち、「西成泥酔旅行」を開発するに至りました。


## サービス内容
<img width="700" alt="img" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3119590/322911ba-ce53-2193-ae7d-e116555f6d58.png">

サービスURL：https://nishinari-izakaya.net
（PC・モバイル端末どちらからでもご利用いただけます）


### 技術スタック
- フロントエンド: Tailwind CSS (v3.4.3), DaisyUI (v4.11.1), Hotwire
- バックエンド: Ruby (v3.2.3), Ruby on Rails (v7.0.4)
- データベース: PostgreSQL (v16.2)
- 認証: Google OAuth
- インフラ: Docker (v20.10.8), Koyeb
- API: Google Maps API


### 居酒屋検索機能
<img width="600" alt="img" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3119590/458f74bf-d5c1-48df-c7d7-60a799a56ad8.png">

前述のGoogle Mapに保存していた中からおすすめをピックアップし、```izakaya```テーブルに**210件**登録しています。（めっちゃ時間かかりました）

店名検索も実装していますが、メインはタグ検索で気分に合ったお店を探していただく使い方を想定しています。

例えば「西成エリア＋朝呑み＋ホルモン」と指定すると、朝一からホルモンとビールで優勝していただけます。

<img width="600" alt="img" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3119590/550ab182-b449-7820-d447-3be7a90513ac.png">

また、居酒屋以外に「喫茶店」や「銭湯」などのスポットも参考に登録しています。(飲んでから銭湯に行くのは危ないのでダメです)

実は西成・新世界ともにレトロな純喫茶が数多くあるので、飲み歩きのひと休みには喫茶店がとてもおすすめです！


#### こだわりポイント
各居酒屋をクリックして詳細画面を開くと、ちょっと便利な機能を使っていただけます。

<img width="600" alt="img" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3119590/ed5c9d6c-f384-d13d-14cc-13c252fdc6c2.png">

 - Google Mapに遷移して詳しい情報を確認できる
 - 現在地からお店までの経路を調べられる
 - 店名をキーにYouTube動画を検索できる

あまり知られていないかもしれませんが、西成界隈には飲み歩きYouTuberの方が大勢いらっしゃるので、だいたいのお店は動画で雰囲気を確認することができます。お気に入り居酒屋を見つける一助になれば幸いです。

また、一部店舗（90軒くらい）ですが私のひとことコメントも付けていますのでよろしければ参考にしてください！


### 飲み歩き計画作成機能
<img width="600" alt="img" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3119590/8abc6e07-76cd-c0d9-50a2-875357162aca.png">

ログインユーザーは居酒屋一覧からお店を追加して、飲み歩き計画を作成することができます。
公開・非公開を指定することもでき、公開している計画はXに投稿できます。

西成は朝8時位からお店が開き出すので、駅前に8時集合・20時解散すれば、12時間飲み歩くことができます。
1軒30分ペースで回ると24軒の行程を組むことになるので管理が大変煩雑です。
そんな時に、この機能がみなさんを強力にサポートします！


#### こだわりポイント
さすがに24軒もはしごできませんが、飲み歩き時によくあることとして、急な計画変更があると思います。

「次の店が満席だったからあの店に行こう！」
「ちょっとお腹いっぱいだから先に喫茶店で休憩したい」
「楽しすぎるので次はカラオケ居酒屋でブチ上がりたい」

こんな時にサクッと計画を編集できるように、ドラック＆ドロップで居酒屋の順番を並べ替えられるようにしました。

<img width="600" alt="img" src="https://i.gyazo.com/9e9548b4e81a97d2ec8b4edc14c7b80b.gif">

実装にあたっては[gem ranked-model](https://github.com/brendon/ranked-model)およびJavaScriptライブラリの[Sortable](https://github.com/SortableJS/Sortable)を利用しました。参考にさせていただいた記事は以下です。

https://maful.web.id/posts/build-drag-and-drop-with-rails-hotwire/


## 今後について
まだまだ粗削りなサービスでやるべきことが多々あるのですが、今後追加したい機能としては、「飲み歩き計画の共同編集機能」があります。

現在は計画を作成したユーザーしか編集できない仕様になっていますが、招待の仕組みを用いて複数ユーザーで共同編集できようにし、グループはしご酒の利便性向上に繋げる所存です。

また、外国人観光客の方の利用も想定して英語切り替え機能を実装している中で、一部英語対応できていない部分があるので、そこも完全に対応したいと考えています。

## 最後に
このサービスを通して、少しでも多くの方が西成に興味を持っていただけると嬉しいです！

そのためにこれからも愛着を持って、長くこのサービスを続けていきたいと思っています。

不具合などありましたら恐れ入りますが、フッターのお問い合わせやコメントにてお知らせいただけると大変ありがたいです。

最後までお読みいただき、誠にありがとうございました！🍻