Site cover image

Site icon image blog by izumiz

blog by izumiz

AutoSleepのCSVデータを可視化するWebアプリを作るシリーズ(3)

Sleepvisの進捗状況〜

以前のUIからかなりアップデートしました!

Webアプリ URL

https://izumiz-dev.github.io/sleepvis/

(パソコンからご利用ください🙇)

変更点

  • 日曜日を先頭に、1週ごとのカレンダー表示
  • 日付の横に上から,「就寝時刻」「起床時刻」「平均心拍数」の表示の追加
  • 右から順に「睡眠時間」「良質な睡眠」「深い睡眠」の棒グラフの表示の追加

これで少なくとも,アプリで見るよりもこのWebアプリで記録を見た方が面白いのかな?と思える様になったと思います!

今後の追加していきたい機能

  • URL共有機能
  • 1週間ごとの折れ線グラフの表示
  • 週平均のそれぞれの推移の表示
  • 画像エクスポート機能
  • ダークモード(いる?)
  • スマホ対応📱

今になって判明したこと

AutoSleepではエクスポートの仕方によってデータが変わることが判明.

  • 履歴タブ→右上の「エクスポート」からエクスポートする方法
  • 設定→エクスポート→履歴→エクスポートからエクスポートする方法

それぞれのエクスポートの方法で,取得できる値が異なることが判明しました.

このWebアプリでは前者のデータ形式のみ対応しています.

これについても必要であれば,追々対応していきたいと思います.