DataviewJSでカスタムビューを作るのに必須なdv.elとdv.viewの使い方

Obsidianで自分でHTMLやCSSを書いてビューをカスタマイズするのはめちゃくちゃ楽しい！

コミュニティプラグインのDataviewJSを使うことでカスタムビューを作ることができます。
そんな時によく使うのがdv.elとdv.viewです。

僕はカスタムビューを作るときは大体この2つの要素を組み合わせて、Obsidianのカスタマイズを楽しんでいます。

今回はそんな必須要素のdv.elとdv.viewの使い方を書いていきます。

目次

1. DataviewJSの使い方を確認する
2. dv.el
3. dv.view
4. dv.elとdv.viewを組み合わせる
5. まとめ

DataviewJSの使い方を確認する

今回の記事ではdv.elとdv.viewの使い方に焦点を当てています。
英語にはなりますがDataviewJSの使い方が載っている公式サイトがあります。

もしわからないことがあれば公式サイトをあわせて確認するようにしてください。

Codeblock Reference - Dataview

dv.el

dv.elを使うとHTML要素を作成することができます。
引数は2つで、第1引数にはHTML要素のタグ名、第2引数にはテキストを指定します。

基本的な使い方は引数を2つ指定することで使うことができます。
たとえば、div要素を作成する場合はこんな感じ。

1
const container = dv.el('div', '')

これでcontainerには下記のようなdiv要素が作成されます。

1
<div></div>

要素にクラスを追加する

dv.elは第3引数にオブジェクトでclsを指定することで要素にクラスを追加することができます。

1
const container = dv.el('div', '', { cls: 'container' })

こんな感じにすると

1
<div class="container"></div>

というHTMLを生成できます。

要素に属性を追加する

dv.elは第3引数にはクラス同様オブジェクトでattrを指定することで要素に属性を追加することができます。
例えばリンクタグにhref属性を追加する場合はこんな感じ。

1
const link = dv.el('a', 'Example', { attr: { href: 'example.md' } })

これで

1
<a href="exmple.md">Example</a>

というHTMLを生成できます。

ただしカスタムビューを作ることにおいては入れ物としてdivを生成しまえば、あとはHTMLをベタ書きできるので属性の追加は個人的にはあまり使うことがないです。

dv.view

dv.viewはObdisianでカスタムビューを作りたい時に欠かせない要素です。
この関数が使えるだけで管理もしやすく、とても使いやすくなります。

dv.viewは引数にJavaScriptを書いたファイルのパスを指定することでスクリプトを実行することができます。
たとえば、views/example/view.jsを実行したい場合はこんな感じ。

1
2
3
4
obsidian root
| -- views
| -- example
| -- view.js

view.jsの処理を実行するにはマークダウンファイルでdataviewjsのコードブロック内に下記のように書くことで実行できます。

1
await dv.view('views/example')

スクリプトに引数を渡す

dv.viewは第2引数にオブジェクトを指定することでスクリプトに引数を渡すことができます。

1
await dv.view('views/example', { message: 'Hello' })

こんな感じにするとview.jsの方で引数のmessageを使うことができます。
view.js側ではinputという変数に引数が格納されているので、それを使うことで引数を取得できます。

1
input.message // Hello

CSSでスタイルをあてる

dv.viewはJavaScriptの実行と合わせてCSSを適用することもできます。
JavaScriptと同じディレクトリにview.cssを作成します。

例えばこんな感じのcssを用意する。

1
2
3
.example {
  color: red;
}

そのクラスをview.jsで生成するHTMLにクラスとして適用することで文字色を赤くすることができます。

1
const container = dv.el('div', 'Hello', { cls: 'example' })

こうすることで下記のようなHTMLが生成されて、クラスexampleはview.cssのスタイルが適用されます。

1
<div class="example">Hello</div>

dv.elとdv.viewを組み合わせる

実際にカスタムビューを作るにはdv.elとdv.viewを組み合わせることがほとんどです。

たとえば、view.jsでHTML要素を作成してそれを表示したい場合はこんな感じ。

1
2
3
4
5
const container = dv.el('div', '')

container.innerHTML = `
<div>Message: ${input.message}</div>
`

こんな感じのスクリプトを書いてdv.viewから実行することで下記のようなHTMLが生成されます。

呼び出し

1
await dv.view('views/example', { message: 'Hello' })

生成されるHTML

1
<div>Message: Hello</div>

この場合生成されたHTMLがdv.viewを使った場所に挿入されることになります。

まとめ

Obsidianでカスタムビューを作りたいならDataviewJSを使ってしまえば技術的にできないことを除けば大体のことは実現できます。

dv.elとdv.viewを使いこなすにはHTML、CSS、JavaScriptの知識が必要になってしまいますが、使い方を覚えられると一気にObsidianを使うのが楽しくなります！