DataviewJSでデイリーノートからThino(Obsidian Memos)のデータだけをまとめて取得する

DataviewJSでデイリーノートからThino(Obsidian Memos)のデータだけをまとめて取得する

日々の思いつきをデイリーノートに気軽に書き込めるObsidianプラグインのThino。
もうこのプラグインなしではメモするのが億劫になるくらいに気に入って使っています。

Obsidian Thinoを使う中でメモは漏らさず書くことができるけど、見返す時に一気に見たいなと思いdataviewjsのdv.elを使って指定期間のデイリーノートからThino(Obsidian Memos)のデータだけをまとめて取得してみました。

目次
  1. dv.elとdv.viewを使ってThinoのデータを表示
  2. Thinoのデータを取得
  3. dv.elで表示する見た目の部分を作る
  4. dataviewjsのブロックで表示する
  5. まとめ

dv.elとdv.viewを使ってThinoのデータを表示

今回の記事ではdv.elとdv.viewを使ってThinoのデータを取得して表示する方法を書いていきます。

もしdv.elとdv.viewの使い方がわからない、詳しく知りたい人は「DataviewJSでカスタムビューを作るのに必須なdv.elとdv.viewの使い方」をあわせて読んでください。

Thinoのデータを取得

Thinoのデータを取得するためには、`views.js`を作成して、`dv.el`を使ってデータを取得します。
まずはデータを表示を取得する部分。

view.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
const pages = dv.pages('"Daily"').where((p) => {
  return moment(p.file.name).isBetween(
    input.startDate,
    input.endDate,
    null,
    '[]',
  )
})
const data = await Promise.all(
  pages.map(async (p) => {
    const current = await dv.io.load(p.file.path)
    const startIndex = current.indexOf('## Memos')

    if (startIndex !== -1) {
      const endIndex = current.indexOf('\n## ', startIndex + 1)
      const sectionContent = current.substring(
        startIndex,
        endIndex !== -1 ? endIndex : current.length,
      )

      return {
        file: p.file,
        content: sectionContent
          .replace('## Memos', '')
          .split('\n')
          .map((line) => {
            return line.trim()
          })
          .filter((line) => {
            return line.length > 0
          })
          .join('<br>'),
      }
    }

    return null
  }),
)

このコードは、`"Daily"`というフォルダに入っているデイリーノートから指定期間のデータを取得しています。
`input.startDate`と`input.endDate`は後で説明しますが、指定期間の開始日と終了日の変数です。。

指定期間から`## Memos`というセクションにあるThinoのデータとファイルの情報が変数dataに配列に入っています。

dv.elで表示する見た目の部分を作る

変数dataで必要なデータを取得できたので、あとは見た目の部分を作れば完成です。

見た目の部分なのでお好みでカスタマイズ可能ですが、例えばこんな感じのHTMLを作って表示。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const container = dv.el('div', '', { cls: 'x-memos' })
const html = data
  .map((d) => {
    if (d === null) {
      return ''
    }

    return `<div class="x-memo">

<div class="x-memo__title">${d.file.name}</div>
    <div class="x-memo__content">${d.content}</div>
  </div>`
  })
  .join('')

container.innerHTML = html

dataviewjsのブロックで表示する

後はThinoのメモ一覧を表示したい場所でdataviewjsのブロックを使って表示するだけです。

1
2
3
4
await dv.view('views/memo', {
  startDate: '2024-01-01',
  endDate: '2024-01-31',
})

まとめ

一定期間のデイリーノートのThinoのデータは振り返りの時に便利です。

これまでは1ファイルずつ開いて順番に確認していましたが、このスクリプトを導入してから振り返りがめちゃく楽になりました。
一覧で見られることによって、情報の流れもわかりやすくなりました。

この記事を書いた人
KJ
KJ

初めてブログに触れたのはまだSNSが流行る前。そしてブログの楽しさをきっかけにシステムエンジニアになりました。会社員を経て独立して、人生の時間を有意義に過ごせるように日々暮らしています。 好きなことはディズニー、ライブ参加、旅行、飛行機・空港、整理収納、本、お酒、ゲーム、ObsidanやNotionのようなツールを触る、YouTubeを見るなどなど。 ■詳しいプロフィールが気になる人 こちらプロフィールを読んでください。

関連記事

  1. HOME
  2. DataviewJSでデイリーノートからThino(Obsidian Memos)のデータだけをまとめて取得する

注目記事