【個人開発】家で勉強できない私が「勉強場所の検索サービス」を作成しました ✍️

# はじめに
初めまして。ゆうき(@yuki31100725)と申します。

現在、プログラミングスクールRUNTEQに通ってRuby on Railsを学習しております。

今回、スクールの卒業制作として「**LearnLocator**」という、勉強場所(自習室・コワーキングスペース)の検索サービスを作成しました。

### サービスはこちら
https://www.learn-locator.com/

### GitHubリポジトリはこちら
https://github.com/Yuki11saitou/LearnLocator

<img src="https://i.gyazo.com/519b19ef929e67ddbfafb8e564683bd3.png" alt="Image from Gyazo"/>

<details><summary>本サービスとロゴに込めた思い</summary>

このロゴは、羽根ペンで筆を走らせるようなイメージと、LearnLocatorの「 L 」を組み合わせたデザインにしています。

また、サービス全体で「 白 」を基調としたデザインを採用しており、真っ白な紙に文字を書いていくような " 勉強 " のイメージを表現しています。

一方で、サービスを利用していただくと " 赤・青・黄・緑 " の4色が画面上に登場します。
( 赤：いいね / 青：口コミ / 黄：評価 / 緑：ブックマーク )

以上から、本サービスがあなたの " 勉強 " をサポートし、 " 彩り豊かな未来 " に羽ばたくきっかけとなって欲しいという思いを込めました。
</details>


# 1. 概要
家以外で勉強できる場所(自習室・コワーキングスペース)を検索できるサービスです。
- 現在の位置情報から、近くの勉強場所を検索
- 住所や施設のタイプから、勉強場所を検索
- 施設に対する口コミから、勉強場所を検索


# 2. 開発した理由
開発者である私自身が、「勉強する際に家では集中できない」と思っており、自習室やコワーキングスペースをネット検索で調査していたのですが、「もう少し簡単に調べられるアプリケーションが欲しい」と感じたのがサービス作成のきっかけでした。

また、下記のような課題を感じ、それを改善できるサービス作成をすることを決めました。
- そもそも自習室とコワーキングスペースの違いがわからず、利用する前にハードルを感じていたこと
- 自習室とコワーキングスペースの情報を一元管理しているようなサービスが見当たらなかったこと
- 施設ごとにHPが乱立しており、各施設の情報に辿り着くまでに手間がかかること
- 利用者の生の声(口コミ)は、Google Mapのレビューなどを見に行かないと確認できないこと
- 「興味がある」と感じた施設についても、別途Google Mapなどで経路情報を調べる手間があること


# 3. 機能
### メイン機能(ユーザー登録不要)
|                                                                                                          |                                                                                                          | 
| :------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------- | 
| (1) 場所検索                                                                                                 | (2) 一覧検索                                                                                                 | 
| <img src="https://i.gyazo.com/4164b0da4f85d187c34373b0cd1fc6a1.gif" alt="Image from Gyazo"/> | <img src="https://i.gyazo.com/82b4f5844dc1459e2756a71022cde53e.gif" alt="Image from Gyazo"/> | 
| 現在地近くの勉強場所がわかります。<br>地名などから周辺の場所を検索することもできます。                   | 口コミの一覧から条件を設定し検索できます。<br>結果の並べ替えも可能です。                                 | 

|                                                                                                          |                                                                                                          | 
| -------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | 
| (3) 口コミ検索                                                                                               | (4) 施設情報の確認                                                                                           | 
| <img src="https://i.gyazo.com/615afa46380fc2686519ea6912ab224e.gif" alt="Image from Gyazo"/> | <img src="https://i.gyazo.com/a53b0e31de95b99e6432fb8da7dd630d.gif" alt="Image from Gyazo"/> | 
| 勉強場所の口コミを検索できます。<br>他のユーザーが投稿した口コミを閲覧できます。                         | 口コミ・施設情報の確認のほか、<br>経路情報も確認できます。                                               | 

