概要
アプリ名： TESCO
教員専用のコミュニティサイトで、主に３つのことができます。
・ 教員特有の気付きなどを記事にできること
・ 教員同士で質問を解決できること
・ イベント（勉強会など）を作成できること
使用技術
- Ruby 2.7.2
- Ruby on Rails 6.1.4
- MySQL 8.0
- AWS S3
- Docker
- CircleCI CI/CD
- Rspec
- Google Maps API
- React.js
アプリ構成図
このアプリを作ろうと思ったきっかけ
前職で教員をしていた頃、
「教員ってみんな仲が良い」とか、「気軽に相談できる先輩の先生がいるはずだ」と思っていました。
ですが、どの先生も皆とても忙しそうに業務をされている為、意外と気軽に相談できずにモヤモヤすることがありました。
なので、時間を気にせず先生同士がコミュニケーションを取れる場を作ろうと思い、このアプリを作ってみました💪
主なアプリの機能紹介(管理者ver.)
管理者は主に、検索、閲覧、削除をメインとしたシンプルなものとなっています。
ログイン機能
gemのdeviseを用いて、実装しました。
ユーザー管理機能
ユーザーの一覧と詳細を取得したり、名前とメールアドレスから検索もできます。
また、ユーザー一覧から、論理的削除と復旧が可能です。
記事、質問、イベントの管理機能
これも、ユーザーと同じく、一覧と詳細に遷移、削除、検索が可能です。
主なアプリの機能紹介(ユーザーver.)
アカウント関係
こちらも管理者同様gemのdeviseを用いて作成しました。
出来る事
- アカウントの登録、退会（論理的削除）
- ログイン、ログアウト
- パスワードを忘れた時のリカバリーメールの送信、削除
- ユーザー情報の更新（メールアドレス、パスワード） 👈 現在のパスワード入力必要
- ユーザー情報の更新（アカウント名、プロフィール、アバター画像） 👈 現在のパスワード入力必不要
記事関係
#####記事の作成、編集、削除
教員の日々はとても忙しいので、シンプルかつ使い勝手の良さそうなAction Textを採用しています。
画像を、そのままドラッグアンドドロップで添付することが可能です。
#####いいね機能
記事投稿には、必須とも言えるいいね機能をReact.jsとAjaxで実装しました。
コメント機能
コメントは、comment_idを持たない親コメントとcomment_idを持つ子コメントがあるので、コメントへの返信も可能です。
質問関係
おそらく、実際にこのサイトが運営されるとするなら一番利用率が高いと予想されるのが質問機能だと思っています。
質問・回答の作成、編集、削除
これらの機能も記事同様Action Textが使われています。（教員の質問は、割と画像とか多そうなので）
また、回答にもAction Textを用いることで、より視覚的なサービスを提供できると考えました。
質問と回答を２ちゃんねるなどのスレッドのように表示することで、誰でも気軽に質問の流れに沿って回答ができるようにしました。
ベストアンサー機能
これも、質問機能には必須な機能だと思い実装しました。
回答一覧とは、別でベストアンサーを表示しています。
また、ベストアンサーがついた質問は、質問一覧で「解決済み！！」という表示が出ます。
### イベント関係
イベントの作成、編集、削除
これは、記事や質問と違い、Action Textは用いていませんが、日付のフォームが３つある為、validationを自作しました。
明日以降かつ予約締め切り → 開始日時 → 終了日時の順番でないと、エラーになるようにしています。
イベントの開催場所(Google MAPs API)
APIを実装したことがなかったので、身近なGoogle MAPs APIを使ってみました。
住所は文字だけでは分かりづらいですが、MAPを入れたことで、誰でもすぐに場所がわかるの良いなと感じています。
イベント参加機能
イベント作成者は、イベントの参加者をリストで見ることができます。
作成者でないユーザーはイベントに参加することができます。
その他
- Dockerを用いての仮想環境の構築
- CircleCIで、RspecとRubocopの自動実施。
また、masterブランチへのpushでherokuに自動でデプロイ。 - pruduction環境では、画像をS3へ保存
特にこだわったポイント
全体的にシンプルな見た目に！
教員には、幅広い世代の方々がいますが、年配の方でもパソコンを結構使えます。
ですが、あまりに凝ったUIだととっつきにくいそうなので、シンプルにしてみました。
もちろん、レスポンシブ対応済みです！！
ユーザーの論理的削除
これは、退会してしまったユーザーの情報を残すために採用しました。
また、教員は個人のメールアドレスを使わず、市などから用意される教員用のメールアドレスを用いることが予想されます。
なので、仮に退会してしまったとしても、登録済みのメールアドレスで復旧できるようにしました。
いいね機能
先ほども紹介いたしましたが、React.jsを使って、いいね機能を実装しました。
機能としては、クリックしたらハートの色とテキストを変えて、Ajaxでいいねを送信するというシンプルなものです。
リダイレクトせずにHTMLの要素を触れるのは非常に素敵だと思ったので、これからもどんどん触ってみたいです。
コメントのフォームや、logoのメニュー
こちらもReact.jsを用いて、クリックをすることで表示の切り替えをできるようにしました。
検索機能
当初はgemのransackを入れて検索をするつもりでしたが、Action Textとの相性が悪かったので、思い切って自分で作ってみました。
この際にSQLインジェクションにも気を付けて実装しました。
記事と質問は、タイトルと内容からあいまい検索、
イベントは、タイトルか内容と住所を ANDとOR検索できるようにしています。
Rspecのテスト
実際にリリースされるとするならば、継続してメンテナンスをする必要があると感じたので、テストにも力を入れて実装しました。
特にイベント機能は、フォームの数も多く、またvalidationも多い為、気合を入れてテストコードを書きました。
テストが全て通った時は、感動ものでした...
今後やってみたいこと
とりあえず、以下の３つを頑張ります。
React.jsとRailsAPI
- React.jsに初めて触れてみましたが、DOMの操作が楽しかったので、小さい機能からコツコツと積み上げて実装していきたいです。また、Reactの他にもVue.jsにも触れてみたいです。
それに加えて、RailsのAPIモードにも興味があるので、React.jsと共に使ってみたいと思います。
他の言語にも触れてみる
- Railsだけでなく、他の言語にも興味があるので、それらを使って簡単なアプリなども作ってみたいです。
記事を書く
- アウトプットの重要性は前から感じており、ちょこちょこnoteに記事をアップしていましたが、このアプリの作成ですごく悩んでいる時には、全然記事をアップすることができませんでした。
ですが、やはり記事を書く方が知識も整理され後から見返すこともできるので、今後は忙しくても自分のペースで記事を作成できればなと思っています。
まとめ
実際に環境構築からデプロイまでするのは、とても大変でしたが、エラーが出る→調べる→エラーが出る→調べるを繰り返す内にエラーも怖くなくなり、開発が楽しかったです。
このアプリ自体まだまだ至らないところもたくさんあるので、自分の知識のアップデートのたびに、このアプリもアップデートできればなと思っています。
最後までお読み頂きありがとうございます。