【個人開発】ミュージアムを検索・投稿できるサービス「MuseUP」を作りました！

## はじめに
はじめまして、とほほと申します！
プログラミングスクール「RUNTEQ」を卒業し、集大成としてポートフォリオを制作したため、リリースしたサービスについて本記事で紹介させていただきます🙇
なお、最後に開発にあたって参考にさせていただいた記事も一覧で掲載しておりますので、今後個人開発をされる方の参考になれば幸いです😊

### サービス URL🔗
https://museup.jp/

### Github リポジトリ🔗
https://github.com/tohohosan/MuseUP

## 1. サービス概要 
![MuseUPのロゴ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3295951/8a5a0828-cacd-4b2d-b511-ba9020a32483.png)


MuseUP（みゅーじあっぷ）とは、近くのミュージアム（博物館・美術館等）を検索したり、おススメしたいミュージアムを投稿したりして、もっとミュージアムを知る・楽しむことができるサービスです！
ユーザーは、他のユーザーが投稿したミュージアムの詳細を閲覧したり、地域やカテゴリ、現在地から条件に該当するミュージアムを探すことができます。そして、ミュージアム好きなユーザーは、自分がおススメしたいミュージアムを投稿したり、ミュージアムのレビューを投稿することが出来ます。加えて、ミュージアムをリストに登録して管理したり、ミュージアムに対してプライベートなメモを記録することができます。



### 開発の背景💁
私は昔から博物館・美術館巡りが趣味で、大学でも博物館の学芸員資格を取得しました。
そんな私にとってミュージアムは身近なものでしたが、「もっと多くの人にミュージアムを身近に感じてほしい！」「ミュージアム好きな人が使って楽しめるサービスがほしい！」と思い、このサービスを作りました✨