### サブ機能(ユーザー登録必要)
|                                                                                                          |                                                                                                             | 
| -------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | 
| (5) ブックマーク<br>                                                                                     | (6) 口コミ投稿                                                                                              | 
| <img src="https://i.gyazo.com/e1f9e33e553c15b7f72eb63de2d074b3.gif" alt="Image from Gyazo"/> | <img src="https://i.gyazo.com/67b7613d3c0cc31ea93cb3c08b88df1a.gif" alt="Image from Gyazo"/>    | 
| 施設のブックマークを登録できます。                                                                       | 口コミを投稿できます。<br>投稿したことをXでシェアできます。<br>投稿した口コミはマイページから確認できます。 | 

|                                                                                                          |                                                                                                          | 
| -------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | 
| (7) 口コミへのいいね                                                                                     | (8) マイページ                                                                                           | 
| <img src="https://i.gyazo.com/3dfe5741323094769521aa4255ac79a3.gif" alt="Image from Gyazo"/> | <img src="https://i.gyazo.com/ceb2e8c89660190242fdea4e2dd63453.gif" alt="Image from Gyazo"/> | 
| 口コミへのいいねができます。<br>いいねした口コミはマイページから確認できます。                           | マイページで「ユーザー情報の編集・退会」<br>や「投稿・いいねした口コミ」の確認ができます。                   | 


### その他
- Google認証によるユーザー登録・ログイン機能
- パスワードリセット機能
- 検索時のオートコンプリート(施設名)
- Xシェア機能
  - 施設情報
  - 口コミ投稿
- 様々なタイプでのソート機能
  - 施設の「口コミ数」「googleレビュー」
  - 口コミの「投稿日」「いいね数」
- トップページに使用方法や施設の違いなどを表示
- ヘッダーにQRコード表示でスマホからの利用を誘導
- 未ログイン者がログイン必要な機能に触れると「ログイン誘導モーダル」表示
- 存在しないURLに対するエラーハンドリング(idを含むもの・その他)
- XSS対策
- お問い合わせフォーム
- 利用規約
- プライバシーポリシー
- PWA対応
- SEO対策
- GitHub Actionsによるテスト自動化(RSpec・RuboCop)


# 4. 技術構成

### 使用技術

| カテゴリ       | 技術スタック                                                              | 
| -------------- | ------------------------------------------------------------------------- | 
| フロントエンド | Rails 7.1.3.4 (Hotwire/Turbo/Stimulus), JavaScript, Tailwind CSS, daisyUI | 
| バックエンド   | Rails 7.1.3.4 (Ruby 3.2.3)                                                | 
| データベース   | PostgreSQL                                                                | 
| インフラ       | Render.com, Amazon S3                                                     | 
| 開発環境       | Docker                                                                    | 
| 認証           | Sorcery, Googleログイン                                                   | 
| API            | Google Maps API, Google Places API                                        | 


### 画面遷移図
https://www.figma.com/design/jEObdmmCqTXRWpQH72SY9A/LearnLocator_%E7%94%BB%E9%9D%A2%E9%81%B7%E7%A7%BB%E5%9B%B3?node-id=0-1&t=Yrjiy1yTzEVb3e65-1

