fitbitのapi連携と集中力判定(PHP,Javascript)

#記事の概要

作成したポートフォリオの解説です。以下をまとめています。

• 背景
• 主な機能
• 開発手順
• 工夫点
• 課題

#背景
「ポモドーロ・テクニック」という時間管理術が話題になっており、そのためのアプリなどもあるが、実際に集中しているかどうかを判断するのは単純なポモドーロタイマーだけでは難しい。
今回は心拍数と集中力の関係に着目し、集中力を判定するアプリを作成しました。

#スペック

言語

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分休憩しましょう！」が表示されます。

###データ
・データ画面
「１週間のポモドーロ回数の推移」と「直近の作業の心拍数の推移が表示されます。

#開発手順

1. 要件定義
2. 環境設定
3. データベース設計
4. コーディング
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週間ごとの比較など）
• 作業内容の記録(どんな作業の時にどんな集中状態なのか評価するため）

#参考文献
Fitbit Web APIとPHP7で心拍数を取得しよう

#GitHubアカウント
freedog1
https://github.com/freedog1/pomodoro