Slide 1

Slide 1 text

Obsidian をLLM 時代のナレッジ ベースに! クリッピング→Markdown →CLI 連携の実践 Press Space for next page

Slide 2

Slide 2 text

自己紹介 服部 励起 (Reiki Hattori) 🏢 個人事業主(半LLM 無職に近い) 📱 元スマートフォンアプリ開発者 🤖 2020 年からAI 全ブリして独学中 💻 開発PC :Ubuntu 22.04 LTS Desktop X: @srvhat09

Slide 3

Slide 3 text

あなたのブラウザ、こうなってませんか? 😱 ブラウザタブ地獄 ✅ タブが100 個以上開いてる ✅ どこから来たか忘れてる ✅ 閉じるのが怖い ✅ 「後で読む」が永続化 🤔 LLM 時代の悩み ✅ 情報をLLM に読ませたい ✅ でもフォーマットがバラバラ ✅ コピペは面倒すぎる ✅ 後から探せない この問題、解決しましょう!

Slide 4

Slide 4 text

なぜObsidian + Markdown なのか? 🚀 LLM 時代の最適解 3 つの理由で解説します

Slide 5

Slide 5 text

① LLM との相性抜群 🚀 LLM との相性抜群 ✅ Markdown = LLM が最も理解しやすい形式 ✅ 構造化された情報として認識される ✅ Claude Code 、Gemini CLI 等のdocs フォルダにそのまま配置可能

Slide 6

Slide 6 text

② シームレスなワークフロー 🎯 情報管理ワークフロー Web 記事 ↓ Obsidian Clipper ↓ Markdown ↓ LLM docs ↓ プロンプトで参照

Slide 7

Slide 7 text

③ 心理的効果とメリット 💪 心理的効果 情報が安全に保存されているので 勇気を持ってタブを閉じられる 📚 蓄積 🔍 検索 🤖 AI 活用

Slide 8

Slide 8 text

でも現実は… クリッピングできないサイトがある 😤 よくある問題 🚫 note.com - よく失敗する 🚫 動的サイト - JS で生成される内容 🚫 認証が必要 - ログイン後のページ 🚫 複雑なレイアウト - 広告まみれサイト 😅 従来の対処法 🤷‍♂️ 諦める 📋 手動でコピペ 🔄 何度もリトライ 😡 イライラして放置 結果:情報収集ワークフローが破綻

Slide 9

Slide 9 text

解決策:Gemini CLI + Playwright MCP 🎯 アプローチ 1 Obsidian Terminal プラグインでGemini CLI を起動 2 Playwright MCP でJavaScript 実行環境ごとページ取得 3 カスタムプロンプトでObsidian 用Markdown に変換 4 完璧なMarkdown をObsidian に保存

Slide 10

Slide 10 text

設定のポイント 🔧 Gemini CLI 設定 { "theme": "Default", "selectedAuthType": "oauth-personal", "mcpServers": { "playwright": { "command": "npx", "args": ["@playwright/mcp@latest"] } } } 📝 GEMINI.md プロンプト ✅ Playwright MCP 必須指定 ✅ web_fetch よりも精度重視 ✅ Obsidian プロパティ保護 ✅ 画像URL 取得の最適化 ✅ HTML テーブル形式維持 ⚠️ 重要:Ubuntu 環境ではTerminal プラグインのShell 設定変更が必要

Slide 11

Slide 11 text

🎬 実演:note.com の記事をクリッピング ❌ Before Web Clipper で失敗 🔧 Process Gemini CLI 救済 ✅ After 完璧なMarkdown $ gemini 対象URL: https://note.com/electrical_cat/n/n5db5f038a391 Playwright MCPツールでページを取得してください... 🎯 画像・リンク・フォーマット全て完璧に取得! プロンプト: をクリッピングしましたが、うまく取り込めていません。\n 必ず playwright mcp を利用し、ファイル内の `source:` に記載されたURL の内 容を GEMINI.md のルールに従ってMarkdown に変換し、本文を修正してください。

Slide 12

Slide 12 text

LLM docs 連携の実例 🔄 情報活用ワークフロー 📄 収集 Obsidian で蓄積 📂 配置 docs フォルダ 🤖 参照 Claude Code 等 💡 活用 文脈理解 📚 実用例 • 技術ドキュメント調査 → 実装方針の相談 • 競合分析記事収集 → 戦略立案のブレスト • API 仕様書クリッピング → コード生成時の参照

Slide 13

Slide 13 text

まとめ:完成されたナレッジワークフロー 🎯 実現できたこと ✅ ブラウザタブ問題の解決 ✅ 諦めていたサイトも確実に保存 ✅ LLM 最適化されたフォーマット ✅ CLI 連携で即座に活用 💪 期待効果 🚀 情報収集の完全自動化 🎯 LLM とのシームレス連携 ⚡ 調査・開発の大幅時短 🧠 外部脳としてのObsidian 活用

Slide 14

Slide 14 text

🎉 LLM 時代の情報管理革命 完全ワークフローの完成! もうブラウザタブに悩まされることはありません 🎯 タブ地獄 → 体系的ナレッジベース

Slide 15

Slide 15 text

ありがとうございました! 質疑応答 🙋‍♂️ 質問 💡 アイデア 🤝 情報交換

Slide 16

Slide 16 text

おまけ PDF ファイルだって Gemini は出来るよ デモ ぬこぬこさんのPDF 変換してみました プロンプト: のPDF ファイルを全ページ読み取り、pdfgen.md ルールに従ってMarkdown に変換し、 obsidian ファイルを生成してください 。

Slide 17

Slide 17 text

詳細な設定方法や GEMINI.md は後ほど共有します