【Rails】初心者が課題解決型ポートフォリオに付けた12機能はコレです！

# 目次
| |機能|工夫した点|
|-------|:----------:|:--------------------------:|
|1|[**ToDoリスト機能**](#1-todoリスト機能)|[ToDoリストの工夫した点](#todoリストの工夫した点)|
|2|[**カレンダー機能**](#2-カレンダー機能)|[カレンダー機能の工夫した点](#カレンダー機能の工夫した点)|
|3|[**いいね・コメント・フォロー機能**](#3-いいねコメントフォロー機能)　|[いいね・コメント・フォロー機能の工夫した点](#いいねコメントフォロー機能の工夫した点)　|
|4|[**宣言機能(オリジナル)**](#4-宣言機能オリジナル)|[宣言機能の工夫した点](#宣言機能の工夫した点)|
|5|[**わたしも機能(オリジナル)**](#5-わたしも機能オリジナル)|[わたしも機能の工夫した点](#わたしも機能の工夫した点)|
|6|[**つぶやき機能**](#6-つぶやき機能)|[つぶやき機能の工夫した点](#つぶやき機能の工夫した点)|
|7|[**グラフ機能(ドーナツチャート)**](#7-グラフ機能ドーナツチャート)　|[グラフ機能の工夫した点](#グラフ機能の工夫した点)|
|8|[**レベル表示機能**](#8-レベル表示機能)|[レベル表示機能の工夫した点](#レベル表示機能の工夫した点)|
|9|[**ランキング機能**](#9-ランキング機能)|[ランキング機能の工夫した点](#ランキング機能の工夫した点)|
|10|[**付箋機能(オリジナル)**](#10-付箋機能オリジナル)|[付箋機能の工夫した点](#付箋機能の工夫した点)|
|  |[**番外編：〆KiListの色について**](#番外編〆kilistの色について)||


# はじめに
少し前に大学生の悩みを聞く機会があったのですが、そこで多くの大学生が**「課題が多すぎる」**という悩みを抱えていることを知りました。〆切を守れないことから自己嫌悪に陥ってしまう学生を目の当たりにすることもありました。

特に最近はこんなご時世ですから、通常の授業がオンライン授業に切り替わり、教員は学生の出席状況を小まめにチェックしたり、学生にテストを課したりすることができない分、レポート課題などを出すという流れに変わってきています。その結果、**ますます多くの課題に頭を抱える大学生が増えている**というわけです。

![スクリーンショット 2020-11-21 17.02.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638783/7f6310a0-fe1e-749a-8df5-ef7eddcf7d01.png)



というわけで、**<font color="Red">「課題の多さに悩む大学生を何とかして助けたい」</font>**という思いが生まれ、その思いをもとにオリジナルアプリを作ることにしました。

そうは言っても、**課題そのものを減らすことはできない**ので、**<font color="Red">できるだけ楽しく課題に取り組めるような仕組みを作る</font>**という方向性でアイデアを出していきました。

####そして誕生したのが**<font color="Red">　『〆KiList』</font>**  です。

(「シメキリスト」と呼びます。〆切をリスト化するので、コレにしました。)


![ezgif.com-video-to-gif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638783/a33e4b7d-2ff0-2281-11d3-3781852b10d0.gif)

[<font color="LightGray">Illustrated by Strories by Freepik</font>](https://stories.freepik.com)



#「課題が多すぎる」という悩みを深掘る
[はじめに](#はじめに)で説明した通り、〆KiListを作成した目的は**課題の多さに悩む大学生を助けるため**でした。この目的を達成するためには、まず「課題が多すぎる」という悩みが表す意味をさらに深掘って考える必要がありました。

私は**「課題が多すぎる」という悩みの根源**は、以下の2点ではないかと考えました。

-  課題に取り組むモチベーションがわかない

-  課題のスケジュール管理が難しい  


　　　　　　　　　　　　　　　　　　　　　　　　

よって、**大学生の「課題が多すぎる」悩みを解決するためには**、以下の2つの仕組みを作る必要があると考えました。

- **<font color="Red">課題に取り組むモチベーションが上がる仕組み</font>**

- **<font color="Red">課題のスケジュール管理をしやすくする仕組み</font>** 


# 機能一覧

〆KiListに付けた全ての機能は以下の**18機能**です。


|  　    |機能|Gem|
|:-------:|:----------:|:--------------------------:|
|  ①  |ログイン機能|[devise](https://github.com/heartcombo/devise)|
|  ②  |ToDoリスト機能(CRUD)|× 
|  ③  |カレンダー機能|[FullCalendar](https://fullcalendar.io/)|
|  ④  |いいね機能(Ajax)|×
|  ⑤  |コメント機能(Ajax)|×
|  ⑥  |フォロー機能|×
|  ⑦  |宣言機能|×
|  ⑧  |わたしも機能(勝手に命名)|×
|  ⑨  |つぶやき機能(CRUD)|×
|  ⑩  |検索機能|[ransack](https://github.com/activerecord-hackery/ransack)|
|  ⑪  |ページネーション機能|[kaminari](https://github.com/kaminari/kaminari)|
|  ⑫  |グラフ機能(ドーナツチャート)|[Chartkick](https://chartkick.com/) |
|  ⑬  |レベル表示機能 |×
|  ⑭  |ランキング機能 |×
|  ⑮  |付箋機能(勝手に命名)|×
|  ⑯  |画像アップロード機能 |[CarrierWave](https://github.com/carrierwaveuploader/carrierwave)　 |
|  ⑰  |簡単ログイン機能|×
|  ⑱  |管理者機能|×


この中でも、**「課題が多すぎる」という悩みを解決するのに必要な2つの仕組みを実現するために付けた機能**は、② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ⑫ ⑬ ⑭ ⑮の**12機能**です。

|  　    |機能|Gem|
|:-------:|:----------:|:--------------------------:|
|  ②  |ToDoリスト機能(CRUD)|× 
|  ③  |カレンダー機能|[FullCalendar](https://fullcalendar.io/)　|
|  ④  |いいね機能(Ajax)|×
|  ⑤  |コメント機能(Ajax)|×
|  ⑥  |フォロー機能|×
|  ⑦  |宣言機能|×
|  ⑧  |わたしも機能(勝手に命名)|×
|  ⑨  |つぶやき機能(CRUD)|×
|  ⑫  |グラフ機能(ドーナツチャート)|[Chartkick](https://chartkick.com/) |
|  ⑬  |レベル表示機能|×
|  ⑭  |ランキング機能|×
|  ⑮  |付箋機能(勝手に命名)|×



これらの機能の概要と2つの仕組み実現のために工夫した点・思いについて、ここから1機能ずつ解説したいと思います！

#1. ToDoリスト機能

``　概要　``
ToDoリスト機能です。使い方は、とてもシンプルです。

①課題を登録
②課題がリスト化される
③完了ボタンを押すと完了済みに入る(完了済みから戻すのもできます！)


![2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638783/cbcc57d2-16b6-989a-58b9-9ccb632ee0ac.gif)


![ezgif.com-gif-maker (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638783/6907221d-b5e5-fda9-3246-4e982b010f4e.gif)

##ToDoリストの工夫した点

###①シンプル
まずは<font color="Red">**シンプル**</font>を心がけました。アプリ名にもなっているメイン部分ではありますが、色々機能があっても使いにくいと思ったのでここはシンプルに**課題名と〆切日だけ**を表示させました。


###②リマインド
「〆切をうっかり忘れていた」というようなことを防ぐために**〆切1日前、〆切当日、〆切が過ぎている課題のリマインド機能**を付けました。
また、〆切が過ぎている課題にはリストに**赤い砂時計**が表示されるようにしました。


![スクリーンショット 2020-12-05 2.56.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638783/f421ea42-8513-5e60-640f-eea8438afbd7.png)


###③実施日の登録
課題登録時に、〆切の何日前にするかという課題実施日も登録してもらうようにしました。これは、**課題を「いつやるか」を考える習慣を付けること**は、スケジュール管理が得意になる上で重要だと考えているためです。この仕組みを利用してその習慣を身に付けてもらえたらいいなという思いを込めて付けました。


# 2. カレンダー機能
``　概要　``
〆切を可視化できるカレンダーです。課題を登録すると、自動で〆切日のみ表示されるようになります。終わった課題は表示されません。それぞれの課題をクリックすると詳細画面に飛びます。

![スクリーンショット 2020-11-21 23.45.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638783/30d503d5-6d75-c215-7e70-a3e4f9830eac.png)

## カレンダー機能の工夫した点

### ①シンプル
リスト機能と同じくこちらも<font color="Red">**シンプル**</font>を心がけました。
〆切日のみに絞ってカレンダーに表示させることで、〆切日がひと目で分かるようにしました。

### ②〆切のカラー
通常は<font color="Green">**緑色**</font>のラベルで課題が表示されますが、〆切が過ぎている課題は<font color="Red">**赤**</font>でラベルが表示されます。パッと見て、**「いますぐやるべき課題」**が分かります。

#3. いいね・コメント･フォロー機能

``　概要　``
SNSにはお馴染みの3機能です。

**・いいね**
![ezgif.com-video-to-gif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638783/8e842438-2dcf-fc36-672c-af63f85e2bd5.gif)

**・コメント**
![ezgif.com-video-to-gif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638783/e3b8f96b-f0cc-9839-4e6f-c330f1cb8304.gif)

**・フォロー**
![ezgif.com-video-to-gif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638783/38943cd8-6909-4acc-8004-b0619e19835d.gif)



## いいね・コメント・フォロー機能の工夫した点

これらの機能自体に特別な工夫があるわけではないですが、SNSやっている人なら誰もが一度は味わったことのある**「いいねやコメントをもらう喜び」｢誰かにフォローされる喜び｣**を〆KiListユーザーにも味わってもらい、課題に取り組む際のモチベーションにしてもらいたいなという思いを込めて実装しました。

![スクリーンショット 2020-12-14 20.47.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638783/879df5b3-7513-5041-3173-dbd982e2d451.png)


#4. 宣言機能(オリジナル)

``　概要 　``
課題を登録した際に、宣言ボタンが表示されます。
押すと、**｢いつ何の課題をするか｣**をみんなのつぶやき一覧に投稿できます。
![ezgif.com-video-to-gif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638783/53e37e05-a91b-dc62-3253-0de4ac2fdaec.gif)


## 宣言機能の工夫した点

### ①手間いらず
無駄な行程を踏まずに済むように、文章を自分で入れなくても、ボタン1つですぐに宣言できるようにしました。

### ②やらざるを得ない環境の仕組み化
みんなの前で宣言して、やらざるを得ない状況を作る仕組みを仕掛けました。自分で管理するだけではついつい｢明日でいっか｣ってなってしまいますが、**他の人に宣言しちゃうと何かやらなきゃいけない気がしてくる**と思います。その効果を利用しました。

![スクリーンショット 2020-12-16 19.06.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638783/21fe0d6a-eaed-d91c-48ee-fa00ccaa7664.png)


#5. わたしも機能(オリジナル)

``　概要 　``
挙手のマークを押すと、他の人が宣言している課題を、自分の〆KiListにも登録できます。このマークは、自分以外のユーザーの課題宣言投稿にのみ表示されています。主に同じ大学、学部の人とかが使いやすい機能かと思います。
![ezgif.com-video-to-gif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638783/3d62a997-ad4f-3d5f-a472-0ba0030aad97.gif)




## わたしも機能の工夫した点

### ①手間いらず
他の人の宣言を見て、「あ、この課題自分もやらなきゃいけなかった！」と思った時に、余計な行程を辿らず、すぐに課題が登録できるようにと思い、この機能を付けました。

### ②仲間意識・ライバル意識を活用
**｢友達がやるなら、自分も一緒に頑張ろう｣という仲間意識**や**｢あの子に負けないように自分も頑張らないと｣というライバル意識**をモチベーションにする方は結構多いと思います。そういう人たちに、積極的に課題を登録してもらえるようにと思い、この仕組みを仕掛けました。

![スクリーンショット 2020-12-14 22.08.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638783/fa0be830-2ba1-6470-a3dc-b8937ce72ef2.png)




#6. つぶやき機能
``　概要　``
つぶやきを投稿できる機能です。
![スクリーンショット 2020-12-15 23.34.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638783/f6b1302c-0598-1958-56c6-50b7468a96b3.png)



## つぶやき機能の工夫した点
### ToDoリスト×SNS
孤独な環境だと、どうしても課題が進められない人は多いと思います。そこで、つぶやき機能(SNS的な要素)を使って他の学生と積極的にコミュニケーションを取りながら、みんなで課題に取り組める仕組みを作りたいと思い、実装しました。


#7. グラフ機能(ドーナツチャート)
``　概要 　``
課題達成率(今まで登録した課題のうち、達成済みの課題数の割合)、〆切遵守率(達成した課題数のうち、〆切を守った課題数の割合)がドーナツチャートでグラフ化されます。

課題を完了すると、〆切達成率・〆切順守率が変わっていることが分かります。
![ezgif.com-video-to-gif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638783/f7be217f-d889-88cf-6228-862b9929afd0.gif)


![スクリーンショット 2020-12-15 23.37.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638783/d3df81dd-6c94-0aa4-0ee3-329298250fb1.png)



## グラフ機能の工夫した点
### ①課題に取り組む姿勢を数値化･可視化
努力を数字やグラフで可視化させ、モチベーション維持に繋げてくれたらいいなと思い、実装しました。

### ②人に見られる環境の仕組み化
グラフはマイページに表示されています。そのページに飛んでくれば、自分の課題に取り組む姿勢が他の人の目に触れることになります。**人に自分の努力値が見られている環境に置かれていること**もまた頑張るモチベーションになるかなと思い、この機能を付けました。

#8. レベル表示機能
``　概要 　``
課題の完了数が増えていくにつれてレベルが上がっていきます。
「ビギナー」「中級者」などクラスも表示されます。
レベルが高ければ高いほど、**課題をしっかりと完了させているという証明**になります。
![スクリーンショット 2020-12-15 23.41.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638783/bbf2e35d-aad0-8666-50c5-d81d007d85d6.png)



## レベル表示機能の工夫した点
### ①次のクラスを目指すワクワク感
ユーザーが「次はどんなクラスかな？」「私も〇〇クラス目指して頑張ろ！」と楽しめるようにして、頑張れるモチベーションにしてもらえたらなと思い、実装しました。
この辺のバリエーションはまだまだ増やす余地ありなので、**さらに色々なクラスを用意**して、ユーザーにワクワクしてもらえるような仕様にしていきたいと考えています。

### ②遊び心
真面目すぎるアプリは、少し使うとすぐに飽きてしまいます。なので、所々遊び心を加えて、ユーザーに楽しんでもらいながら長く使ってもらえるようにと思い、**「何やコレ」**と言うようなクラスを用意しました。例えば、Lv.1のクラスは**「赤ちゃん」**です。**かわいいですね。<font color="red">育てたくなります</font>**。
![スクリーンショット 2020-12-05 12.36.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638783/12203d7f-7cd3-4e64-c4ae-a3dc22b8c092.png)

#9. ランキング機能
``　概要 　``
レベルが上位３名になると、ランキングにユーザー名とレベルが載ります。
![スクリーンショット 2020-12-16 19.02.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638783/749825e1-638c-9726-fab6-40ce2ac31a1f.png)




## ランキング機能の工夫した点
### ランキングに載ることへのモチベーション
ランキングに載ることもまた、一種のモチベーションになると思います。
「ランキングに名前を載せるために課題を頑張ろう！」と思ってもらえるようにこの機能を付けました。
ただし、今のところ見ての通りあまりにもデザインがシンプル過ぎて、名前が載っても「何だかな〜」と言う感じなので、もう少し**モチベーション上がるような見栄え**を目指したところです。

#10. 付箋機能（オリジナル）
``　概要 　``
登録した課題と〆切日が、付箋のような感じで表示されます。本日〆切、本日実施の課題もすぐに分かります。
ここから課題の詳細ページに飛ぶこともできます。
![スクリーンショット 2020-12-16 19.03.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638783/c50297d7-38d5-b914-94c6-23709bf1c7bb.png)


## 付箋機能の工夫した点
### アプリ使用中は〆切を意識
このアプリは、課題の〆切日を守るためのアプリなので、**常に〆切を意識してもらう必要があります**。通常であれば、〆KiListのページに行かないと〆切を見ることができないことになってしまいますが、この付箋機能を**マイページとつぶやき一覧ページ**に載せることで、アプリを使っている最中は常に〆切を意識してもらえることになります。〆切のうっかり忘れの防止をさらに強化するために、この機能を実装しました。



#番外編：〆KiListの色について

今回〆KiListを作成するにあたって、カラーを下記の通り選択しました。

- **メインカラー：<font color="navy">ネイビー</font>、<font color="orange">オレンジ</font>**、**ホワイト**
- **サブカラー：<font color="gray">グレー</font>、<font color="blue">ブルー(ボタンにカーソル置いた時)</font>**

基本的には、メインカラーを使うように気をつけました。
自分はデザインに詳しくないので、**色で統一感を出すことでそれなりにまとまりのある感じを出そう**という発想になり、その結果使う色を3色に絞りました。

![スクリーンショット 2020-12-06 17.59.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638783/0ff1d9dd-16f4-6428-ffc3-3fbc47b46020.png)



ただし、全部がこの色だと面白味がないので、**ボタンにカーソルをのせた時やちょっとしたデザインの部分**に関しては、グレーやブルーなど、メインカラーに比較的馴染みが良いであろうカラーを使うようにしました。
(カレンダーは土曜日のイメージが青や水色、日曜日のイメージが赤やピンクなので例外です)


尚、一番のメインカラーは**<font color="navy">ネイビー</font>**ですが、これは青系の色の方が、｢勉強｣｢課題｣といった真面目な印象を与えやすいと考えたため選択しました。

そこに**<font color="orange">オレンジ</font>**という暖色を加えたのは、〆KiListがSNS的な要素を持ち、｢人との繋がり｣｢励まし合い｣といった要素も含むからです。

**<font color="navy">ネイビー</font>×<font color="orange">オレンジ</font>**という組み合わせが結構しっくりきたのでこれらの色をメインに使いました。

#さいごに
長くなりましたが、以上です。

大学生の「課題が多すぎる」という悩みを解決するためには、

**①課題に取り組むモチベーションが上がる仕組み**　
**②課題のスケジュール管理をしやすくする仕組み**

この2つの仕組みが必要で、この仕組みを実現するために、今回解説した**12機能**を付けたというお話でした。

とにもかくにも、
### <font color="red">「学生ができるだけ楽しく、ワクワクしながら課題を進められたら良いな」</font>
という気持ちを思う存分に込め、ユーザー目線を意識しながら作成しました。

ここまで読んでいただいてありがとうございます。

### 予定
①この記事は、今のところ「思い」の部分が前面に出た記事になっておりますので、**今後はそれぞれの機能についてどのように実装したかという技術的な部分も付け加えていけたら**と思っています。

②今回は、機能という部分に着目しましたが、ポートフォリオ(このアプリ)の作成の全体的な解説記事は別で投稿します。それまでにAWSでのデプロイを頑張ります。