Zenn
💨

obsidian plugin のサンプルチュートリアルを試す

2023/01/02に公開
Obsidian
devbox
tech

はじめに

obsidianをどんな感じで拡張するのか興味があったため、obsidian pluginのサンプルからチュートリアルを参考に動きを調べてみた。

まずは環境作成からであるが、お手軽な順に並べると以下のパターンがありそう。

  1. obsidianの保管庫に直接ソースを展開してビルドする
  2. 別途ビルド環境を作って、obsidianの保管庫にリンクを貼る
  3. 別途ビルド環境を作って、obsidianの保管庫に更新分を自動コピーしていく

１，２だと余計なファイルが保管庫に混ざるのがいやだったので、今回は３で進める。

obsidian pluginの作成環境を作る

  • チュートリアル
  • 前提
    • wslでdevboxを使用してビルド環境を作る
  • 解説サイト
  • ビルド環境（wslのdevboxシェル）の作成
    • devboxで必要環境をインストール
      • devboxを未インストールの場合はこちら
        devboxの環境設定
      devbox init
devbox add git nodePackages.npm watchexec go-task
devbox shell
    • sampleのリポジトリを取得
      git clone https://github.com/obsidianmd/obsidian-sample-plugin.git
cd obsidian-sample-plugin
    • ライブラリを初期化
      npm i
    • ビルド設定
      task --init

      • Taskfile.yaml を編集

        • obsidian側のプラグインフォルダを指定(<vault>箇所)
        Taskfile.yml
        version: "3"

tasks:
  dev:
    deps:
      - build:dev
      - watch

  build:dev: npm run dev

  watch: watchexec --no-vcs-ignore --exts "js,json,css" cp main.js styles.css manifest.json <vault>/.obsidian/plugins/obsidian-sample-plugin/

      • obsidian側にプラグインフォルダを作成

        • obsidianの保管庫フォルダから「./.obsidian/plugins/obsidian-sample-plugin/」にフォルダを作成
        • obsidian側のプラグインフォルダに「.hotreload」ファイルを配置
    • ビルドの実行
      task dev -w
  • 実行環境（obsidian）への反映
    • obsidianのプラグイン一覧を手動でリロード後、有効に設定
    • obsidianの画面左にリボンアイコン（サイコロマーク）が追加されていれば、サンプルプラグインはobsidianに反映済です。
    • プラグインフォルダの更新自動反映については後述
  • 開発環境（Windowsのvscode）の用意
    • 上記フォルダをWindowsからvscodeで開く
    • ファイルの編集等はvscodeで行う
    • 「プラグインフォルダの更新自動反映」が有効な場合、ファイルを編集すると、リアルタイムでobsidianに反映される

チュートリアルでプラグインの作り方を学ぶ

一般的なプラグイン開発の流れ

  • サンプルのダウンロード
  • ビルド環境構築
    • npm i
  • ビルド
    • npm run dev
  • obsidianへの反映
    • 反映方法
      • obcidianの保管庫フォルダから
      • 「./.obsidian/plugins/[プラグイン名]/」に以下を配置
        • main.js
        • manifest.json
      • 配置後、obｓidianのプラグイン一覧を手動でリロード後、有効に設定

プラグインフォルダの更新自動反映の仕組み

  • hot-reload プラグイン
    • プラグインフォルダの更新を監視し、実行中のobsidianに反映するプラグイン
    • https://github.com/pjeby/hot-reload
    • 開発用途のプラグインのため、ダウンロード適用ではなくZipファイルを手動で配置してね、とのこと
    • 配置後、obｓidianのプラグイン一覧を手動でリロード後、有効に設定
    • プラグインディレクトリ配下に.gitディレクトリ、もしくは.hotreloadファイルがある対象プラグインのみを監視対象となる
    • 開発が終わったら設定を無効にすること

リポジトリのビルド結果の自動反映の仕組み

  • watchexec
    • リポジトリのビルド出力フォルダを監視し、プラグインフォルダに反映する
  • go-task
    • task --init
    • Taskfile.yml を更新
    • task dev -w
  • 課題
    • cssだけを更新した場合、リポジトリ側には変更が自動反映されなかった。tsをいじるかtaskの再実行で反映された

チュートリアル課題

  • gitのヒストリから変更内容を確認可能
  • コメントでの修正内容の説明あり
  • styles.css
    • スタイルの変更（フォントをredに）
  • main.ts
    • 画面左にリボンアイコンの追加（'dice'）
    • 画面下ステータスバーに文字追加（'Status Bar Text'）
    • モーダルウィンドウを開く（'Open sample modal (simple)'）
    • 設定ページにタブ追加（'Settings for my awesome plugin.'）
    • コンソール出力(obsidianからctrl+shift+i で確認可能)
    • clickイベント登録（registerDomEvent）
    • インターバルイベントの登録（registerInterval）

Discussion