【Obsidian】Metadata Menuで圧倒的支配
· 9 min read
Obsidianでメタデータ(プロパティ)を心地良く制御できるプラグインMetadata Menuを紹介します。
悩み
Obsidianのプロパティを編集しているとき「もっと速く入力できたらいいな」「Notionのようにセレクトや日付をポチポチして入力したいな」と思っていました。
画像だったら画像一覧を表示して選択したい。特定のフォルダのノートだけを候補に表示してリンクしたい。
そんなわがままを叶えてくれたのがMetadata Menuです。
Metadata Menuとは?
Metadata Menuは、ルールを用意してプロパティを入力しやすくするプラグインです。
こんな感じで、プレビューモードで入力欄の左にボタンが表示されます。
![ボタンが表示される](/_astro/entered-fields.3696PwON.jpg)
ボタンを押せば、あらかじめ用意した4つの選択肢が表示されます。
![single selectの例](/_astro/example-single-select.Cn6aoqlN.jpg)
日付入力もピッカーが表示されるため、ポチポチするだけでできます。
![日付入力の例](/_astro/example-date.Cy1ajVDL.jpg)
画像やファイルを選択肢として表示させ、ワンクリックでリンクの入力ができます。
![画像選択の例](/_astro/example-media.DfeCd7gQ.jpg)
Metadata Menuの導入
まず、Metadata Menuをインストールします。
Dataviewもインストールし、Enable JavaScript Queries
とEnable Inline JavaScript Queries
をオンにしましょう。
プロパティのルールを決める方法はいくつかありますが、今回は「FileClass」というしくみを使います。
FileClassとは
FileClassとは、自分で指定したmdファイルにルールを書いておけるしくみです。
こんな風にUIが用意されています。
![FileClassの例](/_astro/fields-define-list.JhKYMiP9.jpg)
必要な設定
FileClassを利用するには、まずFileClassのファイルを保存しておくフォルダを決めます。
プラグインの設定Class Files path
に書きます。
![FileClassの場所の設定](/_astro/setting-where-define.aDmTj7p2.jpg)
FileClass Field alias
は、ルールを適用するファイルにて「どのFileClassを使うか」を示すプロパティを指定します。
流れ
FileClassファイルの用意
まずClass Files path
で指定したフォルダにファイルを用意し、FileClass Viewを開きます。2とおり紹介します。
エクスプローラを使う場合、Class Files path
のフォルダにプラスマークのボタンがあるのでそれをクリックして名前を入力します。
![ファイルクラスをエクスプローラーから追加](/_astro/add-new-fileclass.Dsf-23g3.jpg)
エクスプローラを使わない場合、Class Files path
のフォルダにファイルを作って開き、タブにある箱のボタンをクリックします。
![FileClass Viewの開き方](/_astro/open-fileclass-view.CmzBY-9z.jpg)
FileClass Viewでルールを決める
FileClassの画面が開いたら、Fileclass fields
タブにあるボタンをクリックしてルールを決めていきます。
![FileClass Viewを最初に開いた時](/_astro/fields-empty.Bh3xIFaH.jpg)
たとえば、選択肢を提供するselect
は次のような画面でルールを決めます。のちほど詳しく説明します。
![selectの例](/_astro/fields-select-define.Bk-QZoiv.jpg)
ルールは後から追加・削除・変更できます。
![Fileclass filedsの例](/_astro/fields-define-list.JhKYMiP9.jpg)
fileClassを使ってみる
ルールを使うファイルにて、FileClass Field alias
で指定したプロパティ(画像ではfileClass
)を追加し、ボタンを押してどのFileClassを使うかを選びます。
![どのFileClassを使うか](/_astro/select-fileclass.CE445LeY.jpg)
「プロパティを追加」の横のボタンを押し、Insert missing fields in frontmatter
を選択します。
![FileClassの適用](/_astro/fileclass-package-button.BAgAO-4z.jpg)
すると、さきほど定義したプロパティが一気に追加されます。
![プロパティが追加された](/_astro/added-fields.ql9t1lU7.jpg)
テンプレートを使うのであれば、この段階でプロパティを並び替えて保存しておくとよいでしょう。
あとは各プロパティの横のボタンを押して値を入力していくだけです。
プロパティの登録の詳細
プロパティにはたくさんのタイプが用意されています。その一部を紹介していきます。
![フィールドのタイプ](/_astro/field-types.D_EdXgGW.jpg)
Number
Numberタイプは数字です。最小値・最大値や、ボタンでどのくら増減させるかを決めることができます。
![Numberの入力欄](/_astro/example-number.DNq8RVg9.jpg)
Boolean
Booleanタイプはチェックボックスです。
![Booleanの例](/_astro/example-boolean.Clb7mQOp.jpg)
Input
Inputタイプは文字列です。
普通の文字列かと思いきや、テンプレートも使えます。
テンプレートを使う場合、FileClassでのプロパティ編集画面のTemplateに{{Name}}
や{{pet:["犬", "猫"]}}
のように書きます。
![テンプレートの例](/_astro/example-template.PBldz6x_.jpg)
実際にプロパティを入力する時、{{}}
の中身がテンプレートとして機能します。
![テンプレートを使ったInputの例](/_astro/example-input-template.Bz3bbkeL.jpg)
詳しくは公式ドキュメントを読んでください。
改行については、FileClassのボタンを使って改行すると現在はバグでYAMLとして機能しなくなります。
FileClassのボタンを押さずに普通に入力するか、文頭にYAMLの改行を示す|
などを入れましょう。
Select
Selectタイプを使うと、選択肢の中から0~1つを選ぶことで入力できます。
![selectの例](/_astro/example-single-select.Cn6aoqlN.jpg)
直接入力だと絵文字を付けるのが面倒ですが、Selectを使えば絵文字つきの入力もポチポチするだけです。
選択肢は単純なテキストですが、画像やファイルを選びたい場合はのちほど説明する別のタイプを使います。
Multi
MultiタイプはSelectの複数版です。
![selectの例](/_astro/example-multi-select.lk3j7JSF.jpg)
画像の選択
Mediaタイプを使えば、プロパティ編集時に画像をカードやリストとして一覧表示して選択できます。
![](/_astro/example-media.DfeCd7gQ.jpg)
選択肢に表示するファイルは、特定のフォルダのみに絞ることもできます。
![Mediaタイプの設定画面](/_astro/media-define.BXu8v87-.jpg)
「inline thumbnail embedded
をオンにすればプロパティで画像を埋め込みできるのかな~」と思っていましたが、どうやら違うようです。GitHubを見るとIssueがあるため、バグかもしれません。
これもMulti版があります。
File
Fileタイプでは、dataviewjs queryを使って候補の一覧を出せます。
![Fileタイプの例](/_astro/example-file-alias.CmI02hpN.jpg)
画像では職業
というタグのついたページだけを候補にしています。
DataviewのEnable JavaScript Queries
とEnable Inline JavaScript Queries
をオンにしていないと正しく表示されませんのでご注意を。
Zettelkastenを使っているなら、Aliasにタイトルを指定しましょう。
Aliasを使えば候補名がファイル名ではなく指定したプロパティの値になります。
![Fileタイプの設定画面](/_astro/file-define.DYhnnP6Z.jpg)
Date
Dateタイプを使えば、日付をフォーマットに沿って入力できます。ピッカーも表示されます。
![Dateタイプの例](/_astro/example-date.Cy1ajVDL.jpg)
コピペするときも便利です。
たとえばフォーマットに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, "誕生日"), ]))
![dataviewの例](/_astro/dataviewjs-support.CyMm1yea.jpg)
ステータスを変更する場合に重宝しています。
Metadata Menuを紹介しました。愛しています。
今回紹介したプロパティのタイプは一部ですので、ぜひ公式ドキュメントを見てください。