【連載第1回】「AIに丸投げ」でここまでできる。Geminiの会話ログを自動保存するChrome拡張機能を作ってみた話

こんにちは、e-Shikumi-Laboのシンです。

Geminiとの会話、みなさんどうやって管理していますか？ AIから有益な回答を引き出せたとき、「これ、どこかに残しておきたいな」と思うことはないでしょうか。

すべてのはじまりは、「Geminiでの有益な会話を、風化させずにスプレッドシートに自動で保存したい」という日々の実務における素朴な欲求でした。そこで、生成AI（Gemini）の力を借りて、自分専用のChrome拡張機能を作ってみました。

全4回にわたり、AIを活用してツールを作り、自分で維持管理していく「仕組み化思考」について書いていきます。

第1回は、「AIにどう指示を出し、どう情報を渡してプロトタイプを完成させたか」という開発の対話プロセスをお伝えします。

1. 「想像させるな、必要な情報を聞け」というプロンプト

開発の第一歩として、私はGemini自身に対してこのようなプロンプトを投げ込みました。

「Chrome拡張機能でGeminiの回答をスプレッドシートに保存したい。想像を交えず作る方法を教えて。必要な情報があれば、それを提示して。」

ポイントは「想像を交えず」と「必要な情報があれば提示して」という2つの制約です。

Webデータ取得系のツールをAIで作ろうとすると、AIはWebページの内部構造（HTMLのタグ名やクラス名など）を勝手に「想像」してコードを書きがちです。そして完成したとされるコードを試しても、実際の画面構造とズレているため動かない、という事態に陥ります。

この罠を回避するために、「勝手に想像せず、足りない情報があるなら人間側に要求してほしい」と明確に伝えました。

2. DevTools（検証ツール）を使ったAIとのキャッチボール

このプロンプトを投げると、AIからは次のような返答が返ってきました。

AI：

「了解しました。推測を排除して確実に動くコードを作るために、現在のGeminiの画面から以下の2つのHTML要素（コード）を取得して貼り付けてください。

1. ユーザー（あなた）の質問文を囲んでいる要素

2. Geminiの回答文を囲んでいる要素」

AIが「動くコードを書くために必要な材料」を具体的に指定してきたのです。

ここからは人間の作業です。私はChromeブラウザでGeminiを開き、キーボードの F12 キー（または右クリック ＞「検証」）を押してDeveloperツール（DevTools）を起動しました。

HTMLコードの中から、自分の質問エリアとGeminiの回答エリアを選択してコードをコピーし、AIのチャット欄に貼り付けました。

Plaintext

【人間】
質問エリアのHTMLはこれです： <div class="query-text">...</div>
回答エリアのHTMLはこれです： <div class="markdown-main-panel">...</div>

3. プロトタイプの完成と、昔の自分を重ねての実感

情報を受け取ったAIは、その要素を狙い撃ちするデータ取得ロジック（JavaScript）と、スプレッドシートへ送信するプログラムを書き上げました。

指示通りにファイルを準備し、Chromeに拡張機能を読み込ませてGeminiで会話してみると、画面で発言したデータが裏でスプレッドシートへ自動で書き込まれました。

この動作を確認できたとき、私には感慨深いものがありました。

実は過去に、国内のフリマサイトからデータを取得するツールを作ろうと、複雑な画面のHTML要素を1つずつ確認しながら泥臭く試行錯誤していた時期があります。

Webデータ取得の難しさを知っている身としては、提示したHTML要素をAIが解析し、的確なコードを組み上げて動かした手際の良さには、時代の進化を感じました。以前の苦労を考えると、開発スピードの違いは歴然です。

ここで1つの大事な「気づき」が得られます。

今の時代、Chrome拡張機能のJavaScriptの文法を人間が暗記している必要はありません。コードの記述自体はAIに任せても問題ありません。

それでもツールが作れたのは、「入力（画面から取る）」「処理（重複を弾く）」「出力（GASへ送る）」というシステム全体の構造を理解し、AIに正しい現場の情報（HTML要素）を渡す術を知っていたからです。

ツール作りの主導権は、文法を知っていることではなく、「全体の仕組みを把握し、AIをどうコントロールするか」にあるのだと実感しました。

4. 完成版ツール「Chat Saver for Gemini」について

このプロトタイプをベースに、エラーハンドリングや重複防止の処理を重ねて完成させたのが、「Chat Saver for Gemini」です。

全体の構造はシンプルで、「スプレッドシート側に受信窓口（GAS）を作り、そこにChrome拡張機能からデータを送り込む」という連携を行っています。

「自分で一から作るより、手っ取り早く実務で使いたい」「最新の Manifest V3 対応コードと設定手順書が一式欲しい」という方向けに、実際に使っている完成版パッケージをGumroadに置いておきます。

🔗 Chat Saver for Gemini（完成版コード一式をGumroadで見る）

⚠️ 前提として知っておいてほしいこと

相手がGoogle（Gemini）である以上、画面仕様変更によって動作しなくなる可能性があります。永久的な動作保証を伴う製品ではなく、あくまで「仕組みを体感し、実務を便利にするツール」としてお使いください。

5. 実務での制約事項（不具合ではありません）

導入後に誤解が生じないよう、技術的な制約（前提条件）も明記しておきます。

• ⚠️ スマホアプリからの会話は保存できません

  PC版Chrome拡張機能の仕組みを利用しているため、スマートフォンからは動作しません。

• ⚠️ 過去ログの一括同期機能はありません

  ただし、過去のスレッドであっても、PCブラウザで一度開きさえすれば、直近の会話を自動検知して保存します。

次回予告

スプレッドシートへの自動保存には成功しました。しかし、実際に業務で使い込んでみると、新たな課題にぶつかりました。

「スプレッドシートの1つのセルの中に、長文やソースコードが入ると、読みにくく再利用しづらい」

次回は、スプレッドシート保存だけでなく「Markdown（.md）ファイル」も同時にGoogleドライブへ自動生成し、ローカルのメモアプリ（Obsidianなど）で快適にナレッジ化する仕組みについてお届けします。