Obsidian Bases に検索機能を実装する

データベースってこうじゃないと。

Bases

Basesをコードブロックで埋め込む方法を試しながら「検索で絞り込めたらいいなあ」と思ったので、 dataviewでもやっていた「プロパティを検索窓代わりにする」を実装しました。

やっと「使える！」というレベルになったかな。

webclip.md

Obsidian Web Clipper でクリップしたノートをデータベースにします。 imageプロパティを取得しているのが前提。それをサムネとして表示します。

文中に下記コードブロックを埋め込みます。

```base
filters:
  and:
    - file.path.contains("Clippings/")
formulas:
  サムネ: image(image)
views:
  - type: cards
    name: Cards
    filters:
      and:
        - if(this.search,(file.name+author+description).contains(this.search), true)
    order:
      - file.name
    sort:
      - property: file.mtime
        direction: DESC
    columnSize:
      file.name: 640
    rowHeight: medium
    image: note.image
    imageFit: ""
    imageAspectRatio: 0.85

```

それとフロントマターに search というプロパティを作ります。

ソースモードで見るとこんな感じ。

使い方

リーディングビューにするとデータベースになります。

プロパティの search にキーワードを書けば絞り込み。

こりゃあ、すごいわ。また面白いものを作ってしまった。

ポイント

Filter に直接コードを書き込むモードがあって

if(this.search,(file.name+author+description).contains(this.search), true)

条件分岐しています。

this.search でノートのプロパティを取得し、 searchに書き込みがあった場合は「ファイル名、著者名、概要」のいずれかで絞り込む。そうでなければ true でスルーするようになっています。

検索対象を増やしたいときはここに追加してください。

まとめ

ファイル名を二段にしたいなあ。 cssでいけるだろうか。

.bases-cards-line {
  height: 2.3em;
  white-space:pre-wrap;
  font-size: 12px !important;
}

ここあたり？

Obsidian Bases を快適にするcss（モバイル用？） - Jazzと読書の日々