ソニックガーデンキャンプに参加して作成したアプリを紹介します。
ソニックガーデンキャンプとは株式会社ソニックガーデン様主催のプログラミング合宿です。
キャンプに参加したメンバーと協力してアプリ開発しました。
アプリ概要
アプリ名： ポモドスケジューラー
ポモドーロテクニックとタスク記録機能を組み合わせたタスク管理アプリです。
ポモドーロテクニックで時間を有効活用しつつ、実行したタスクをマイページから確認できます。
開発経緯
-
時間を効率的に使いたい
時間を効率的に使うためにポモドーロテクニックをアプリに組みました。
ポモドーロテクニックとは、タスクを細かく分解し、短い作業時間（25分）と短い休憩（5分）を繰り返すことで、集中力と生産性を高める時間管理テクニックです。
自分自身、ポモドーロテクニックを使っているおかげで、長く集中力を保つことができているので、アプリに組み込みたいと思いました。 -
時間を節約したい
時間を節約するために使った時間を可視化する機能をアプリに組み込みました。
時間の流れは目に見えないものであり、目に見えないが故に無駄遣いしてしまいます。
であれば、使った時間を目に見えるようにすれば時間を節約する習慣ができるのではないかと考えました。
実装した機能一覧
- 認証機能
- タスク設定機能
- カウントダウンタイマー
- タスク振り返り機能
- ランキングページ
- ユーザー検索機能
- フォロー機能
ログインページ
機能
- 新規作成ボタンからアカウントを作成
- アカウントがある場合は右上のログインボタンからログイン
- ログイン後はマイページにリダイレクト
詳細
ここで使われている認証機能は devise という gem を使って実装しました。
deviseを採用した理由は以下の通りです。
-
多くの開発で使われている
- 解説記事が多いので、自分でエラー解決ができる
- セキュリティ的に安全
-
認証機能を素早く実装できる
- Railsチュートリアルを学んだことで、認証機能は1から作ると時間がかかることを学んだ
タイマー機能
ヘッダーの「タイマー」をクリックすると、タスク入力ページへ遷移します。
機能
-
タスク名、タスク時間、休憩時間、セット数（タスク時間と休憩時間を何回繰り返すか）を入力
-
スタートボタンを押すとタスク時間のカウントダウン開始
-
タスク時間のカウントダウンが終了したらアラームが鳴り、続けて休憩時間のカウントダウン開始
-
セット数分のタスクが終わったら完了ボタンが表示され、完了ボタンを押すと、タスク設定ページに戻る
詳細
カウントダウンタイマーはJavascriptを使って実装しました。
タスク時間のカウントダウンが終わった後、休憩時間のカウントダウンを始める処理を実装するのに苦戦しました。
Javascriptは並列に処理を実行する性質があるため、タスクのカウントダウンと休憩のカウントダウンを同時にしてしまい、正しい時間を表示できないそうです。
エンジニアの方に助けていただき、なんとか実装できました。
マイページ
「POMODO SCHEDULER」をクリックするとマイページへ遷移します。
機能
- マイページでは自分が実行したタスクが一覧で表示
- タスク名ごとに合計した時間の割合を円グラフで確認できる
- カレンダーで過去の日にちをクリックすると、選択した日にちのタスクを見返すことができる
詳細
円グラフは chartkickというGemを使って実装しました。
chartkickは [[名前, データ], [名前, データ] …]]という形の配列を渡すことで円グラフを作れます。mapメソッドを使ってこの形の配列を取ってくるのに苦戦しました。
自分一人ではこの処理を書けなかったため、フレームワーク（Rails）の知識だけではなく、プログラミング言語（Ruby）の知識が必要不可欠であることを学びました。
カレンダーは Simple Calendar というGemを使って実装しました。
ユーザー検索 & ランキングページ
「ユーザー検索」をクリックすると、ユーザー検索ページに遷移します。
機能
- ユーザー名を入力して検索することで、ユーザーを絞り込める
- ランキングページも兼ねているため、全ユーザーのランキングと作業量を確認できる
- フォローボタンを押すと、ユーザーをフォローできる
- ユーザー名をクリックすることで、そのユーザーのタスク詳細ページに飛べる
詳細
検索機能はransack、ページネーション機能はwillpagenateというgemを使って実装しました。
ユーザーの合計作業時間を算出するために、ここでもmapメソッドを使って処理を書きました。
配列操作の重要性を再認識しました。
フォロー機能
マイページの「フォロー」ボタンをクリックすると、フォロー中のユーザー一覧ページへ遷移します。
「フォロワー」ボタンをクリックすると、フォロワー一覧ページへ遷移します。
機能
-
フォローしているのユーザーの1日の作業量を確認できる
-
フォロワーの作業量を確認できる
-
ユーザー名をクリックすることで、そのユーザーのタスク詳細を確認できる
今後実装したい機能
-
レスポンシブデザイン
スマホやタブレットサイズにすると表示が崩れてしまいます。
アプリの機能的にスマホで使用するユーザーも多いと思うので、レスポンシブデザイン化は必要だと考えています。 -
タスクをデータベースに保存するタイミングの変更
現在のコードでは、タスクを設定してスタートボタンを押したタイミングでデータが保存されます。
タスクを途中でやめた人（ページを遷移した人）も、タスクを完了したことになってしまうで、以下の機能を実装しようと思います。- カウントダウンが終わったタイミングでデータを保存
- ページを遷移した場合はデータを保存しない
-
一時停止ボタンや、タスクを辞めるボタンの実装
快適に使うためには上記のボタンが必要であると考えています。
タスクを辞める場合は完了したタスクのみデータベースに保存しようと思います。 -
タスクの複数作成
現在のコードではタスクを1種類しか登録できないので、複数のタスクを登録して実行できるようにします。
プログラミングについての学び
-
簡単な機能なら一人でも実装できるようになった
エラー文を読めるようになったおかげで簡単な機能は自分一人でも実装できるようになりました。
エラー文をしっかりと読んで仮説を立てて、その仮説をもとに調べてエラーを解消するようにしています。 -
Ruby on Rails
アプリ開発を通して以下の技術を理解できました。
・MVC（Model、View、Controller）
・REST（Representational State Transfer）
・ジェネレータ
・マイグレーション
・ルーティング
・ERB（Embedded Ruby）
作りたい機能を実装するためにはフレームワーク（Rails）の知識だけではなく、プログラミング言語（Ruby）の知識が必要不可欠であることを学びました。
Rubyの知識を身に付けるため、現在は「プロを目指す人のためのRuby入門」を使って勉強しています。 -
Git、Github
Gitの基本操作はできるようになりました。
ただ、Githubはgit pushとgit pullしか使えなかったので、他にはどのような機能があって、現場ではどの機能を使うのか調べて使ってみようと思います。
プログラミング以外の学び
-
振り返りの習慣
ソニックガーデンキャンプでは、毎日個人の振り返りとチームの振り返りを書いて全体に共有していました。
振り返りのおかげで目標や改善点が明確になり、学習効率が上がったと思います。
また、その振り返りを全体に共有することで他の参加者からアドバイスがもらえたり、他の参加者の振り返りを自分にも活かせました。
2週間でRailsチュートリアルを終わらせて、2週間でアプリ開発ができたのも、振り返りのおかげだったと思います。
これからも振り返りは続けていこうと思います。 -
Notion
Notionは振り返りの記録や、アプリ開発の要件定義、タスク管理などに使いました。
データベース機能を活用して、チームや個人の振り返りを管理したり、チームメンバーのタスク状況を可視化して開発を進めたため、Notionをある程度使いこなせるようになりました。 -
マークダウン記法
Notionに文字を入力する際は、マークダウン記法を使うと文章を見やすくまとめることができます。
マークダウン記法を積極的に使って文章を作成していたため、マークダウン記法が使えるようになりました。
最後に
最後まで読んでいただきありがとうございました。
これからは転職活動をしながらアプリの改善やプログラミングを勉強するつもりです。
アプリやこの記事の改善点、質問などがありましたら、ご指摘頂ければ幸いです。
ソニックガーデンキャンプを主催していただいた株式会社ソニックガーデンの社員の皆様、キャンプに参加したメンバーには深く感謝申し上げます。