ObsidianのHeatmapCalendarプラグインを試す

Obsidian PluginのHeatmap Calendarというのを使ってみている

Richardsl/heatmap-calendar-obsidian: An Obsidian plugin for displaying data in a calendar similar to the github activity calendar

github.com

主に習慣化のため、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)