Zenn
🙆

Obsidianコミュニティプラグイン入門

に公開
plugin
Obsidian
tech

はじめに

パソコンで使うメモアプリとしてObsidianを使っています。
昔はNotionを使っていたんですが、個人利用ならObsidianで十分だと感じたためです。
あと、ログがマークダウンで一括管理されるのもスッキリしていて気持ちいいです。
まあ一番のキッカケはカレンダープラグインだったんですが。

カレンダーが表示できてクリックでその日のメモが作成できて、今週何をしたかを簡単に確認できます。しかし、そんなカレンダープラウグインにもちょっと不満があります。

個人的な日記の付け方として年別比較表示ができるものをずっと探していました。去年何をしていたか、更に同じ日の２年前は何をしていたのか、自分の進歩具合が気になります。毎日の記録では自分自身との差分は見いだしにくいものです。

もちろんNotionにもobsidianにもそのようなビューに対応したプラグインはありませんでした。
今回自分でプラグインを作り年別比較表示できるようにしてみたいと思います。
まずはObsidian pluginのtutorialを読むところから始めます。

プラグインを作ろう

Obsidianのプラグインでカスタマイズされた機能を提供できます。
このチュートリアルではサンプルプラグインをコンパイルしオブシディアンにロードします。

何を学ぶか

本チュートリアルを終えると以下ができるようになります。

  • Obsidian pluginを作る環境を構築する
  • ソースコードからプラグインをコンパイルする
  • プラグインに変更を加えてリロードする

事前準備

本チュートリアルを完了するためには以下が必要です

始める前に

意図しない変更でVaultが壊れる可能性があります。開発はメインのVaultで実施してはいけません。常にプラグイン開発用のVault作業するようにしましょう。

空のVaultを作る方法

ステップ１: サンプルプラグインをダウンロードする

.obsidianディレクトリにプラグインをダウンロードすると、Obsidianはそれを検出できます。サンプルプラグインはgithubにあります。

  1. ターミナルを開いてpluginsディレクトリに入ります。
cd path/to/vault
mkdir .obsidian/plugins
cd .obsidian/plugins
  1. サンプルプラグインをcloneします
git clone https://github.com/obsidianmd/obsidian-sample-plugin.git

ステップ２: プラグインをビルドする

サンプルプラグインをコンパイルすることでObsidianはロード可能になります。

  1. プラグインのディレクトリに移動します
cd obsidian-sample-plugin
  1. 依存関係をインストールします
npm install
  1. ソースコードをコンパイルします。以下のコマンドはターミナルで動き続け、ソースコードが変わったらリビルドされます
npm run dev

プラグインディレクトリにコンパイルしたバージョンのmain.jsがあることに注意してください。

ステップ３: プラグインを有効化する

Obsidianでプラグインをロードするにはまず有効化する必要があります。

  1. [Obsidian] -> [Preference] を開きます
  2. サイドメニューから [コミュニティプラグイン] を選択します
  3. [コミュニティプラグインを有効化] のボタンを押します
  4. インストールされたプラグイン の下の Sample Plugin を有効化します

ステップ4: プラグインマニフェストを更新する

プラグインマニフェスト manifest.json を更新してプラグイン名を変更します。マニフェストにはプラグイン名やプラグインの説明が記載されます。

  1. manifest.json を開く
  2. id をユニークな "hello-world" などに変更します
  3. name をわかりやすい名前 "Hello world" などに変更します
  4. プラグインのフォルダ名を id に合わせて変更します。今回は obsidian-sample-plugin を hello-world に変更します
  5. Obsidian を再起動してプラグインマニフェストをロードします

インストールされたプラグインに戻るとプラグイン名が変わっていることがわかります。manifest.json を更新した時は Obsidian を再起動することを忘れないでください。

ステップ5: ソースコードを更新する

ユーザがプラグインを操作できるようにリボンアイコンを追加します。リボンアイコンクリック時に挨拶をします。

  1. main.ts を開きます
  2. プラグインクラスを MyPlugin から HelloWorldPlugin をリネームします
  3. Notice を obsidian からインポートします
import { Notice, Plugin } from 'obsidian';
  1. onload() メソッドに以下を追加します
this.addRibbonIcon('dice', 'Greet', () => {
  new Notice('Hello, world!');
});
  1. Obsidian のコマンドパレットで 保存せずにアプリをリロード を選択します

これでサイコロのアイコンが左側のリボンに表示されます。選択すると右上にメッセージが出ます。ソースコードを更新した時は、コミュニティプラグインを一度無効化して有効化し直すか、保存せずにアプリをリロードしてください。

最後に

Typescriptを使ってプラグインをビルドしました。プラグインを変更しリロードすることができました。

以上でチュートリアルは終了です！
簡単ですね。
次は当初の目的の年別比較表示をする方法を検討してみたいと思います。

Discussion