🦝

[Obsidian] Dataviewjsを使ってその日に記録したURL一覧を表示する

2023/08/13に公開

Obsidian

tech

やったこと

その日参考にしたURLを一覧にして日記に表示されるようにした。

Dataviewjsを使う

DataviewというプラグインにJavaScriptを使うことができるDataviewjsという機能がある。
今回はこちらを使って実装していく。

実際に実装してみる

フォルダの構成はこんな感じ。

Obsidian Vault
|_2023
  |_08
    |_2023-08-13
|_開発ログ
|_参考URL

日記は2023以下に月ごとに保存されている。
開発記事は開発ログフォルダの中に保存される。
参考URLにurlが1つずつ記録されたmdファイルが入っている。
という特徴がある。

まずは開発記事を作成する。

記事内ではメタデータとしてyamlを定義しており、この中でもdateプロパティを定義してプログラムで使っている。
参考→メタデータについて

開発記事を1つ書き終えたら、参考にしたURLを1つずつ記事として残していく。

イメージとしてはこんな感じでメタデータとしてurlプロパティを定義し、その中にurlを入れている。

次に日記に使うテンプレートに以下を埋め込む。

const k = ["記事名(リンク)", "作成日"]
const urls = dv.pages('"参考URL"').file
const todey = dv.current().file

// この日記と同じ日付のURLだけを一覧並べたい
const todeyOnly = []
for(let i =0;i<urls.length;i++){
	const time = urls[i].frontmatter.date.split(' ')[0]
	if(time === todey.frontmatter.date.split(' ')[0]) todeyOnly.push(urls[i])
}

const d = todeyOnly.map(x => [`\[${x.name}\]\(${x.frontmatter.url[0]}\)`,x.frontmatter.date])
dv.table(k ,d)

埋め込んだ結果以下のようになる。

その日保存したurlが一覧となって表示されているのがわかる。

どういう処理をやっているのか

コードを説明する。

const k = ["記事名(リンク)", "作成日"]
const urls = dv.pages('"参考URL"').file
const todey = dv.current().file

変数kはヘッダー情報として記事名と作成日を表示させるために配列にいれている。
urlsでは参考URLというフォルダのmdファイル情報を取ってきている。
dv.pages('"フォルダ名"').fileのようにフォルダ名を二重引用符で囲って呼び出すとフォルダ事でmdファイルを取得することができる。
参考→dv.pages(source)

todeyではdataviewjsを埋め込んだファイルの情報を取ってきている。
参考→dv.current()

const todeyOnly = []
for(let i =0;i<urls.length;i++){
	const time = urls[i].frontmatter.date.split(' ')[0]
	if(time === todey.frontmatter.date.split(' ')[0]) todeyOnly.push(urls[i])
}

todeyOnly配列は、参考URLフォルダから取ってきたファイル情報のdateプロパティとdataviewjsを埋め込んだファイルのdateプロパティと比較してもし同じ日付であれば一致したurlsの情報をtodeyOnlyに突っ込むという処理をしている。
dateプロパティなどのメタデータはfileオブジェクトのfrontmatterプロパティに格納されていたのでそこから情報を持ってきている。

const d = todeyOnly.map(x => [`\[${x.name}\]\(${x.frontmatter.url[0]}\)`,x.frontmatter.date])
dv.table(k ,d)

テーブルを表示するための処理をしている。
テーブルでは記事名（リンク）の項目がクリックされた時そのままブラウザに飛んで欲しい。
そこで正規表現を使ってURLが保存された記事のタイトルとURLそのものを紐づける記述をしている。

番外編：開発記事に参考URLを一覧で表示できるようにする

Dataviewjsを以下のように記述した。

const k = ["記事名(リンク)", "作成日"]
const urls = dv.pages('"参考URL"').file
const todey = dv.current().file

// aliasesで同じ名前だけとりだす
const nameOnlys = []
for(let i =0;i<urls.length;i++){
	if(urls[i].frontmatter.relation.some(x => x === todey.frontmatter.aliases[0])) nameOnlys.push(urls[i])
}

// この記事と同じ日付のURLだけを一覧並べたい(予防)
const todeyOnly = []
for(let i =0;i<nameOnlys.length;i++){
	const time = nameOnlys[i].frontmatter.date.split(' ')[0]
	if(time === todey.frontmatter.date.split(' ')[0]) todeyOnly.push(nameOnlys[i])
}

const d = todeyOnly.map(x => [`\[${x.name}\]\(${x.frontmatter.url[0]}\)`,x.frontmatter.date])
dv.table(k ,d)

URLを保存した記事のメタデータであるrelationに紐づけたい開発記事のタイトルを入れ、todeyともし同じタイトルが含まれているURLの記事があったら表示するという処理に変更している。

結果として以下のようになった。

開発参考記事という見出しの下に開発記事のdateプロパティと同じ日付かつrelationプロパティで紐づけられているURLが一覧として並んでいる。

その他：実装意図など

元々Notionを使っていてurlと開発記事の紐づけをしていた。

（こんな感じで記事それぞれに書いた日の日記とURLを紐付けていた）

諸事情がありObsidianに移行したのだけれど、urlと開発記事の紐づけ機能がないと不便だと気づきDataviewjsを色々触っていくうちに知見がたまったので備忘録目的で記事にした。
Notionと違って検索・絞り込み機能等は実装していないので今後の修正課題ではある。（ただしまだ実装方法がわからない...）