バーr……blog のようなもの 2025 年 04 月

04 月 20 日 ( 日 )

なるべく楽に睡眠、食事、服薬を記録する

うつ病当事者の睡眠、食事、服薬の記録だけなら Mermaid のガントチャートを使えばいいのでは？と思い付きました。実際に試してみたらなかなかいい感じなので記録しておきます。

Mermaid を使うと下図のようなガントチャートが簡単に描けてしまいます。しかも元のソースを html で書くならソフトウェアのインストールは必要ありません。テキストエディタと Web ブラウザ、ネット接続環境があれば充分です。

--- displayMode: compact --- gantt dateFormat HH:mm axisFormat %H:%M tickInterval 1hour 2025年 04月 19日 (土) : active, m0, 00:00, 1440m 睡眠 : m1, 00:00, 330m 朝食 : done, milestone, 07:29, 2m 仮眠 : m4, 08:50, 10m 昼食 :done, milestone, 12:44, 2m 夕食 :done, milestone, 16:59, 2m 眠前薬 : milestone, 20:59, 2m 睡眠 : m16, 22:30, 90m

下のテキストが上図の mermaid のソースになります。

---
displayMode: compact
---
gantt
	dateFormat HH:mm
	axisFormat %H:%M
	tickInterval 1hour
	2025年 04月 19日 (土) : active, m0, 00:00, 1440m
	睡眠 : m1, 00:00, 330m
	朝食 : done, milestone, 07:29, 2m
	仮眠 : m4, 08:50, 10m
	昼食 :done, milestone, 12:44, 2m
	夕食 :done, milestone, 16:59, 2m
	眠前薬 : milestone, 20:59, 2m
	睡眠 : m16, 22:30, 90m

全体の色を変えたい場合は Mermaid のテーマ機能を利用します。下図ではテーマに forest を選んでいます。

--- displayMode: compact --- gantt %%{init:{'theme':'forest'}}%% dateFormat HH:mm axisFormat %H:%M tickInterval 1hour 2025年 04月 20日 (日) : active, m0, 00:00, 1440m 睡眠 : m1, 00:00, 270m 朝食 : done, milestone, 07:59, 2m 居眠り : m2, 10:30, 10m 昼食 : done, milestone, 12:29, 2m 夕食 :done, milestone, 17:49, 2m

ソースは下のようになります。gantt と書かれた次の行がテーマの指定になります。指定がなければデフォルトテーマで画像が作られます。

---
displayMode: compact
---
gantt
	%%{init:{'theme':'forest'}}%%
	dateFormat HH:mm
	axisFormat %H:%M
	tickInterval 1hour
	2025年 04月 20日 (日) : active, m0, 00:00, 1440m
	睡眠 : m1, 00:00, 270m
	朝食 : done, milestone, 07:59, 2m
	居眠り : m2, 10:30, 10m
	昼食 : done, milestone, 12:29, 2m
	夕食 :done, milestone, 17:49, 2m

本来使用目的の異るガントチャートを流用しているわけですが、それぞれのラインや文字を好きな色や太さに自由に変更することは現時点ではできません (一部可能なものもあるようですがまだ調べきれていません)。

そのため色の変更にはガントチャートのタスクの状態を利用しています。

色を替えたいときは上記 4 種類とテーマを組合せることである程度は可能です。

html ファイルの雛形を置いておきます。ダウンロードしてご利用ください。ライセンスは以下の通りとします。個人的に使うだけなら、ライセンスは特別意識しなくていいと思います。再配布する場合や改変成果物を再配布するときはライセンスに従ってください。

睡眠、食事、服薬の記録 by mitsugu oyama (a.k.a. OrzBruford) is licensed under CC BY-NC-SA 4.0

ダウンロードした html のソースを編集して Web ブラウザで表示してやれば、上記のような睡眠状態を概観できる図が表示されます。