Obsidianプラグイン開発備忘録
公式のサンプル だけでは結構苦戦したので備忘録まで。
作ったもの
読書管理用の自作プラグインです。
- 日本のISBNにしか対応していない
- OpenBDで書誌情報を検索している
といったことで完全に個人使用目的なのでコミュニティプラグインとしては未公開です。
ISBNを自動補完してノートを新規作成したり、
ノート名がISBN13桁であればそこから書誌情報を検索してフロントマターを生成するモーダルを表示したり、
ノート内であれば引用やメモ用の記号を挿入しやすくしたり、色々と機能を盛り込んでみました。
コマンドの追加方法は3つ
callback によるシンプルな登録
コマンドパレットから選択して実行したい関数を callback に登録する。
checkCallback で条件を詳細にチェックして登録
コマンドを実行できる状況かを事前にチェックしたいときは checkCallback を使う。
checkCallback が true を返したときだけコマンドパレットに表示されるようになるので、特定の種類のファイルを開いているときだけパレットに表示したいような場合に適しているのがこの方法。
さらに詳しい解説 によると、Obsidianはコマンドパレット表示時に各コマンドの checkCallback に true を渡すことで一覧表示可能か判定しているとのこと。
ということで、（上記の yonda-open-register-modal など）常にパレットに表示していいようなコマンドであれば前述の callback を使っても変わりない。
editorCallback でエディタのテキスト操作を登録
開いているノートの内容を操作するなど、エディタのマクロ的なコマンドを登録するのであれば editorCallback を使う。
引数として editor と view が渡されるので、コールバック側ではこのようにして文字列の挿入・置換やカーソル移動などを制御できる。
アイコンは外部サイトから指定する
公式 にあるように、各コマンドのアイコンは lucide.dev から読み込んでいる様子。
リボンにコマンドを表示させる
addRibbonIcon を使えばOK。
モーダル作成
Modal クラスを継承することで自作のモーダルを作れる。
要素の作成
onOpen 内で createSpan / createDiv / createEl を使うことで要素を追加していく。入れ子にすることもできる。
const { contentEl } = this; // サンプルに準拠
contentEl.createEl("label", {
text: "ラベルです",
}).createEl("button", {
text: "ボタンです",
})
上記のコードは下記の要素を生成する。
<label>ラベルです<button>ボタンです</button></label>
各種属性は {text: "ボタンです"} のようにオブジェクトとして渡す（補完も対応しているので困ったらCtrl+Space）。
クラスは {cls: "hogehoge"} とするほかに addClass() も用意されている。
スタイル指定
styles.css で指定。
モーダル全般に反映されるので、各モーダルの生成時にidを指定しておくとベター。
モバイルアプリのエミュレート
公式 にあるように、Ctrl+Shift+I で開くコンソールにコマンドを入力してエミュレートできる。
this.app.emulateMobile(true);
トグルする場合は次のように。
this.app.emulateMobile(!this.app.isMobile);
Discussion