【Obsidian】Metadata Menuで圧倒的支配

Obsidianでメタデータ（プロパティ）を心地良く制御できるプラグインMetadata Menuを紹介します。

悩み

Obsidianのプロパティを編集しているとき「もっと速く入力できたらいいな」「Notionのようにセレクトや日付をポチポチして入力したいな」と思っていました。
画像だったら画像一覧を表示して選択したい。特定のフォルダのノートだけを候補に表示してリンクしたい。

そんなわがままを叶えてくれたのがMetadata Menuです。

Metadata Menuとは？

Metadata Menuは、ルールを用意してプロパティを入力しやすくするプラグインです。

こんな感じで、プレビューモードで入力欄の左にボタンが表示されます。

ボタンを押せば、あらかじめ用意した4つの選択肢が表示されます。

日付入力もピッカーが表示されるため、ポチポチするだけでできます。

画像やファイルを選択肢として表示させ、ワンクリックでリンクの入力ができます。

Metadata Menuの導入

まず、Metadata Menuをインストールします。
Dataviewもインストールし、Enable JavaScript QueriesとEnable Inline JavaScript Queriesをオンにしましょう。

プロパティのルールを決める方法はいくつかありますが、今回は「FileClass」というしくみを使います。

FileClassとは

FileClassとは、自分で指定したmdファイルにルールを書いておけるしくみです。

こんな風にUIが用意されています。

必要な設定

FileClassを利用するには、まずFileClassのファイルを保存しておくフォルダを決めます。
プラグインの設定Class Files pathに書きます。

FileClass Field aliasは、ルールを適用するファイルにて「どのFileClassを使うか」を示すプロパティを指定します。

流れ

FileClassファイルの用意

まずClass Files pathで指定したフォルダにファイルを用意し、FileClass Viewを開きます。2とおり紹介します。

エクスプローラを使う場合、Class Files pathのフォルダにプラスマークのボタンがあるのでそれをクリックして名前を入力します。

エクスプローラを使わない場合、Class Files pathのフォルダにファイルを作って開き、タブにある箱のボタンをクリックします。

FileClass Viewでルールを決める

FileClassの画面が開いたら、Fileclass fieldsタブにあるボタンをクリックしてルールを決めていきます。

たとえば、選択肢を提供するselectは次のような画面でルールを決めます。のちほど詳しく説明します。

ルールは後から追加・削除・変更できます。

fileClassを使ってみる

ルールを使うファイルにて、FileClass Field aliasで指定したプロパティ（画像ではfileClass）を追加し、ボタンを押してどのFileClassを使うかを選びます。

「プロパティを追加」の横のボタンを押し、Insert missing fields in frontmatterを選択します。

すると、さきほど定義したプロパティが一気に追加されます。

テンプレートを使うのであれば、この段階でプロパティを並び替えて保存しておくとよいでしょう。

あとは各プロパティの横のボタンを押して値を入力していくだけです。

プロパティの登録の詳細

プロパティにはたくさんのタイプが用意されています。その一部を紹介していきます。

Number

Numberタイプは数字です。最小値・最大値や、ボタンでどのくら増減させるかを決めることができます。

Boolean

Booleanタイプはチェックボックスです。

Input

Inputタイプは文字列です。

普通の文字列かと思いきや、テンプレートも使えます。
テンプレートを使う場合、FileClassでのプロパティ編集画面のTemplateに{{Name}}や{{pet:["犬", "猫"]}}のように書きます。

実際にプロパティを入力する時、{{}}の中身がテンプレートとして機能します。

詳しくは公式ドキュメントを読んでください。

改行については、FileClassのボタンを使って改行すると現在はバグでYAMLとして機能しなくなります。
FileClassのボタンを押さずに普通に入力するか、文頭にYAMLの改行を示す|などを入れましょう。

Select

Selectタイプを使うと、選択肢の中から0～1つを選ぶことで入力できます。

直接入力だと絵文字を付けるのが面倒ですが、Selectを使えば絵文字つきの入力もポチポチするだけです。

選択肢は単純なテキストですが、画像やファイルを選びたい場合はのちほど説明する別のタイプを使います。

Multi

MultiタイプはSelectの複数版です。

画像の選択

Mediaタイプを使えば、プロパティ編集時に画像をカードやリストとして一覧表示して選択できます。

選択肢に表示するファイルは、特定のフォルダのみに絞ることもできます。

「inline thumbnail embeddedをオンにすればプロパティで画像を埋め込みできるのかな～」と思っていましたが、どうやら違うようです。GitHubを見るとIssueがあるため、バグかもしれません。

これもMulti版があります。

File

Fileタイプでは、dataviewjs queryを使って候補の一覧を出せます。

画像では職業というタグのついたページだけを候補にしています。

DataviewのEnable JavaScript QueriesとEnable Inline JavaScript Queriesをオンにしていないと正しく表示されませんのでご注意を。

Zettelkastenを使っているなら、Aliasにタイトルを指定しましょう。
Aliasを使えば候補名がファイル名ではなく指定したプロパティの値になります。

Date

Dateタイプを使えば、日付をフォーマットに沿って入力できます。ピッカーも表示されます。

コピペするときも便利です。
たとえばフォーマットにYYYY年MM月DD日(ddd)を指定し、入力欄に2024/04/15と入力すると2024年04月15日(月)変換されます。便利です。

テーブルの表示

FileClassの画面でTable viewタブをクリックすると、そのFileClassを使っているファイルがテーブルとして表示されます。
表示されるプロパティはFileClassで指定したもののみです。このテーブルの状態で値の編集もできます。

フィルターや非表示設定など、細かいところにも手が届いています。

dataviewのテーブルとの連携

dataviewの中でAPIを使えば、編集ボタンを追加できます。

const {fieldModifier: f} = MetadataMenu.api

dv.table(["file", "画像","ステータス", "職業", "タイプ", "誕生日"],
  dv.pages()
    .filter(p => p.file.frontmatter["fileClass"] == "test")
    .sort(p => p.file.frontmatter["project-name"])
    .map(p => [
        dv.fileLink(p.file.path, false, p.file.frontmatter.title, {}),
        f(dv, p, "画像"),
        f(dv, p, "ステータス"),
        f(dv, p, "職業"),
        f(dv, p, "タイプ"),
        f(dv, p, "誕生日"),
    ])
)

ステータスを変更する場合に重宝しています。

Metadata Menuを紹介しました。愛しています。

今回紹介したプロパティのタイプは一部ですので、ぜひ公式ドキュメントを見てください。