## 2. サービスの機能
### ログインが不要な機能
#### ❶ミュージアムを検索する🔍
トップページの「ミュージアムを探す」ボタンやメニューバーの「検索」ボタンからミュージアムの一覧ページに飛ぶことができます。
[![Image from Gyazo](https://i.gyazo.com/d51e297e91c08dcdb79eb5e032c0a08d.gif)](https://gyazo.com/d51e297e91c08dcdb79eb5e032c0a08d)

一覧ページの「詳しく検索する」ボタンで、ミュージアム名・都道府県、カテゴリから AND 検索ができます。また、ユーザーの現在の位置情報から最も近いミュージアムも検索できます。
[![Image from Gyazo](https://i.gyazo.com/598b6b3c1acc5797c758634e60bd5d18.gif)](https://gyazo.com/598b6b3c1acc5797c758634e60bd5d18) 

#### ❷ミュージアムの詳細を閲覧する📓
一覧ページでミュージアムのピンをクリックすると、詳細ページを閲覧できます。詳細情報、レビュー、リスト、メモのタブの切り替えができます。

[![Image from Gyazo](https://i.gyazo.com/89e7a77666b8f4cf8eec023030eb4962.gif)](https://gyazo.com/89e7a77666b8f4cf8eec023030eb4962) 

### ログインが必要な機能
#### ❶ユーザー登録・ログインをする👤
メールアドレスとパスワードを設定して、ユーザー登録ができます。
また、ログインのハードルを下げるため、Google アカウントや X のアカウントでもログインが可能になっています。
[![Image from Gyazo](https://i.gyazo.com/bfe842646f42352ddbf27202b5e47f90.gif)](https://gyazo.com/bfe842646f42352ddbf27202b5e47f90)

#### ❷ミュージアムを投稿する🗺️
おすすめのミュージアムがあれば、ぜひ投稿してみてください！
投稿ページでは、ミュージアム名を途中まで入力すると、オートコンプリート機能で候補がサジェストされます。候補から選択すると住所が自動的に入力されます。 
[![Image from Gyazo](https://i.gyazo.com/ee0bb62f002032b06385c9226c520ac5.gif)](https://gyazo.com/ee0bb62f002032b06385c9226c520ac5)

#### ❸ミュージアムのレビューを投稿する💬
既に訪れたミュージアムがあれば、そのミュージアムの詳細ページからレビューを投稿できます。レビューのコメントと 5 段階の評価を記録できます。
[![Image from Gyazo](https://i.gyazo.com/f24319d00d5ff7a31f1e6cb7f09618ba.gif)](https://gyazo.com/f24319d00d5ff7a31f1e6cb7f09618ba)

#### ❹ミュージアムをリストに登録する🗂️
投稿されているミュージアムを、自分用のリストに登録することもできます。
デフォルトでは「行きたい」と「行った」リストが用意されていますので、行きたいミュージアムや既に行ったミュージアムをリストで管理してみてください！
それに加えて、任意のリストも新規作成できるので、あなたの好きなようにミュージアムを管理できます。
[![Image from Gyazo](https://i.gyazo.com/ade8e43cf7fc70db30527666c1eefd03.gif)](https://gyazo.com/ade8e43cf7fc70db30527666c1eefd03) 

#### ❺ミュージアムのメモを記録する
ミュージアムに対するプライベートなメモを記録することができます。
既に訪れたミュージアムなどで、何か自分用に書き記しておきたいことがあれば、詳細ページからメモを作成してください。
[![Image from Gyazo](https://i.gyazo.com/eaf3373f9cb9737ce8e0e1d59521a68e.gif)](https://gyazo.com/eaf3373f9cb9737ce8e0e1d59521a68e) 

## 3. 技術構成
### 技術スタック🔧
| カテゴリ | 技術 | 
|:-----------|------------:|
| フロントエンド     | HTML / CSS (Tailwind CSS + daisyUI) / Javascript     | 
| サーバーサイド       | Ruby 3.3.6 / Ruby on Rails 7.2.2.1        | 
| データベース         | PostgreSQL          | 
| インフラ       | Render.com / Amazon S3       | 
| Web API    | Maps Javascript API / Geocoding API / Places API     | 
| その他 gem       | devise / carrierwave / mini_magick / ransack / kaminari / rails_admin / omniauth       | 

### ER 図💻
[Lucidchart](https://lucid.app/lucidchart/2716b1de-cf07-4dcc-a26d-5aad6ebfddd3/edit?viewport_loc=-2148%2C-109%2C4039%2C1876%2C0_0&invitationId=inv_d7b8efe5-7b2a-43b8-8af5-8c2bc4022823)
![空白の図 (4)](https://github.com/user-attachments/assets/7f662130-97ce-44cf-aa72-f345df48d97a)

### 画面遷移図📚
[Figma](https://www.figma.com/design/AKh4o0wpuAARXc1Ha80qgS/%E7%84%A1%E9%A1%8C?node-id=0-1&t=hWs0E2hdRpTOl0hV-1)

## 4. 参考にした記事
### devise でのログイン機能
https://zenn.dev/h_hana/articles/6dac69de42cbfe#4.%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%92%E8%A1%A8%E7%A4%BA

### Google Maps API と連携した投稿機能
https://zenn.dev/code_journey_ys/articles/594eb6153e29c8#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB

https://qiita.com/lemonade_37/items/51ca0f18fd9da842bb00

https://qiita.com/lemonade_37/items/0cf88a654b18a73b16f5

### ファビコン設定
https://qiita.com/so__hei__/items/6967aefdfe4e0946dbdd

### ページネーション（Tailwind CSS ＋ kaminari）
https://qiita.com/yuki31100725/items/f8f3ddeaa990de342d11

### Render でのスリープ対策
https://zenn.dev/no215/articles/ff4f1670c080e4

## おわりに
画面遷移図・ER図を作成してから 2 ヶ月の期間で、無事主要機能の実装にまでたどりつくことができました！
ご協力いただいた皆様、本当にありがとうございました🙇
これからも技術のキャッチアップに努め、研鑽を重ねていこうと思います💪

ここまでお読みいただきありがとうございました！