修繕して欲しい箇所の位置、写真、修繕内容について連絡ができるサービスです。グーグルマップにマーカーを落とすことで簡単に位置を教えることができ、管理者側もカレンダー機能、グラフ機能があることでデータを簡単に整理できます。
- Ruby2.6.5
- Rails5.2.4.3
- Rspec
- jQuery
- Bootstrap4
- PostgreSQL
- AWS(VPC, RDS, EC2, S3, ALB, Route53, ACM)
- Docker/docker-compose
前職において、住民から道路の修理等の要望を受け、業者の発注するという業務についていました。 問題として、
- 電話での応答なので詳しい場所が伝わりづらい
- 写真を持ってくるために、市役所までくる必要がある
- 業務自体が紙ベースなので、データの整理が大変である などの問題が生じておりました。
この経験から住民と行政を繋ぐ際に、手軽に写真や、位置情報を伝えること、管理者側が簡単に整理することができるサービスを作りたいと思い、作成いたしました。
ポートフォリオを作成する前に、まずこのサービスについて、何が求められているか調査する必要があったので、ユーザーと管理者に調査を行いました。
#サービス構成図 <ユーザー側の声>
- できるだけ最低限の入力で済ませたい
- 住所がない場所を相手に伝えることができたら便利
- どの場所で工事をしているか見れたら嬉しい
<管理者側の声>
- 自動で工事完了メールを送ってほしい
- データを視覚的に整理してほしい（カレンダーなど）
- データの検索機能がほしい
インタビューより以下の点に力を入れてサービスを作成しました。
- 必要最低限の入力で簡単に投稿
- 位置情報入力のUX
- 管理者がデータを視覚的に整理しやすくする
- Google Maps Javascript API を用いた位置情報伝達
- カレンダーや、グラフ機能を用いることで視覚的に見やすく
- wheneverを用いたバッヂ処理
- Rspecによるテスト
- AWSを用いたデプロイ
- docker cicleciの使用（予定)
- ログイン、 サインアップ機能（devise)
- email,パスワード、ユーザー名必須（ログイン時はemailとパスワードのみ）
- ゲストログイン機能（ゲストユーザーは退会、プロフィール変更不可）
- CRUD機能
- Google Maps Javascript API を使い、マーカーを落として箇所の緯度・経度を取得
- 案件内容のキーワード、進捗状況、作成日時,ユーザー名で検索が可能
- 緊急度、作成日時で並び変え可能
- 案件に対して、いいねができる。Ajaxによる対応するようにしている。さらに、いいね数も見れるようにしている。
- 案件に対して、コメントができる。また、コメントの編集、削除が可能
- Ajaxを使うことでページ遷移せずに作成できる。
- いいね、コメントがされた場合、案件作成ユーザーと、管理者に対して通知する。通知された案件に対して、詳細が確認できるようにリンクをつけている。
- 詳細画面にいくと「未確認」から「確認済み」になるようにしている。
- 案件に対して、該当項目のラベルをチェックすることで表示できる。
- ラベルは管理者画面で、Ajaxを使うことでページ遷移せずに作成できる。
- 管理者が工事開始日と、工事完了日をいれるとことでカレンダーに表示される。
- 案件詳細にリンクできるようにしている。
- 作成日時から、1週間の案件、1年間の案件の棒グラフを作成している。
- ラベルより、案件を分類し円グラフで表示をしている。
- 掲示板を作り、お知らせを入力できる。
- Ajaxを使うことでページ遷移せずに作成できる。
- wheneverを使い、毎日AM11:00に送信するように設定。
- wheneverを使い、毎日AM11:00。
- 管理者はユーザーを削除、編集できる。
- 管理者は管理者を削除することができない
- 全案件箇所をマップにマッピング
- 未着手は黄色、工事中は赤でマッピング
- 案件詳細にリンクできるようにしている。
モデル設計後、機能の追加や、改善を行っていくうちに必要なカラムや、いらないカラムが出てきており、当初通りの計画では上手く行かないことに悩まされた。
しかし、ほとんどの機能は予定通りのDB設計で行えたので、DB設計の重要性を感じることができました。今後はさらにDB設計を学び、業務に生かしていきたいです。
デプロイ後、様々な人にレビューをしてもらった結果、UI/UXに関して様々な意見をもらいました。
- コーポレートカラーを意識して、どんな印象を与えたいかを考えてほしい
- 緊急度の指標の説明文があった方がわかりやすい
- マップを未着手、工事中を色で分けて、わかりやすく
上記のような意見をもらい、下記のことを意識しました。
- 基本的なデザインについて学び、ユーザーに対してどのような印象を与えたいかを考える。
- 視覚的にわかるように、アイコンや、イメージ色（削除なら赤など）を意識して、実装する
まだまだ、改善点があるのでたくさんの人にフィードバックをもらい、さらに良くなるように努力してきます。
実装予定の機能
- docker, cicleciの実装
https://docs.google.com/spreadsheets/d/1SCTHp8nXC_ieGuNbFEBg1TDstzUigWyWO77LK7MQDDg/edit#gid=0
https://docs.google.com/spreadsheets/d/18N2iG-viN3q7usR3FhspYlFYF2ObiG7418x0PUsB9Ys/edit#gid=0
https://docs.google.com/spreadsheets/d/1i6w_WKBIz_PW9PrWvviHsScHt6MfP3jJl5EMSp1-7rg/edit#gid=0
https://docs.google.com/spreadsheets/d/1mrwzfg59_YZ_7o_6FQ5d5z4Qe7je0MNfFt-0vSVqpak/edit#gid=0
carrierwave
・mini_magik
・device
・ransack
・Geocoder
・Google Maps API