Zenn
🍊

ガチャ感覚で店を決めてしまいたい！...「がらぽんごはん」を作った

2023/02/02に公開
Rails
Ruby
個人開発
tech

はじめに

昨年退職して、アルバイトしながらRubyなどの勉強をしてきました。
転職活動のためのポートフォリオができあがったのでここに残しておきます🤲✨

このサービスとは

友人や恋人、会社の人とごはんに行く時、どこでもいいのにどこにしようか悩んで困ったことはないでしょうか？
そんな時に「ガチャ感覚」で決めれたら楽そう、「尾行めし」のよう他人の後ろに付いてって決めれたら楽しそうと思い開発しました！

https://garapon-gohan.com

内容

簡単にいうと、飲食店のメモ帳です📝
他人がメモした飲食店も見れて、性別や年齢がばらばらな人たちが行っている店を参考にできたら役に立ちそうだな〜とも思って作りました。以下は工夫したところです🤝

▼　「マイページ」か「みんなのリスト」から飲食店をランダムで選べるようにしました

がらがらぽんが回って、玉が出て、店名が出るという一連動作は、実装する前は難関だと思っていましたが、GIF画像で一件落着でした。CSSでタイマーの設定ができるなんて感動した回でした😌
Image from Gyazo

▼　フォローしたユーザーの行きたい店をスタンプラリーのようにして、
コンプリートを目指せたら楽しいと考えました(怖いですかね🌝)

Image from Gyazo

▼　道端でいい店を見つけた時にパッとメモできるように使いたかったので、
最初のページのマイリスト一覧からでも簡易的に新規登録できるようにしました！
↑マイリスト一覧 // 新規作成ページ↑

店のジャンルを画像にしてパッと見て分かりやすくしたり、画像にカーソルを合わせると枠線が太くなったりと平坦な見た目にならないようにしました！

この一覧ページでは、自分の投稿一覧と、他人の投稿一覧を分けることに苦戦しました。検索機能も入れていたので、コントローラーの定義なかで自分と他者の場合分けをするとコードが長くなるし、モデルを分けても同じ内容のMVCを作ることになると悩んでいましたが、"クエリ文字列"でurlに値をつけて、その値をparamsの受け取りで分けることで無駄に新しいviewやモデルを作らずに済みました。

使用技術

バックエンド

  • Ruby on Rails

フロントエンド

  • JavaScript

  • TailwindCSS

  • daisyUI

    daisyUIの設定にはてこずりましたが、デザイン性のあるボタンを表示できた時は嬉しすぎて、技術記事をはじめて書くきっかけになりました😂

API

  • Maps JavaScript API (Geocoding、Places)

    「現在地の取得 → 緯度経度より地図表示 → 検索した地名の近くの複数の店を表示＆マーカーを立てる → マーカーをクリックすると店名がテキストボックスに表示される」 を実装をしました。
    google APIの参考記事はたくさんありましたが、自分のやりたい流れは出てこなくて苦戦しました。まずJSの基礎勉強からして、実装には5日間ぐらいはかかって諦めようとした矢先にできました、、

ER図

画面遷移図

このあと

herokuは料金がかかるので他のに変えようと考えています、毎日ちょっとずつ料金が増えています。
JSの勉強も進めたい。

最後まで読んでくださりありがとうございました！

Discussion