CS50のFinal Projectで開発した「Athlete Note」の紹介をします。
「Athlete Note」とは
アスリートを目指す選手やスポーツで記録を残したい人に向けたアプリです。
なぜ作ったか
私はトレーニングや体調をノートに記録していました。
体重や体温、脈などを１ヶ月１ページでグラフにして記録していましたが、２、３ヶ月の範囲でグラフを比較したいときなどにページが分かれて比較しづらいということがあったり、ノートが増えてくると見返す際に大変ということがありました。
これらの問題を解決したいと考えてこのアプリを作りました。
開発期間
１ヶ月間
使用技術
- Nuxt.js
- Vuetify
- Ruby on Rails
| ライブラリ | 説明 |
|---|---|
| Vue-chart.js | グラフを表示させるために使用 |
| Ridgepole | スキーマ管理用のコマンドラインツール |
| axlsx_rails | Excel のスプレッドシートを生成 |
機能一覧
| 機能名 | 説明 |
|---|---|
| ログイン機能 | 新規会員登録、ログイン、 ユーザ情報の変更、ユーザーの削除 |
| 記録機能 | トレーニング・日記・体調の追加、編集、削除 |
| グラフ機能 | 体重・体脂肪率・体温・脈拍のグラフ表示 |
| 検索機能 | トレーニング・日記の絞り込み検索 |
| アドバイス機能 | 体調の変化を分析してメッセージを表示 |
| エクセルの出力機能 | 体調のデータをエクセルで出力 |
| 目標機能 | 目標にタスクを追加して管理できる |
ログイン機能
ログインはトークン認証で行っています。
RailsにはDevise Token Authというライブラリがありましたが、
トークン認証の仕組みを理解したかったため、今回は使用せずにログイン機能を実装しました。
記録機能
トレーニング、体調、日記の記録ができます。
記録が見返しやすいようにカレンダーや矢印で移動ができるようにしました。
グラフ機能
Chart.jsでグラフを描写しています。
比較しやすいように１週間、１ヶ月、１年で切り替えができるようにしました。
検索機能
トレーニング、日記を検索できます。
アドバイス機能
体調のデータを分析してアドバイスをしてくれます。
例えばこのようなメッセージが表示されます。
先週よりも心拍数が１０拍以上高くなっています。
疲労が蓄積されている場合、怪我のリスクが高くなり危険です。
運動量の調整と栄養補給をしてコンディションを整えましょう。
エクセルの出力機能
コーチや監督に体調のデータを共有して適切なトレーニングができるようにエクセルの出力機能を付けました。
目標機能
目標にタスクが追加できます。
目標の一覧画面では、タスクの達成度をプログレスバーで表示されるようにしてモチベーションを上げれるようにしました。
こだわった点
- アドバイス機能で体調の変化を分析してメッセージが表示されるようにしたこと
- エクセルの出力機能でコーチや監督に体調のデータを共有できるようにしたこと
終わりに
初めて使用する技術ばかりだったので機能の実装やエラーに苦戦しましたが、
開発を通してNuxt.js、Railsへの理解を深めることができ、とても良い経験になりました。
知識不足で実装できない機能もあったのでもっと勉強をして使いこなせるように頑張りたいです。
最後まで読んでいただきありがとうございました。