· by 師岡 誠太
Obsidianプラグインを自分用に大改造 — AIチャットのタブUIをドロワー化するまで
前回の記事では、Obsidian の Claude 用プラグイン「Claudian」（Yishen Tu 氏作・MIT ライセンス）の入力まわりを直した話を書きました。実はこのプラグイン、もっと大掛かりな改造を段階的に続けています。今回はその本丸、チャットタブ一覧の UI を丸ごと作り替えた話です。
AI との並走が日常になると、会話は1本では済みません。案件ごと、調査ごとにタブが増えて、常時7〜8枚開いているのが普通になります。ところが元の UI では、タブは「1 2 3 4 5」という番号だけの小さなバッジ。どれが何の会話かは、ホバーしてツールチップを見るまで分かりませんでした。
出発点 — データはあるのに、表示が捨てている
ソースを読んでまず気づいたのは、各タブのデータ（title・作業中フラグ・応答待ちフラグ）は内部にすべて揃っていることでした。表示のしかたが番号バッジなだけで、情報は最初からそこにある。この「データはあるのに表示が捨てているだけ」というパターンは、改造の費用対効果が最も高い狙い目です。
最初の改造で、タブを「番号＋チャット名＋ステータスドット」の全幅ピルに変えました。
- チャット名は常時表示（長ければ CSS の ellipsis で省略）
- 作業中はブランド色のドットが点滅、応答待ちは赤いドット
- 各タブにホバーでリネーム・削除・完全削除の3ボタン
削除まわりはあえて2段階に分けています。「削除」はタブを閉じるだけで履歴は残る。「完全削除」は会話データごと消す。破壊的な操作ほど、段階を分けて誤爆を防ぐ設計にしました。
テーマに追従する色設計 — 3回失敗して辿り着いた1行
一覧とチャット本文の境目を分かりやすくするため、一覧ブロックに背景色を付けたのですが、この色決めで3回やり直しました。
--background-secondaryをそのまま使う → テーマによっては本文と同色になり、境目が消える--background-primaryを基準に濃くする → プラグインが置かれるサイドバー面は secondary 系なので、別系統のグレーが浮いて見える- 最終形:
background: color-mix(in srgb, var(--background-secondary) 86%, var(--text-normal));考え方は「いま自分が乗っている面の色を、文字色方向に14%だけ濃くする」。特定の色をハードコードせず「相対的に少し濃く」を宣言しているので、ユーザーがどんなテーマを入れていても必ず同系色で浮きます。Obsidian のようにテーマが無数にある環境では、この相対指定が効きます。
タブが増えたら、置き場所ごと変える — サイドドロワー化
ピル化で快適になった一覧も、タブが8枚を超えると今度は縦に伸びて入力欄を圧迫し始めました。そこで一覧を入力欄の上から引き剥がし、右端からスライドインするドロワーに作り替えました。
- コンテナの DOM を縦積みから横並び（row flex）に再構成し、チャット本文を
main-columnとしてラップ - ドロワーはピンボタンで2モード切替。オーバーレイ（チャットに重なり、タブ選択で自動的に閉じる）とドック（本文を押しのけて常時固定）
- モードと開閉状態は設定に永続化し、Obsidian を再起動しても復元される
さらにタブのドラッグ&ドロップ並べ替えも実装しました。面白いのは、並び順の実体が「タブを管理する Map の挿入順」だったことです。並べ替えは Map を clear して望む順に再登録するだけで、永続化も描画もそのまま追従します。ドロップ位置は相手ピルの上半分/下半分で前後を判定し、挿入線は box-shadow: inset で描いています。
細部の日本語対応 — リネームとIME
タブ名のインラインリネームは Enter で確定しますが、ここでも日本語 IME の変換確定と衝突します。前回の記事と同じ !e.isComposing の判定を入れて、変換確定の Enter では確定しないようにしました。日本語で使うツールを改造するとき、Enter を拾う場所には必ず IME の考慮が要る——これはもう定石として覚えてよいと思います。
まとめ — 一気に理想形を狙わない
この改造は一度にやったものではなく、「番号だけで分からない」→ ピル化、「増えたら圧迫する」→ ドロワー化、「並びを変えたい」→ ドラッグ対応、と使いながら次の不満を見つけて5回に分けて進めました。最初からドロワーを設計していたら、ピル時代に得た「この情報は常時見えるべき/隠れてよい」という判断材料がないまま作ることになったはずです。
道具の改造は、使い込みと交互にやる。それが結局いちばん速いというのが、この一連の作業の実感です。
oobe では、業務ツールの UI 改善や AI を組み込んだ作業環境の構築を行っています。「毎日使うものの、あと一歩」にお心当たりのある方は、お問い合わせからどうぞ。