💎

Obsidianの中にGeminiの回答を貼り付け、calloutで閉じられるようにした。その時のアイデアを犠牲にして

に公開
Obsidian
Gemini
tech

Obsidian×Gemini：試行錯誤の末に辿り着いた「トグル型回答保存」の最適解

コメント
いや、obsidianをメモしてる途中にですね、その記事を書くもとになっているGeminiの回答を貼り付けたら画面右分割して見やすいし、無駄に「Geminiの回答20260101_01」「Geminiの回答20260107_04」みたいなmdファイルを作らなくて済むし便利かな〜って思ってたんですよ。
…まさか実現するのに1時間かかるとは思いませんでした。
いや、なんやかんや使えてなかったtemplaterのホットキーは使えるようになったし、使えるHTMLのタグが増えたのはいいんですけど、そうなんですけど、でも色々なコードやアプローチを試した挙句、たどり着いた解決策が
「出力形式を指定して、Gemにぶん投げて終わる」
ですよ？！ちょっとこれは拍子抜けです。
まあ、とりあえずこれを記事にするのがエンジニアなのかな、と思って記事にさせていただきました。
初投稿です。別にzenn.devだったらAIに書かせた記事でも浮きはしないよね…？

1. エグゼクティブサマリー

本報告は、ObsidianにおいてGeminiの回答を**「視認性の高いトグル形式」かつ「Markdownの完全保持」、そして「見出し（#）を使わない」**という条件下で保存するためのシステム設計プロセスを記録したものである。

数々の技術的アプローチ（HTMLタグ、CSSスニペット、プラグイン自動化）を検討した結果、最終的に**「AI側での出力形式制御」**という最もシンプルかつ強力な解決策に到達した。

2. 試行錯誤のプロセス（変遷と課題）

フェーズ アプローチ 発生した課題
Phase 1 <details> タグ Live Previewモードで内部のMarkdownがレンダリングされない。
Phase 2 カスタムCSS Callout 空行に > が抜けると枠が崩れる。手動入力の負荷が高い。
Phase 3 Templaterによる自動化 Macのクリップボード権限エラー、OptionキーのOS競合。
Phase 4 出力形式の事前指定 解決。全課題をクリアし、依存関係を最小化。

3. 最終的なシステム構成

A. CSSスニペット（視認性の確保）

Obsidianの標準Calloutを上書きし、Gemini専用のモダンなデザインを適用する。

  • 役割: 見出し（#）を使わずに、タイトルと本文の視覚的分離を実現。
/* gemini-style.css */
.callout[data-callout="gemini"] {
    --callout-color: 0, 122, 255; 
    background-color: transparent;
    border: 1px solid rgba(var(--callout-color), 0.3);
    border-radius: 8px;
    margin: 1em 0;
}

.callout[data-callout="gemini"] .callout-title {
    background-color: rgba(var(--callout-color), 0.1);
    color: #007aff;
    font-weight: bold;
    padding: 10px;
    cursor: pointer;
}

B. AI側への出力命令（プロンプト・エンジニアリング）

Gemini（または中継するGem）に対し、以下のフォーマットを強制する。

  • 役割: Obsidianがそのまま認識できる「崩れない引用形式」の自動生成。
    システムプロンプト:
    【出力形式指定】
    回答はすべて以下のObsidian用Callout形式で出力せよ。
  1. 行頭はすべて "> " で開始すること。
  2. 1行目は "> [!gemini]- タイトル" とすること。
  3. 空行も省略せず "> " を含めること。
  4. 内部にコードブロックがある場合も、その行頭に "> " を付与すること。

4. 再現手順書（Manual）

  1. CSSの適用:
  • Settings > Appearance > CSS snippets フォルダに上記CSSを保存し、有効化する。
  1. Templaterのセットアップ（補助用）:

私はControl + 5 とした

  1. Geminiの出力制御:
  • 回答を生成する際、常に「Obsidian Callout形式（全行 > 付き）」を要求する。

5. できた結果

6. 技術的総括とストーリー

今回のプロジェクトは、エンジニアリングにおける「車輪の再発明」と「灯台下暗し」を体現するものでした。

当初は、HTMLの <details> や <summary> タグを使いこなし、複雑なCSSで挙動を制御しようと試みました。その過程でObsidianのレンダリング仕様や、macOSにおけるホットキーの競合、セキュリティ権限の壁など、多くの知識を得ることができたのは大きな収穫でした。

しかし、最終的にたどり着いたのは**「出力側（AI）に正しい形式で喋らせる」**という、拍子抜けするほどシンプルな解決策でした。

「結局、複雑なスクリプトを組むよりも、AIに『行頭に > を付けろ』と一行命じる方が、何倍も堅牢で美しい結果をもたらす。この脱力感こそが、現代のAI活用における真の『最適解』なのかもしれません。」

あー疲れた

Discussion