Obsidian PluginのHeatmap Calendarというのを使ってみている
主に習慣化のため、DailyNoteにチェックリストを用意して常に目に入ってくるようにした
DailyNoteは常に何かしら書くので必然的に目に入る、目に入ると「やらないと」という気持ちになる
見てなかったから忘れたというのは起こらない
仕組みを変えた、もしくは内容を変えたから続いているだけかもしれないが少なくとも1ヵ月位はうまくいっている
しばらく継続できるよう取り組む予定
使い方
README見ればよいが、ObsidianのプラグインDataview
に乗っかっている形なので可視化部分はコードブロックにdataviewjs
を指定する
また、JavaScript実行も必要なのでDataviewの設定でJavaScript実行をONにしておく必要がある
以下では実際に使っている使い方を紹介する
frontmatterの感情スコア
- Markdown例
--- score: 50 --- ## hoge ## fuga #daily/2023/08
- 可視化
const pages = dv.pages("#daily").filter(p => p.file.name != "daily_note"); const entries = pages.map(p => { return { date: p.file.name, content: p.score, intensity: p.score } }); const calendarData = { colors: { green: ["#ebedf0", "#9be9a8", "#40c463", "#30a14e", "#216e39"] }, intensityScaleStart: 0, intensityScaleEnd: 100, entries: entries, } renderHeatmapCalendar(this.container, calendarData)
シンプルな使い方
GitHubに載っている例と同じでfrontmatterに入れた値をそのまま使うみたいなことをしている
DailyNoteのfrontmatterに数字として何かしらの値がある状態、まぁ一番ベーシックな使い方だよなと言う感じではある
色指定はREADME読みながら設定したがなぜか適用されなかったので直接指定している
entries
の中身
- date
- 日付
- content
- 1マスに表示する文字列
- intensity
- 濃さの元となる値
contentは何も指定しなくてもOKだが、今はintensityと同じ数字を入れている
本当はポップオーバーで「この日の数値はこれ」というのが分かるような表示にできれば把握しやすいかなと思っているがそういうオプションはなさそうだった
でもさっと見るならこれでも良い、正直字が小さすぎて読めないがまぁ…DevTools開けば分かるからねw
特定ヘッダ以下に習慣化チェックリストを作ってチェック
Habits
というヘッダを用意しその下に習慣化でやりたいことをチェックボックスリスト化する方法
- DailyNoteの例
## Habits - [ ] 1日15分ステッパー踏む1 - [ ] 1日15分ステッパー踏む2 - [ ] 懸垂合計10回 - [ ] その日じゅうに振り返りする #daily/2023/08
可視化部分はこんな感じ
// `#daily`というタグが入っているファイル、から`daily_note`を除いたファイルたち const pages = dv.pages("#daily").filter(p => p.file.name != "daily_note"); function getListItemUnderHeader(page, header) { return page.file.tasks.values.filter(v => { return v.section.type === "header" && v.section.subpath === header }); } const entries = pages.map(p => { const tasks = getListItemUnderHeader(p, 'Habits'); const checked = tasks.filter(t => t.completed).length; return { date: p.file.name, content: checked, intensity: checked } }); const calendarData = { colors: { green: ["#ebedf0", "#9be9a8", "#40c463", "#30a14e", "#216e39"] }, entries: entries, } renderHeatmapCalendar(this.container, calendarData)
習慣化は項目を用意してその配下のチェックリストをやった場合はチェックするようにしている
なのでそういうパターンで集計できるようなコードを書いた
このままだと厳密にはチェック数の最大値が月や日、期間によってずれるのでちょっと微妙な使い方かもしれない
また、平日のみ実施するというような条件がある場合も別途計算する必要がある
まぁここでは雰囲気でやっている感がでれば…ねw
まとめ
各DailyNoteを横断して特定の値を取得してGitHubの草のようにHeatmapを表示できるようにした
常に使うObsidianにデータを記入して、可視化するっていう感じなのでObsidian内で完結するので良い
Pixelaにデータ入れてWebページのEmbedでも良いかなと思っていたがデータ入れる手間がないのでほぼリアルタイム反映なのも体験は良い
使い始め当初は「Obsidian依存なMarkdownは書かないようにしよう」と思っていたがDataview
筆頭にガンガン書いてしまっている…