【個人開発】まるでゲーム！？プレイするタスク管理サービス「TaskQuest」リリース！

#はじめに

この度「タスクを楽しくこなそう！ゲーム風タスク管理サービス【TaskQuest】」をリリースしました！！このサービスの使い方やポイントなど色々書きましたので良ければ最後までご覧ください！！

【Twitterアカウント】
https://twitter.com/fishman_uokun
【githubアカウント】
https://github.com/namikawa07/Study_quest

サービス概要

タスク管理をまるでゲームをプレイするように行い、楽しくタスクをこなすことができるサービスです！
自分自身タスク管理が苦手で、タスクを作成しても「まぁ、いいか」と思いやらなかったことが何度もありました。そんな中タスク管理自体に楽しさや面白さを持たせたらもっとタスクをこなせるのではないか、タスク管理が続くのではないかと思ったのがサービスの始まりです。

#使用技術

バックエンド

・Ruby 2.6.4
・Rails 5.2.4.5
・Rspec 4.0.1
・Twitter API（外部API）

機能における主要なGem

・Sorcery（ログイン)
・Twitter（TwitterAPI OAuth）
・kaminari（ページネーション）
・gretel（パンくずリスト）
・ransack（検索）
・Active Storage（画像アップロード）
・Action Mailer（メール送受信）

フロントエンド

・javascript
・sass 3.7.4
・jQuery Validation Plugin
・Ajax処理

インフラストラクチャー

・Docker
・CircleCI
・Nginx
・Unicorn
・AWS
・VPC
・EC2
　　- Amazon Linux 2
・S3
・ALB
・Route53
・ACM

今回はVue.jsなどを使わずに実装したので今後は使ってもっと動きのある楽しいサービスを作りたいです！

使い方

###1.新規登録・ログイン
まずは新規登録ログインをしましょう！Twitterログインも可能になっています！

新規登録

ログイン画面(Twitterログイン可能)

###2.ミッションを設定
タスクを登録するにはまず「なんのタスクか？」を指定する必要があります。例えば「日々のタスク・仕事のタスク」など自由にミッション名を決め、その後ミッションの開始日と終了日を記入してください。ミッション名は基本的にはユーザーの好きなように設定してください。

###3.タスクを作成
タスク実行画面にはミッションの題名を押すとタスク管理画面に飛ぶことができます。
タスク実行画面でタスクを作成を押し、タスクの作成を行ってください。タスクの作成は当日のタスクではなくても未来のタスクでも記入できます。決まっている予定のタスクは先にタスク作成しておくようにしましょう！

タスクに伴った敵キャラは当日のタスクについてのみ表示されます。未来のタスクは開始日が当日になると敵が現れるようになっています。

目で見て楽しむタスク管理サービス

このサービスはタスク管理をより楽しんでもらうために視覚的に様々な要素を組み込みました！
###1.ほぼ全てがオリジナルイラスト
普段だとフリー素材にしてしまうサービスの説明部分のイラストですが、今回は主人公と愛犬（？）が楽しんでいるようなオリジナルイラストを作成しました。またウェブ上にあるほぼ全ての画像は世界観を重視するため、オリジナルで作っています（※一部フリー素材を使用）

###2.フォーム記入時に矢印が出る
ゲームでよく見る選択ボタンを再現しました。フォーム入力時も左右に動きかわいく作れました笑

###3.タスク実行画面でキャラが動く！
ここがこのサービスの本命とも言ってもいいでしょう。タスク実行画面でタスクの達成に対してキャラがアクションをしてくれるというものです！様々な敵キャラ・攻撃パターンを用意しています！作っていて本当に楽しかったので楽しく使えると思います！

他にも様々なビジュアルで楽しめる要素を入れています！どんなものがあるかは是非使ってみて体験してください！

#タスク管理サービスとしての機能
ビジュアルの話を色々としましたが、タスク管理サービスとしてもしっかり便利な作りになっています。

###1.タスクをまとまりで管理できるミッション機能
タスク管理の中でも「仕事でのタスク」や「プライベートでのタスク」などタスクをそれぞれ分けたい人もいるでしょう。そんな時にはこのミッション機能を是非使ってください！

各ミッションに別々にタスクを入れることができるので、どれがどのタスクか分かりやすくなります。
###2.今後のタスクの予定を確認できるスケジュール機能
今日やるべきタスクではない、でも当日は忘れそうだからタスクには入れておきたいという時はスケジュール機能が便利になります。使い方自体はタスク作成の時に開始日と終了日を実行したい日・終了したい日い設定するだけでOKです！