### ER図
[![Image from Gyazo](https://i.gyazo.com/3df832f88ab47e8f3cda4b5963107802.png)](https://gyazo.com/3df832f88ab47e8f3cda4b5963107802)

[詳細URLはこちら](https://www.mermaidchart.com/raw/b6d7e76d-8d55-429f-98b9-ca6ed3a8d236?theme=dark&version=v0.1&format=svg)


# 5. こだわった点
## 5.1 スマホ利用を想定した機能設計
### ボトムナビゲーションの採用
ボトムナビゲーションを画面下部に配置し、主要なページ・機能に1アクションで辿り着けるようにしました。

<img src="https://i.gyazo.com/6f94076faadadc92b40368c7572917bd.png" alt="Image from Gyazo" width="300"/>


### QRコード表示でスマホからのアクセスを易化
QRコードをヘッダーのドロワー内に配置し、スマホでのアクセスが容易にできるよう心掛けました。
主に下記のような状況下でメリットを発揮すると想定しています。
- PC利用者がスマホで利用する場合
- 複数人で勉強場所を探している際に、本サービスのリンクをシェアする場合

<img src="https://i.gyazo.com/1fcf68683a09cfce862f43418c8fb2a8.png" alt="Image from Gyazo" width="300"/>

なお、このQRコードのアイデアについては、スクールの先輩受講生のアプリ「SpeakUP」を参考にさせて頂きました。

- アプリのURL：https://speakup-app.com/
- リポジトリのURL：https://github.com/erika328/SpeakUp


### スマホでの操作を考慮したMap表示
「場所検索」ページでは、画面の縦幅を取得し、可能な限りMapの表示エリアを広げる設計にしています。

<img src="https://i.gyazo.com/13a92b7377c37bb988ae911ef0a34b92.png" alt="Image from Gyazo" width="300"/>

「施設の詳細情報」ページでも同様に、指でのピンチイン・ピンチアウトが十分にできるだけの幅を確保した設計にしています。

<img src="https://i.gyazo.com/e6e352f1e382ffc34819f344dc6d7370.png" alt="Image from Gyazo" width="300"/>


## 5.2 ユーザビリティの向上
### PWA(プログレッシブウェブアプリ)対応
PWA対応により、PCやスマホでネイティブアプリのような使い勝手を提供します。

＜PCで利用の場合＞
例えばMacBookの場合、Dockに配置して利用できます。
画面表示もスッキリします。

<img src="https://i.gyazo.com/13895edf74e5fb68d90563edbbdbf0e8.png" alt="Image from Gyazo" width="200"/>

<img src="https://i.gyazo.com/526e79809e821d0b1bf6cc8be61c167b.jpg" alt="Image from Gyazo" width="400"/>

＜スマホで利用の場合＞
スマホも同様、ホーム画面に追加できます。
画面表示も広くなり、利用しやすくなります。

<img src="https://i.gyazo.com/90077af30fd9ccfca00f3487ad509ed0.png" alt="Image from Gyazo" width="300"/>

<img src="https://i.gyazo.com/44dcbf7b2050d32bb3632355d3e64548.png" alt="Image from Gyazo" width="300"/>


### プラスαの情報はモーダル・ドロップダウンを利用
必ずしも全ユーザーに見せる必要がないようなプラスαの情報などは、モーダル・ドロップダウンを利用するなどしています。
これにより画面内はなるべくスッキリさせ、ユーザーを迷わせないようにしています。

<img src="https://i.gyazo.com/bfff237ba95f9ee71f9b0378df13d151.gif" alt="Image from Gyazo" width="300"/>

<img src="https://i.gyazo.com/10321732808aedfa3bd9719f04874aa8.gif" alt="Image from Gyazo" width="300"/>


### 入力文字数のリアルタイム表示
本サービスの口コミ投稿フォームでは、300文字の入力制限を設けています。
その際、入力文字数をリアルタイム表示し、文字数確認できるようにしています。

<img src="https://i.gyazo.com/13c657dfa6ccacb92b9bfa6256c7ab7a.gif" alt="Image from Gyazo" width="300"/>

### 1アクションで辿り着けないページには「戻る」ボタンを表示
ヘッダーやボトムナビゲーションから1アクションで辿り着けないような"階層が深い"ページには「戻る」ボタンを設置し、遷移前のURL情報を利用するなどして、元のページへ戻れるようにしています。

<img src="https://i.gyazo.com/b703290c2ddef1108b60db42584cff86.png" alt="Image from Gyazo" width="300"/>


### 未ログイン者に対し、ストレスなくログインに誘導

未ログイン者に対してもログインが必要な機能(ブックマーク、口コミへの投稿・いいね)は露出させ、ログインへの誘導を図っています。
また、ログインページに遷移させるのではなく、モーダル表示によって「そのページに留まるか」「ログインするか」を選択できるようにし、ストレスのない利用ができるよう心掛けています。

<img src="https://i.gyazo.com/e28a6e1f76b6baa271bff7f23a206349.gif" alt="Image from Gyazo" width="300"/>


### 検索フォームでのオートコンプリート
検索フォームにオートコンプリート機能をつけることで、ユーザーの文字入力の手間を省き、快適な検索を可能にしています。

<img src="https://i.gyazo.com/4852e5ca4abb688cecc4b0a3c7374dcd.gif" alt="Image from Gyazo" width="300"/>


## 5.3 エラーハンドリング・セキュリティなど
### XSS対策
今回、ユーザーがテキストを入力できる「口コミ」に関しては、HTMLタグやスクリプトを無効化し、XSS攻撃を防止しています。

<img src="https://i.gyazo.com/839e37689e96bcb7582d4c7987cad49c.png" alt="Image from Gyazo" width="300"/>


### idを含むURLのエラーハンドリング
「施設情報」や「口コミ詳細」ページはidを含んだURLとなっているため、存在しないid(又は削除された口コミのid)が入力された際はトップページへリダイレクトするようにしています。

<img src="https://i.gyazo.com/b6ad1f783cfd747835828db4d7fe0799.gif" alt="Image from Gyazo" width="600"/>


### 404ページのカスタマイズ
ユーザーがURLを間違えて入力した際に表示する404エラーページもカスタマイズしています。

<img src="https://i.gyazo.com/37d348df5eb73979130b23e2c6b53e6c.png" alt="Image from Gyazo" width="400"/>


# 6. 今後の展望
### 対応エリア・施設数の拡大
現在、総務省統計局の公表している「大都市」に分類される地域を含んだ、15都道府県の約600施設を登録しています。
今後はこれを日本全国に拡大していきたいと考えています。
[大都市について(総務省統計局)](
https://www.stat.go.jp/data/kokusei/2010/users-g/word7.htm#:~:text=%E3%80%8C%E5%A4%A7%E9%83%BD%E5%B8%82%E3%80%8D%E3%81%A8%E3%81%AF%EF%BC%8C,%E5%8C%BA%E9%83%A8%E3%82%92%E3%81%84%E3%81%84%E3%81%BE%E3%81%99%E3%80%82&text=%E5%B9%B3%E6%88%9022%E5%B9%B4%E8%AA%BF%E6%9F%BB%E3%81%A7%E3%81%AF,%E5%B9%B4%E3%81%AB%E6%96%B0%E3%81%9F%E3%81%AB%E8%A8%AD%E5%AE%9A%EF%BC%89%E3%80%82)

### 施設種類・診断機能の追加
施設の種類を「(学習が可能な)図書館」などにも拡張し、オススメの勉強場所を診断する機能も追加したいと考えています。

### テストコードの拡充
本記事執筆時点では、RSpecによるテストコードのうち、モデルスペックしか書けていなかったので、これからシステムスペックも記述することでカバレッジ率を上げていきたいです。


# 7. 最後に
今回のアプリ作成にあたり、お力添え頂いた全ての方々に心よりお礼申し上げます🙇‍♂️

10ヶ月程プログラミング学習をしてみて、学習前とは見える世界が一変したように感じますし、同時に知識不足も実感していて、まだまだ勉強し続けていくのだろうなと感じています📚

本サービスについては、今後も「学ぶ人をサポートするサービス」として価値提供できるよう、機能のブラッシュアップを図りたいと思います。

最後までご覧頂きありがとうございました！

※ X(旧Twitter)もやっているので、よろしければフォローして頂けると嬉しいです。

https://x.com/tripletsuper11