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

Last updated at 2024-11-12Posted at 2024-11-09

はじめに

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

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

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

サービスはこちら

GitHubリポジトリはこちら

本サービスとロゴに込めた思い

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

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

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

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

1. 概要

家以外で勉強できる場所(自習室・コワーキングスペース)を検索できるサービスです。

現在の位置情報から、近くの勉強場所を検索
住所や施設のタイプから、勉強場所を検索
施設に対する口コミから、勉強場所を検索

2. 開発した理由

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

また、下記のような課題を感じ、それを改善できるサービス作成をすることを決めました。

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

3. 機能

メイン機能(ユーザー登録不要)


(1) 場所検索	(2) 一覧検索

現在地近くの勉強場所がわかります。地名などから周辺の場所を検索することもできます。	口コミの一覧から条件を設定し検索できます。結果の並べ替えも可能です。


(3) 口コミ検索	(4) 施設情報の確認

勉強場所の口コミを検索できます。他のユーザーが投稿した口コミを閲覧できます。	口コミ・施設情報の確認のほか、経路情報も確認できます。

サブ機能(ユーザー登録必要)


(5) ブックマーク	(6) 口コミ投稿

施設のブックマークを登録できます。	口コミを投稿できます。投稿したことをXでシェアできます。投稿した口コミはマイページから確認できます。


(7) 口コミへのいいね	(8) マイページ

口コミへのいいねができます。いいねした口コミはマイページから確認できます。	マイページで「ユーザー情報の編集・退会」や「投稿・いいねした口コミ」の確認ができます。

その他

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

画面遷移図

ER図

詳細URLはこちら

5. こだわった点

5.1 スマホ利用を想定した機能設計

ボトムナビゲーションの採用

ボトムナビゲーションを画面下部に配置し、主要なページ・機能に1アクションで辿り着けるようにしました。

QRコード表示でスマホからのアクセスを易化

QRコードをヘッダーのドロワー内に配置し、スマホでのアクセスが容易にできるよう心掛けました。
主に下記のような状況下でメリットを発揮すると想定しています。

PC利用者がスマホで利用する場合
複数人で勉強場所を探している際に、本サービスのリンクをシェアする場合

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

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

スマホでの操作を考慮したMap表示

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

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

5.2 ユーザビリティの向上

PWA(プログレッシブウェブアプリ)対応

PWA対応により、PCやスマホでネイティブアプリのような使い勝手を提供します。

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

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

プラスαの情報はモーダル・ドロップダウンを利用

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

入力文字数のリアルタイム表示

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

1アクションで辿り着けないページには「戻る」ボタンを表示

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

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

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