ジャンル別に投稿・チャットできるようなアプリ作ってみた〜アプリ概要〜

個人アプリでジャンル別に投稿・チャットができるようなアプリを作成してみました。
下記の文章はこのアプリのREADMEに載せているものです。
概要として、この記事も投稿したいと思います。

## Ota-Chat
### :sunny:アプリ内容
- どんなアプリか<br>
趣味が同じ人同士でTwitterのような投稿をし合い、その中でグループを作って趣味が合う人同士でチャットができるようにしたアプリ<br>
- このアプリでできること<br>
  - ジャンルでの投稿のみをすることもでき、また、その中でグループを作成し、決まったメンバーとチャットすることもできます<br>
  - グループ作成では、グループにランク（ライト・ミドル・ハード）を選択でき、メンバーの趣味の度合いによって選択できるようになっています
### :sunny:URL(デプロイ済)
https://ota-chat.herokuapp.com/

### :sunny:開発環境
- Ruby 
- Ruby on Rails
- VSCode（Visual Studio Code）

### :sunny:制作背景
#### :star: グループチャット（ランク付）<br>
趣味が同じでも、その趣味にかける熱というのは十人十色だと私は思っています。
単にアニメが好きと言っても、ギャグアニメが好きなのか、シリアスなアニメが好きなのか、同じアニメ作品を好きと言っても、観るだけで満足なのか、グッズを買いに行くまで好きなのか、グッズも買うし、イベントも全て行きたいほど好きなのか、趣味にかける情熱というのは、人それぞれであり、それを公にするか、秘密にするかもそれぞれです。
私の友人はアニメが好きなことは職場で言えても、アプリゲームも好きで、そのゲームのあるキャラクターに関してかなりのお金を遣っていることは職場では秘密にしています。
そのような友人が同じキャラクターを好きなもの同士で話せるようなアプリを作りたいと思い、このアプリを作成しました。
このアプリのグループにランクがついているのは、友人が同じくらいのキャラクター愛を持つ人とお話ができたら楽しいだろうと考えたからです。

#### :star: ジャンル別投稿機能<br>
Twitterを見ると、キーワード検索で必要ないツイートも出ているように感じて、それなら最初からジャンル分けして投稿した方が見やすいし、投稿しやすいと感じたため、このような機能を追加しました。

### :sunny:機能説明
#### :star:ログイン登録機能<br>
#### :star:アカウント作成機能<br>
#### :star:ホーム画面<br>
   1. ユーザー自身がお気に入りしているジャンルと所属しているグループを見ることができます<br>
   1. 右上のアイコンからアカウントの変更、ログアウト、グループ希望確認（下記説明）ができます<br>
    <img width="222" alt="スクリーンショット 2020-08-01 23 46 10" src="https://user-images.githubusercontent.com/61651779/89104042-3b446900-d451-11ea-95a7-105a88e9417f.png"><img width="222" alt="スクリーンショット 2020-08-02 1 42 11" src="https://user-images.githubusercontent.com/61651779/89106079-dc3b2000-d461-11ea-84a7-53e487026f3b.png"><br>

#### :star:ジャンル作成機能<br>
   1. 自分の好きなジャンルを作成することができます<br>
   1. 既存ジャンルを押せば、そのジャンル投稿画面に飛ぶことができます<br>
   1. ジャンルの検索も可能です<br>
   <img width="444" alt="スクリーンショット 2020-08-01 23 53 56" src="https://user-images.githubusercontent.com/61651779/89104203-74310d80-d452-11ea-8f89-032d6cc09495.png"><br>

#### :star:ジャンル投稿画面（ジャンル内グループ検索可能）<br>
   1. 気に入ったジャンルをお気に入りできる機能
   1. Twitterのような投稿機能（画像は５枚まで添付可能、添付された画像は横スクロールで見れます）(画面右側)
   1. 投稿物へのコメント機能(画面右側)
   1. 投稿物へのいいね機能(画面右側)
   1. いいねしたもののみ閲覧する機能(画面右側)
   1. ジャンル内のグループ検索機能（グループ名で検索、グループランクで検索、またはその両方を合わせて検索）（画面左側）
  
  <img width="444" alt="スクリーンショット 2020-08-02 0 56 12" src="https://user-images.githubusercontent.com/61651779/89105323-1523c680-d45b-11ea-9015-e3cbe2aa9960.png"><br>

#### :star:グループ作成機能<br>
   1. グループに参加させたいユーザーをフォームに入力すれば、スクリプトサーチで検索可能です<br>
   1. 特徴１：グループにライト・ミドル・ハードの3つのうち、どのランクかを選択します。例えば、趣味への知識が深くそのような話がしたいなら、ハードを選択して仲間を集める手段にできます。<br>
   1. 特徴２：「どのようなグループなのか、どのようなグループにしたいのか」をコメント欄に入力できます<br>
   <img width="222" alt="スクリーンショット 2020-08-02 1 16 08" src="https://user-images.githubusercontent.com/61651779/89124483-44493f00-d512-11ea-84fa-4a3fc76f28ce.png"><img width="222" alt="スクリーンショット 2020-08-02 1 16 52" src="https://user-images.githubusercontent.com/61651779/89124488-47dcc600-d512-11ea-8eb6-6f3836eacb8e.png"><br>

