https://swfz.hatenablog.com/entry/2025/02/03/053541

Ossan.fmで目標ビンゴの話をしていて、良さそうかも?と思ったので取り入れてみる

結局去年は色々考えて何も目標的なものを立てられなかったので気軽にまず立てることを重視しようということで…

目標ビンゴでググったら下記記事が出てきたのでこちらも参考にした

1年の抱負をビンゴで作ろう 2024ver.｜うえはらけいた | 漫画家

Obsidianでテキスト管理しながらできれば楽かなと思って仕組みを作ってみた

作ったもの

こんな感じになった

Markdownファイルに25個リストを作成し、そのリストの内容をビンゴの見た目に割り当てる

Dataviewの表示方法をCSSで変えただけ

Dataview and CSS - Help - Obsidian Forum

DataviewにおけるCSSの使い方などはこの辺を参考にした

サンプルのマークダウンファイル

目標を書き込んだりするリスト

---
cssclass: bingo
---

- [ ] a
- [ ] b
- [ ] c
- [ ] d
- [ ] e
- [ ] f
- [ ] g
- [ ] h
- [ ] i
- [ ] j
- [ ] k
- [ ] l
- [x] Free!
- [ ] n
- [ ] o
- [ ] p
- [ ] q
- [ ] r
- [ ] s
- [ ] t
- [ ] u
- [ ] v
- [ ] w
- [ ] x
- [ ] y

{ここにdataviewのJavaScriptを記述}

メタデータでCSSクラスを追加

Obsidianではメタデータにcssclassを指定するとそこで指定したクラス名を対象ページに設定できる

こんな感じ

後に出てくるCSSでは、対象ページだけで適用させたいものが多いので装飾したい対象の親要素に指定のクラスがあるかどうかを条件に含めたCSSを書く

こうすることで他のページには影響がでない

スクリーンショットだとわからないが結構親の方の要素にクラス名が追加されるので便利に使える

dataviewのJavaScript

const tasks = dv.current().file.tasks.values;

// ラベルなしパターン listは25固定
const p1i = [0,4,6,8,16,18,20,24];
const p2i = [2,7,10,11,13,14,17,22];

const rows = tasks.reduce((acc, cur, i, arr) => {
  const x = Math.floor(i / 5);
  const y = i % 5;

  acc[x] ||= []

  const text = cur.text.replace(/\[[^\s\[\]]+::\s*[^\]]+\]/g, "").trim();
  const checkedClass = cur.status === "x" ? "completed" : "incomplete";
  const priority = p1i.includes(i) ? 1 : p2i.includes(i) ? 2 : 3;
  const priorityClass = `p${priority}`;

  acc[x][y] = dv.el("div", text, {cls: `${checkedClass} ${priorityClass}`} ) 

  return acc;
}, [])

dv.header(3, "リスト順Ver");
dv.table(["","","","",""], rows);

dv.current()で自身のファイルの情報を取得しタスクデータを取得
textの部分の正規表現はラベルをつけていた場合（例： [due:: 2025-02-01]）にDataview上では表示させないための処理

各マスの背景色

開けることでビンゴしやすくなる度合いがマスによって異なるので、各リストのインデックスを決め打ちで分類している

そして、dataviewに渡す2次元配列の各要素をdv.elで要素生成したもにしている

dv.el("div", 'text', {cls: "適用させたいCSSクラス"})
- 各セル(td)にCSSスニペットでCSSを適用させるための目印となるクラスを追加
- completedの場合は背景色が緑色になる
- priorityごとにグラデーションを指定(明るいほうがP1,暗いほうがP3)

CSSスニペット

.obsidian/snippets/dataview.css

/* bingo */
div.bingo .table-view-table > tbody > tr, div.bingo .table-view-table > tbody  {
  min-height: 10em;
  height: 10em;
}
div.bingo .table-view-table > tbody > tr > td {
  width: 20%;
  aspect-ratio: 1/1;
  background-color: var(--dark0);
  border: 2px solid var(--purple);
  padding: 0;
  vertical-align: middle;
  text-align: center;
}

.table-view-table > tbody > tr > td:has(div.p1) {
  background-color: #324262;
}
.table-view-table > tbody > tr > td:has(div.p2) {
  background-color: #2b3955;
}
.table-view-table > tbody > tr > td:has(div.p3) {
  background-color: #212f4a;
}
.table-view-table > tbody > tr > td:has(div.completed) {
  background-color: var(--green);
}

/* editor mode tasklist */
.bingo .cm-content div:nth-child(1 of div.HyperMD-task-line),
.bingo .cm-content div:nth-child(5 of div.HyperMD-task-line),
.bingo .cm-content div:nth-child(7 of div.HyperMD-task-line),
.bingo .cm-content div:nth-child(9 of div.HyperMD-task-line),
.bingo .cm-content div:nth-child(17 of div.HyperMD-task-line),
.bingo .cm-content div:nth-child(19 of div.HyperMD-task-line),
.bingo .cm-content div:nth-child(21 of div.HyperMD-task-line),
.bingo .cm-content div:nth-child(25 of div.HyperMD-task-line)
{
  background-color: #324262;
}

.bingo .cm-content div:nth-child(3 of div.HyperMD-task-line),
.bingo .cm-content div:nth-child(8 of div.HyperMD-task-line),
.bingo .cm-content div:nth-child(11 of div.HyperMD-task-line),
.bingo .cm-content div:nth-child(12 of div.HyperMD-task-line),
.bingo .cm-content div:nth-child(14 of div.HyperMD-task-line),
.bingo .cm-content div:nth-child(15 of div.HyperMD-task-line),
.bingo .cm-content div:nth-child(18 of div.HyperMD-task-line),
.bingo .cm-content div:nth-child(23 of div.HyperMD-task-line)
{
  background-color: #2b3955;
}

.bingo .cm-content div:nth-child(13 of div.HyperMD-task-line)
{
  font-weight: bold;
  background-color: #394b6f;
}