Obsidian：WebClipがdataviewで一覧表示できない

ファイル名の解釈で間違うようです。修正待ちか。

WebClipper

Safari用のクリッパーができたことで、iPadでもネット上の記事を集めるのが簡単になりました。とくに期間限定の対談とか抜き出してテキストにしておける。これは便利。データベースとして有用です。

ただ、蓄えすぎるとどんな記事があったか忘れてしまう。後で読み直したいとき一覧しやすい環境が欲しくなります。

まず失敗

そこで簡単なdataviewスクリプトを書いてみました。

```dataview
table without id
link(source, "web") as "Link",
link(file.name, title) as "",
created as "作成日"
from "Clippings"
sort created desc
```

クリップはClippingsフォルダに集まるので、外部リンクと内部リンクをテーブル表示しています。タップするとブラウザが開いたりノートが開いたりする。

リストアップされて一見良さそうなんだけど、よく見るとタイトルが変です。リンク先であるファイル名とちゃんぽんになっている。実際タップしても白紙のノートを開いて、本来のファイルに関連づけられていません。

ファイル名に「パイプ」があるとdataviewが区切りと勘違いしてますね。「パイプ」とは|のことです。この縦線をコマンドか何かと思っているらしい。

仕方ないので、dataviewjsで組み直してみました。

完成版

検索欄付きのデータベースです。

```dataviewjs
const FOLDER = "Clippings"
const CSS = "font-size:18px;padding:4px;"

const p = dv.el("input","")
p.placeholder = "..."
p.style = "width:50%;font-size:large;border-radius:3px;"
const b = dv.el("div", "")
b.style = "max-height:14000px;"
disp()

p.onkeyup = () => disp()

function disp(){
  const  d = dv.pages(`"${FOLDER}"`)
  .filter(x => (x.title + x.author + x.description).includes(p.value))
  .sort(x => x.created, "desc")
  .map(x => `<tr style="${CSS}"><td><a href='${(x.source)}'>□</a></td><td><a class=internal-link href="${x.file.name}">${x.title}</a></td><td>${x.created.toLocaleString()}</td></tr>`)
  b.innerHTML = `<br><table style='width:100%;'>${d.join("\n")}</table>`
}
```