📊

Obsidian Heatmap Calendarで習慣を可視化する方法

に公開
Productivity
Obsidian
habits
tech

はじめに

日々の習慣を継続することは難しいですが、進捗を視覚化できれば、モチベーションの維持に繋がります。この記事では、ObsidianのHeatmap Calendarプラグインを使って、習慣の継続状況をGitHubの草のようなヒートマップで表示する方法を紹介します。

heatmap calender example|1003x1587
"該当Github repoレポジトリより"

必要なもの

  • Obsidian
  • 以下の2つのプラグイン：
    • Dataview
    • Heatmap Calendar

セットアップ手順

1. プラグインのインストールと有効化

Dataviewプラグインの設定

  1. Obsidianの設定画面から「コミュニティプラグイン」を開く
  2. 「Dataview」を検索してインストール
  3. インストール後、Dataviewの設定画面で以下を有効化：
    • ✅ JavaScript queries
    • ✅ Inline JavaScript queries

Heatmap Calendarプラグインのインストール

  1. 同様に「Heatmap Calendar」を検索してインストール
  2. 有効化（色設定は後で変更可能）

2. 習慣トラッキング用のデイリーノートを準備

フォルダ構造の作成例

vault/
└── daily-notes/
    ├── 2024-08-01.md
    ├── 2024-08-02.md
    └── ...

デイリーノートにプロパティを追加

各デイリーノートの先頭に、追跡したい習慣をプロパティとして追加します：
プロパティについての詳細はこちらの記事が参考になります。

---
exercise: true
reading: false
meditation: true
---

3. ヒートマップ表示用ノートの作成

新規ノートを作成

habit-calendar.mdなどの名前で新しいノートを作成します。

JavaScriptコードの追加

Heatmap CalendarのGitHubページからサンプルコードをコピーして、ノートに貼り付けます。

コード例（上記サンプルページから引用。yearを2025に変更）：

```dataviewjs

dv.span("** 😊 Title  😥**") /* optional ⏹️💤⚡⚠🧩↑↓⏳📔💾📁📝🔄📝🔀⌨️🕸️📅🔍✨ */
const calendarData = {
	year: 2025,  // (optional) defaults to current year
	colors: {    // (optional) defaults to green
		blue:        ["#8cb9ff", "#69a3ff", "#428bff", "#1872ff", "#0058e2"], // first entry is considered default if supplied
		green:       ["#c6e48b", "#7bc96f", "#49af5d", "#2e8840", "#196127"],
		red:         ["#ff9e82", "#ff7b55", "#ff4d1a", "#e73400", "#bd2a00"],
		orange:      ["#ffa244", "#fd7f00", "#dd6f00", "#bf6000", "#9b4e00"],
		pink:        ["#ff96cb", "#ff70b8", "#ff3a9d", "#ee0077", "#c30062"],
		orangeToRed: ["#ffdf04", "#ffbe04", "#ff9a03", "#ff6d02", "#ff2c01"]
	},
	showCurrentDayBorder: true, // (optional) defaults to true
	defaultEntryIntensity: 4,   // (optional) defaults to 4
	intensityScaleStart: 10,    // (optional) defaults to lowest value passed to entries.intensity
	intensityScaleEnd: 100,     // (optional) defaults to highest value passed to entries.intensity
	entries: [],                // (required) populated in the DataviewJS loop below
}

//DataviewJS loop
for (let page of dv.pages('"daily notes"').where(p => p.exercise)) {
	//dv.span("<br>" + page.file.name) // uncomment for troubleshooting
	calendarData.entries.push({
		date: page.file.name,     // (required) Format YYYY-MM-DD
		intensity: page.exercise, // (required) the data you want to track, will map color intensities automatically
		content: "🏋️",           // (optional) Add text to the date cell
		color: "orange",          // (optional) Reference from *calendarData.colors*. If no color is supplied; colors[0] is used
	})
}

renderHeatmapCalendar(this.container, calendarData)

```

実行結果

設定が完了すると、以下のような表示になります：

  • ✅ exerciseプロパティがtrueの日：オレンジ色で表示
  • ⬜ falseまたは未記録の日：グレーで表示

GitHubの草のように、習慣の継続状況が一目で分かるようになります。

カスタマイズのアイデア

複数の習慣を追跡

複数の習慣を別々のヒートマップで表示したい場合は、プロパティごとにコードブロックを作成：

// 運動の記録
for(let page of dv.pages('"daily-notes"').where(p => p.exercise === true)) {...}

// 読書の記録
for(let page of dv.pages('"daily-notes"').where(p => p.reading === true)) {...}

色のカスタマイズ

colorsオブジェクトを変更することで、好みの配色に変更できます：

colors: {
    green: ["#c6e48b", "#7bc96f", "#52a852", "#239a3b", "#196127"],
}

まとめ

Obsidian Heatmap Calendarプラグインを使うことで、習慣の継続状況を視覚的に確認できるようになります。毎日の小さな積み重ねが、ヒートマップ上で徐々に色づいていく様子は、習慣化のモチベーション維持に大きく貢献しています。

ぜひ自分の習慣トラッキングにも活用してみてください！

Discussion