Obsidian dataviewでプログラミングしてみよう

dataviewは表を作るだけではありません。 javascriptを使ったプログラムを動かすこともできます。今回その入口をお示ししましょう。

ボタン

まず「ボタン」から。テキストにボタンを置いて他のアプリを起動します。

```dataviewjs
const b = dv.el("button", "Google")

b.onclick = () => {
  open("https://www.google.co.jp")
}
```

dv.el() を使ってHTMLのパーツを配置できます。 dv はdataviewのことで el はエレメント。 divタグを作りたいときは dv.el("div","名前") となります。今回はボタンなので dv.el("button", "名前") とします。

このボタンを押したときGoogleを開きたい。その場合はonclickのイベントを使います。 b.onclick = () => {} ですね。ボタンをクリックしたとき {} を実行する。

実行する内容は open("URLアドレス")。 URLアドレスを開くjavascriptコマンドです。これでGoogleを開くことができます。

URLスキームも使えます。 open("mobilenotes://") とすればメモ帳が開き、open("calshow://") とすればカレンダーが立ち上がる。ランチャーを組み込める。

スタイル

ただ、これだけだとボタンが見にくいですよね。

```dataviewjs
const b = dv.el("button", "Google")
b.style = "color:white; background: darkred;"

b.onclick = () => {
  open("https://www.google.co.jp")
}
```

.style でパーツのカスタマイズができます。 CSSに準じます。 color が文字色で background が背景色。これをプレビューすると下のようになります。

このボタンを押すとSafariが起動します。

入力欄

次に入力欄を追加しましょう。

```dataviewjs
const a = dv.el("input")
a.style = "font-size: large; margin-right: 10px;"
const b = dv.el("button", "Google")
b.style = "color:white; background: darkred;"

b.onclick = () => {
  s = encodeURI(a.value)
  open("https://www.google.co.jp/search?q=" + s)
}
```

input のパーツを作ります。フォントサイズは large にします。そのままだと次のGoogle ボタンとくっつくので右側にマージンを設けます。

入力欄にキーワードを打ち込めばGoogleで検索します。

計算式

これを応用すると自動計算機になります。

```dataviewjs
const a = dv.el("input")
a.style = "font-size: large; margin-right: 10px;"
const b = dv.el("button", "平方根")
b.style = "color:white; background: darkred;"
const c = dv.el("span", " = 答え")

b.onclick = () => {
  s = Math.sqrt(a.value)
  c.innerText = " = " + s
}
```

javascriptのMath関数を使い、演算を行います。