はじめに
はじめまして。
プログラミングスクールで9ヶ月間学習した後、受託開発企業にWebエンジニアとして転職し まもなく2年目を迎えます。
今回は、スクール在籍中に個人開発として取り組んだWebアプリ「FindLibrary」についてご紹介します。
※当時の記録を元にしているので、ところどころ初々しさが残っているかもしれません🐣
サービス概要
サービス名:FindLibrary
内容:自習室のある図書館を検索できるサービス
URL:https://cryptic-headland-70938-ab332c316ec4.herokuapp.com/
開発背景
私は普段から図書館の自習室で作業することが多いのですが、自治体によって設備の有無が異なり、毎回各図書館のHPを確認するのが手間だと感じていました。
「もっと手軽に、自習室のある図書館を検索できるサービスがあれば便利なのでは?」という思いから、本アプリの開発に取り組みました。
主な機能
①自習室の詳細情報の確認
「自習室の有無」「座席数」「Wifi,電源の有無」「定休日」など自習室の詳細情報だけでなく、「位置情報」も確認できるので、アクセスのしやすさも伏せてチェックできます。
自習室詳細情報1 | 自習室詳細情報2 |
---|---|
![]() |
![]() |
「自習室の有無」「座席数」「Wifi,電源の有無」「定休日」 の確認 | 「地図」「住所」 の確認 |
②検索機能
検索項目にて「図書館名」「都道府県」「自習室の有無」別に図書館を絞り込み検索ができます。
検索機能 |
---|
![]() |
③お気に入り登録機能
お気に入りの図書館を登録し、マイページでいつでも確認できます。
お気に入り登録/解除 | マイページでお気に入り一覧確認 |
---|---|
![]() |
![]() |
④ユーザーの住む街の近くにある図書館を確認
「色んな図書館があるけど自分の街に近い図書館はどれだろう?」というお悩みに対し、ユーザーの住む街の近くにある図書館をピックアップしてもらえるようになっています。
近くの図書館を確認(レコメンド機能) |
---|
![]() |
⑤コメント機能
投稿にはどなたでもコメントができるようになっています。
「Wifi回線良好だったよ」「静かで勉強しやすいよ」など、追加したい情報を記載できます。
コメント機能 |
---|
![]() |
使用技術
カテゴリ | 技術 |
---|---|
バックエンド | Ruby on Rails 7.1.2, Ruby 3.2.2 |
フロントエンド | JavaScript |
CSSフレームワーク | TailwindCSS |
データベースサーバ | PostgreSQL |
ファイルサーバ | Amazon S3 |
アプリケーションサーバ | Heroku |
WebAPI | Google Maps API |
工夫したポイント
①検索項目にてオートコンプリート機能を実装
検索項目にて、オートコンプリート機能を実装することで、ユーザーがサクッと検索できるように工夫しました。
これにより、検索したい図書館名の一部を入力するだけで内容を自動補完されるようになります。
オートコンプリート機能の実装 |
---|
![]() |
2. 位置情報登録の簡素化
ユーザーが新規投稿する際、位置情報を簡単に登録できるようにこだわりました。
具体的には、住所を入力しなくても、図書館名を入力するだけで地図上にピンが差されるようになっています。
おわりに
当時は初めてのアプリ開発ということで、右も左もわからない中、手探りで形にしていったのがこの「FindLibrary」です。
「あったら便利だな」と思い描いていたものを、自分の手で形にできたことがとても嬉しく、今でも印象に残っています
Webエンジニアとして仕事をするようになった今も、ふと「また何か作ってみたいな」と思うことがあります。
こうしてアウトプットとして記事に残すことで、自分の成長や当時の思いを振り返るきっかけにもなりました。
最後まで読んでいただきありがとうございました