自動的にそのタスクの開始日から終了日までスケジュールが作成されいつどのタスクを行えばいいかが一眼でわかります。
また実行当日になると敵キャラクターが出現します。

###3.タスクの完了が一眼でわかるcomplete機能
完了したタスクは、タスクにcompleteと表示され今何が終わっていて何が終わっていないのか一眼でわかるようになっています。completeを解除したい場合はcompleteを押すとIncompleteとなり再度押すとcompleteに戻ります。

###4.各タスクのノート機能
各タスクにはノートを書くことができます。タスクのメモでも勉強のノートでもなんでも使えます。各タスクのノート数はNotesの部分に書いてあります。ここのNotesを押すと現在作成したノートが一覧で見れるようになっています。

#その他の機能（飛ばしても大丈夫です）

###1.ミッションの各操作
####1-1.ミッションの状態
ミッションには全部で4つの状態があります。
1つはミッションの下書き状態です。このミッションはタスク操作が出来ません。
2つ目はミッション実行時の実行中状態です。基本的に操作できるのはこのミッションになります。
3つ目は実行中のミッションの終了日が過ぎた時の未完了状態です。このミッションではタスクを作成することができなくなっています。もし未完了状態のミッションでタスクを作成したい場合はミッション自体の終了日を変更してミッションを実行中にしてからタスクを作成してください。
4つ目はミッションの未完了の状態で「ミッションを完了する」を押すと完了済状態になります。

####1-2.素早くタスク画面に飛ぶ方法（MyMission機能）
ミッションにはMyMission機能というものを実装しています。ミッションのMyMissionをいうところを押すとそのミッションをMyMission登録できます。MyMissionに登録したMissionはヘッダーに表示されそのままアクセスできるようになります。MyMissionは1つしか登録できないので最もよく使うミッションはMyMissionに登録しておきましょう！

###2.タスクの各操作
####2-1.タスク実行画面の操作
1.タスク作成からタスクを作成できます
2.敵アイコンをホバーさせるとタスクの名前が出ます
3.敵アイコンの__Attack__をクリックするとキャラクターがアタックしタスクが完了します
4.もう一度敵アイコンの__Back__をクリックするとアタック前の状態に戻ります

####2-2.タスク詳細画面の操作
1.Noteの部分はそのタスクに書いたノートの数を表しています。Noteをクリックするとそのタスクのノート作成画面に移動します（例:ノートが一件の場合は1Noteとなります）
2.__削除__を押すとタスクの削除ができます
3.__編集__を押すとタスクの編集ができます

#アップデートしました！
体験版モードを実装しました！(5/27)めんどくさいログインやミッション作成をせずに一気にタスクで遊ぶことができます！体験版モードでは__タスク管理画面のみ__を遊ぶことができます。プレイしてみて楽しそうなら是非新規登録してみてください！！

#今後のアップデート予定
今後アップデートしようと思っている実装です！
予定なのでいつになるかはわかりませんが楽しみにしていてください！
機能
・自分の作ったミッションを公開しシェアできる機能
・今日行うタスクを「#今日の積み上げ」としてツイートできるツイート機能
・ミッションを作成しなくてもとりあえずタスク管理ができるようにする機能
・グループで使えるタスク管理機能（パーティーを組んで敵を倒す機能)
・その他バグ修正

ビジュアル
・MyPage画面、Note画面、NewMission画面をゲームのような画面にデザインし直す
・新しい敵キャラの追加（ボスキャラなど）
・新しい攻撃モーションの追加
・主人公のレベルアップ機能の追加 (レベルをシェアできる）
・戦闘背景の追加
・その他細かいデザイン調整

#終わりに
この記事をご覧くださり本当にありがとうございました！
今回この記事では主に使い方や、面白さ紹介みたいになりました笑
コンセプトが「皆さんに楽しんで使ってもらう」なのでこのくらいゆるく書きました笑
技術的なことを知りたい方はgithubに書いてありますので良ければご覧ください
【githubアカウント】
https://github.com/namikawa07/Study_quest
今後のTaskQuestの詳細はTwitterの方でもアップしていきますので、是非一度ご覧ください！
【Twitterアカウント】
https://twitter.com/fishman_uokun