dataviewは表を作るだけではありません。 javascriptを使ったプログラムを動かすこともできます。 今回その入口をお示ししましょう。
ボタン
まず「ボタン」から。 テキストにボタンを置いて他のアプリを起動します。
```dataviewjsconst 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://")とすればカレンダーが立ち上がる。
ランチャーを組み込める。
スタイル
ただ、これだけだとボタンが見にくいですよね。
```dataviewjsconst b = dv.el("button", "Google")b.style = "color:white; background: darkred;"b.onclick = () => { open("https://www.google.co.jp")}```
.styleでパーツのカスタマイズができます。
CSSに準じます。
colorが文字色で backgroundが背景色。
これをプレビューすると下のようになります。
このボタンを押すとSafariが起動します。
入力欄
次に入力欄を追加しましょう。
```dataviewjsconst 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で検索します。
計算式
これを応用すると自動計算機になります。
```dataviewjsconst 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関数を使い、演算を行います。
「平方根」のボタンを押すと答えが出てくる。 もちろん、もっと複雑な関数でも構いません。 わざわざ手計算しなくていい。
まとめ
自分だけのアプリを作る。 ほら、「ダイナブック」の片鱗を感じませんか。