記事の概要
作成したポートフォリオの解説です。以下をまとめています。
- 背景
- 主な機能
- 開発手順
- 工夫点
- 課題
背景
「ポモドーロ・テクニック」という時間管理術が話題になっており、そのためのアプリなどもあるが、実際に集中しているかどうかを判断するのは単純なポモドーロタイマーだけでは難しい。
今回は心拍数と集中力の関係に着目し、集中力を判定するアプリを作成しました。
スペック
- 言語
- PHP 7.4.2
- javascript
- DBMS
- MySQL 5.7.26
- 開発環境
- MacOS Catalina 10.15.5
- MAMP 5.7
- ライブラリ
- jquery
- フレームワーク
- Bootstrap 4.2
- バージョン管理
- Git 2.24.3
- 本番環境
- xserver
- ウェアラブル端末
- fitbit inspireHR
主な機能
ポモドーロタイマー
・ホーム画面
スタートを押すと25分タイマーが作動します。
タイマーの下には今日と今週の作業記録が表示されます。
・25分が終わると
「お疲れ様です。5分休憩しましょう！」が表示されます。
データ
・データ画面
「１週間のポモドーロ回数の推移」と「直近の作業の心拍数の推移が表示されます。
開発手順
- 要件定義
- 環境設定
- データベース設計
- コーディング
- xserverデプロイ
1.用件定義
今回作成するアプリに必要な機能
・タイマー機能
・データ記録
・データ表示
・チャート表示
・fitbitのAPIからのデータ取得
php,Javascriptで開発を行う。
2.環境選定
本番環境では知名度の高い「xserver」を使用する。
GitとGitHubは練習として使っていく。
3.データベース設計
カラムはシンプルに
・ID
・start_at（作業開始時間)
・stop_at(作業終了時間)
4.コーディング
コーディングを実施
4.1データベース作成
MAMPのphpMyAdminを使ってデータベースを作成。
4.2ホーム画面
タイマーのカウント表示はJavasciptで動的に実装。
「START」、「STOP」、「RESET」ボタンを押した時の処理を実装。
作業終了時、DBに自動的に登録される。（Ajax)
画面のデザインはBootstrapを用いて時間短縮。
4.3データ画面
グラフはchartistというjsのライブラリで作成。
作業記録はホーム画面同様、MAMPのDBから取得する。
心拍数の記録はfitbitのAPIから取得。
以下サイトを参考にカスタマイズ
https://qiita.com/RINYU_DRVO/items/6607a0aa7ca3294f8e47
MAMPのDBから直近のデータを取り出してAPIに渡すことで
直近の作業時間あたりの心拍数の推移を取得。
(ここが一番苦労した、、、)
取得した心拍数のデータをもとに
平均心拍数と集中力判定を実施。
集中力判定は以下を基準に作成。
1.高集中：平均心拍数が高く、心拍数の分散(以下、分散)が低い
2.高ストレス：平均心拍数が高く、分散が高い
3.安定集中：平均心拍数が低く、分散が低い
4.集中していない：平均心拍数が低く、分散が高い
※閾値については今後調整します。
5.xserverデプロイ
本番環境ではxserverを使用。
xserver上にDBを立て、プログラムもDB接続部分の修正。
工夫点
・世の中にない機能を考え、実装まで持って行った
・自分で使いたいと思うようなアプリにすることができた
今後の課題
一通りの動作ができた時点で完成としました。
主な課題は以下の通りです。
- チャートの追加(1週間ごとの比較など）
- 作業内容の記録(どんな作業の時にどんな集中状態なのか評価するため）
参考文献
GitHubアカウント
freedog1
https://github.com/freedog1/pomodoro