【ちょっとした体験談】AIとの会話を保存したくてcursorでChrome拡張機能を頑張って作ったが、もっと簡単な方法があった話し。
はじめに
最近、GeminiやClaudeを使って仕事をすることが増えてきました。AIに相談しながら進めた作業って、後で「あのとき何て聞いたっけ?」と見返したくなることが多いんですよね。
でも、会話履歴を探すのが面倒で、重要な部分だけコピペしてメモに残したり...。「Obsidianにワンクリックで保存できたら便利なのに」と思うようになりました。
そこで、「よし、自分で作ってみよう!」と、CursorとClaudeの力を借りながらChrome拡張機能の開発に挑戦したんです。
1. 開発の経緯
やりたかったこと
- Geminiの会話をワンクリックでObsidianに保存
- Markdown形式で読みやすく整形
- 後で検索しやすいように管理
実際の開発プロセス
Cursorで開発を進めながら、つまずいたらClaudeに相談。エラーが出るたびに「こんなエラーが出るんですが...」と相談して、一つずつ解決していきました。
主な苦労ポイント:
- manifest.jsonの設定方法がわからない
- Geminiページからのテキスト抽出が難しい
- Obsidianへの保存タイミングの調整
- 改行処理で四苦八苦
- 余計なUI要素を除外する処理
数時間かけて、なんとか動くものが完成。達成感に浸りながら「これで便利になる!」と思っていたんですが...
2. 衝撃の発見
ふと、「そういえば、もう似たようなものがあるんじゃ...?」と思い立ってChromeウェブストアを検索してみたんです。
そしたら、Obsidian公式のWeb Clipperが普通にありました。
https://chromewebstore.google.com/detail/obsidian-web-clipper/cnjifjpddelmedmihgijeibhnjfabmlf?hl=ja
実は、このツール自体は以前からインストールしていたんですが、「Webページをクリップするツール」だと思い込んでいて、AIとの会話保存に使えるなんて考えもしませんでした。
試しに使ってみたら、普通にできました。しかも自分が苦労して実装した機能が全部入ってて、もっと便利でした...。
3. Obsidian Web Clipperの便利な使い方
改めて使ってみて分かったんですが、これ、めちゃくちゃ便利です。
できること
- ワンクリックでAIとの会話をObsidianに保存
- Webページも同じように保存可能
- ハイライトした部分だけ保存もできる
- テンプレートのカスタマイズも可能
おすすめの活用法
Obsidianを「第二の脳」として使う
私は今、Obsidianを自分の頭の外部記憶装置のように使っています。
- AIとの会話を片っ端から保存
- 後で「あの相談どこだっけ?」となったら、Obsidianの検索機能で一発
- 複数のスレッドを横断して分析したいときは、CursorにObsidianのフォルダごと渡せば、過去の会話を参照しながら新しい提案をもらえる
特に、「過去に似たようなこと聞いたな...」という場面で威力を発揮します。Obsidianに保存しておけば、検索してすぐに見つかりますからね。
4. 学びと気づき
この体験から得たもの
時間をかけて作った拡張機能は結局使われることなく終わりましたが、後悔はしていません。
実際に手を動かしたからこそ:
- Chrome拡張機能の仕組みが理解できた
- AIとのペアプログラミングの流れを体験できた
- 既存ツールの価値がより深く理解できた
そして何より、「作る前に調べる」という当たり前の教訓を、身をもって学びました...。
5. まとめ
もしあなたもAIとの会話を保存したいと思っているなら、Obsidian Web Clipperを使ってみてください。多分、すでにインストールしてる人も多いと思います。私みたいに「これ、AIとの会話にも使えるんだ!」という発見があるかもしれません。
Obsidianに会話を貯めていけば、自分だけのナレッジベースができあがります。検索も楽だし、Cursorと組み合わせれば過去の知見を活かした相談もできる。便利ですよ。
ちなみに、頑張って作った自作の拡張機能は、今もブラウザに残っています。使うことはないでしょうが、頑張った証として、しばらくはそのままにしておこうと思います。
今回使用したツール
- Cursor:AI支援によるコード開発環境
- Claude:開発中のエラー解決やコード相談
- Obsidian Web Clipper:AIとの会話を保存する公式Chrome拡張機能
開発で学んだポイント
- 作る前に既存ツールを調べる重要性
- AIペアプログラミングの実践的な流れ
- エラーを見せて相談→解決を繰り返すサイクル
- 「車輪の再発明」から得られる学び
Obsidian活用のコツ
- AIとの会話を「第二の脳」として蓄積
- 検索機能で過去の相談を即座に参照
- 複数スレッドをCursorと連携して横断分析
- ナレッジベースとして長期的に活用
応用できる場面
- AI相談の履歴管理
- 開発の学習プロセスの記録
- 過去の知見を活かした意思決定
- チーム内でのナレッジ共有