#### :star:グループチャット画面<br>
   1. グループメンバーとチャットすることが可能（画面右側）
   1. 自分が所属しているグループ、そのグループタグが記載され、グループページのリンクとなっている（画面左側）
   
  <img width="444" alt="スクリーンショット 2020-08-02 14 15 28" src="https://user-images.githubusercontent.com/61651779/89116064-aaaa6f00-d4ca-11ea-9522-0ce871f83f02.png"><br>

#### :star:グループ詳細画面<br>
   1. 左からグループ作成者ver,グループメンバーver,グループメンバー外verとなります<br>
   1. グループ作成者はグループを解散させること、グループメンバーを変更、グループのタグ付グループコメントの記述ができます<br>
   1. グループメンバーはグループメンバーを変更、グループのタグ付、グループコメントの記述ができます<br>
   1. そのグループに所属してないユーザーは詳細の確認とそのグループに所属したい場合の希望（コメント可能）を送信することができます<br>
  <img width="222" alt="スクリーンショット 2020-08-02 1 03 59" src="https://user-images.githubusercontent.com/61651779/89105779-24a50e80-d45f-11ea-9e64-e421ff1e809f.png">   <img width="222" alt="スクリーンショット 2020-08-02 1 31 44" src="https://user-images.githubusercontent.com/61651779/89105876-f96eef00-d45f-11ea-9abd-3d01b2c34a4d.png">   <img width="222" alt="スクリーンショット 2020-08-02 1 34 12" src="https://user-images.githubusercontent.com/61651779/89105918-4f439700-d460-11ea-8ac0-3d22de2ca3c8.png"><br>

#### :star:グループ希望、承認画面<br>
   1. グループに参加希望を出した際は、右側の参加希望申請済みに希望を出したグループ名が表示される<br>
   1. グループリーダーをしている場合は、そのグループに参加希望が出されると左側に参加希望を出したユーザー名とコメントが表示される<br>
   1. 参加承諾のリンクと拒否のリンクがあり、グループリーダーはそのコメントなどを見て選択できるようになっている<br>
   <img width="444" alt="スクリーンショット 2020-08-02 1 18 36" src="https://user-images.githubusercontent.com/61651779/89105943-739f7380-d460-11ea-8799-fb5a82c5d75b.png"><br>
   <img width="444" alt="スクリーンショット 2020-08-02 1 18 36" src="https://user-images.githubusercontent.com/61651779/89105943-739f7380-d460-11ea-8799-fb5a82c5d75b.png"><br>
   <img width="444" alt="スクリーンショット 2020-08-02 1 18 36" src="https://user-images.githubusercontent.com/61651779/89105943-739f7380-d460-11ea-8799-fb5a82c5d75b.png"><br>

### :sunny:工夫したポイント
#### :star: ジャンル検索ができる
- ジャンル検索ができるので、自分が投稿したいジャンルを探すことができる<br>
- ジャンルは左側がアルファベットから始まるジャンル、右が日本語というように分かれており、検索時もキーワードが日本語なら右側に表示されるようになっている（逆も然り）

#### :star: ジャンルの投稿画面でグループの表示・検索ができる
- グループは元々、ジャンルに紐付けて作成しているので、ジャンル内のグループのみ表示、検索できるようになっている<br>
- 表示には、グループ名のみではなく、グループに付けられたタグも表示されるので、「グループメンバー募集中」などのタグを付けてメンバーを集めることも可能<br>
- 検索にはグループのランクで検索することができるようになっているので、自分がライトなオタクだと思ったら、ライトなグループを検索、逆に重めのオタクだと思えば、ハードグループの検索をすることが可能

#### :star: マイページに自分のお気に入りのジャンルと所属グループを表示するようにしている
- ジャンル画面にはお気に入り登録できるボタンがあるので、それを押してお気に入り登録すれば、マイページのジャンル部分に表示される。逆に、お気に入り解除すれば表示されないようになっている
- グループも自分が所属しているグループは表示されるようになっている

#### :star: 自分が所属したいグループに参加希望を出し、グループ作成者はそれに承諾・拒否することができる
- 自分が所属していないグループの場合、参加希望と参加希望コメントをグループリーダー（グループ作成者）に送ることができる
- グループリーダー（グループ作成者）は参加希望を受けて、承諾・拒否をすることができる

### :sunny:データベース（ER図）
![Untitled Diagram (1)](https://user-images.githubusercontent.com/61651779/90922752-766e0280-e427-11ea-9c58-110f1d416167.png)