Obsidianで「左にメニュー、右に内容」のSaaS的なUIを実現したくて、Pinned Link Routerというプラグインを自作しました。
……といっても、実装は全部Claude Codeにお願いしたので、この記事では「なぜ作ったか」「どう使っているか」を中心に書きます。
動機：タブ切り替えが地味にだるい
Obsidianを使っていると、MOCやインデックスページを見ながらあちこちのノートに飛んで作業することが多いんですが、毎回タブが切り替わるのが地味に面倒でした。
SaaSサービスでよくある「左サイドバーにメニュー一覧、右側に選んだ内容が表示される」あのUIパターン。あれがObsidianでも欲しかったんです。
やりたかったこと
- 左ペイン: MOCやダッシュボードをピン留めして固定（ナビゲーション用）
- 右ペイン: リンクをクリックすると、こっちで開く（作業用）
- タブ切り替え不要: 左でぽちぽち、右で作業。それだけ
Claude Codeに丸投げした
「ピン留めタブのリンクを別ペインで開くプラグインを作って」とClaude Codeに伝えたところ、DOMキャプチャ方式で実装してくれました。
DOMキャプチャというのは、Obsidianの画面構造（DOM）を直接監視する方法です。リンクのクリックイベントを監視して、「これはピン留めタブからのクリックだ」と判定したら、同じタブではなく別ペインで開くように処理を分岐させています。
Obsidianの内部APIだけではリンククリックの挙動を制御しきれないので、この方式になったようです。正直、技術的な実装の詳細は私よりClaude Codeの方が詳しいです。
実際の使い方
一番気に入っている使い方はこれです。
- 左ペインにタスク一覧（ダッシュボード的なノート）をピン留め
- 左からタスクをぽちっと選ぶ → 右ペインで開く
- 右で作業して完了させる → 左のタスク一覧にも完了が同期される
- また左から次のタスクを拾って → 右で作業
このループがテンポよく回せるのがすごくいい。今どこにいるか迷子にならないのが大きいです。左のメニューは常に見えているので、全体の中の今の位置が把握できます。
MOCを左に固定しておけば、知識ベースの整理作業も同じ要領でサクサク進められます。
注意点
DOMキャプチャ方式なので、Obsidianのアップデートで内部構造が変わると動かなくなる可能性があります。壊れたらまたClaude Codeに直してもらう予定です。
まとめ
SaaSサービスでおなじみの「左メニュー・右コンテンツ」をObsidianで再現するプラグインを、Claude Codeに作ってもらいました。
タブ切り替え不要で、左でナビゲーション、右で作業。たったこれだけで、作業のテンポが目に見えて上がります。
「こういう機能が欲しいな」と思ったら、Claude Codeに頼んで作ってもらう、というのも今の時代のプラグイン開発の一つの形かもしれません。
コメント