はじめに

確定申告の時期だけでなく、日々の業務における経費精算は、多くのエンジニアやビジネスマンにとって負担の大きい作業です。Amazon、楽天市場、Yahoo!ショッピングといった主要ECサイトは、それぞれUIが異なり、領収書PDFをダウンロードするまでの導線が統一されていません。

この問題を解決するため、対象サイトで領収書発行リンクを自動的にハイライトし、ダウンロード後のファイル整理までを補助するChrome拡張機能 「ECサイト領収書ナビゲーター」 を開発しました。

本記事では、この開発プロセスにおいて ClaudeCode による爆速の実装と、Gemini CLI による高度な自律検証（Playwright MCP + Vision）をいかに使い分け、効率的に完遂させたかの記録を共有します。

どなたかの参考になれば幸いです。

1. 使用した技術の概要と「使い分け」の理由

今回の開発では、1つのAIにすべてを任せるのではなく、各モデルの強みを活かした「適材適所」のツールチェーンを構築しました。

ClaudeCode（実装担当）

Anthropic社によるコマンドラインAIエージェントです。高いコーディング能力を活かし、Markdownの仕様書からTypeScript/Viteによるプロジェクト構成と、SPA対応のロジックを一気に書き上げました。

Gemini CLI（検証担当：レビュアー）

GoogleのGeminiモデルをベースとしたエージェントです。今回のプロジェクトでは、Playwright MCP を介したブラウザ操作と、その画面を読み取る Vision（画像認識）能力 を活かした「レビュアー」の役割を担いました。

なぜ使い分けるのか？
Playwright MCPを用いた実機検証や画像認識は、非常に多くのコンテキスト（トークン）を消費します。コーディングを得意とするClaudeCodeですべてを完結させようとすると、使用量制限（トークンコスト）が大きな壁となります。そこで、Vision機能に定評があり、コンテキスト効率に優れた Gemini CLI に検証を任せることで、経済的かつ確実に品質を担保するフローを実現しました。

2. 開発プロセス：ドキュメント駆動と適材適所の連携

実装フェーズ（ClaudeCode）

最初に私がMarkdownで定義した MVP_SPEC.md などの仕様書を読み込ませました。ClaudeCodeは、MCPなどの重い外部ツールを使わず、純粋なコーディング能力で以下の機能を短時間で実装しました。

MutationObserver: 楽天・Yahoo等のSPAサイトへの動的対応。
3段フィルタリング: キーワード、タグ、テキスト長（30文字以内）によるノイズ除去。

検証フェーズ（Gemini CLI）

実装が終わると、Gemini CLI の出番です。Gemini CLI は Playwright MCP を通じて「目」と「手」を手に入れ、自律的に以下の動作確認を行いました。

ブラウザの自動操作: 実際にAmazonなどの注文履歴ページへアクセス。
Visionによる視認性チェック: 実画面のスクリーンショットを解析し、「オレンジ色のハイライトがユーザーにとって十分目立っているか」「ガイドバーがUIを邪魔していないか」を人間のような視点でレビュー。
フィードバックの生成: 検証結果に基づき、改善点を私（ユーザー）へ報告。修正が必要な場合は、再び ClaudeCode へ指示を出すというエコシステムを構築しました。

3. 実装における技術的な工夫（詳細）

MutationObserverによるデバウンス処理

AIが生成したコードには、DOMの変化を監視しつつも、頻繁な発火を防ぐ 400msのデバウンス処理 が組み込まれていました。これにより、スクロール時のパフォーマンスを維持したまま、動的に読み込まれる注文要素を確実に捉えることができます。

高精度なキーワードマッチング

ノイズを防ぐため、receiptKeywords.ts という定義ファイルを作成し、厳選されたキーワードのみを対象にしました。ここでも Gemini CLI の Vision 検証により、「注文履歴」という広すぎる言葉がノイズになっていることを発見し、ロジックを微調整するプロセスが発生しました。

4. 導入方法と実際の動作

導入手順

現在は開発版としてGitHub上で公開しており、以下の手順で導入可能です。

リポジトリから extension_dist.zip をダウンロードし、任意の場所に展開します。
Chromeで chrome://extensions/ を開き、右上の「デベロッパーモード」をオンにします。
「パッケージ化されていない拡張機能を読み込む」をクリックし、展開したフォルダを選択します。

図1：拡張機能の導入操作

図2：導入完了後の管理画面

実際の動作

ブラウザのアイコンをクリックすると表示されるポップアップから、Amazon等のサイトへ遷移します。

図3：クイックアクセス・ポップアップ

注文履歴ページでは、Gemini CLI が検証しガイドとハイライトが機能します。

図4：実画面でのナビゲーション動作

まとめ

今回は、ClaudeCode（実装）と Gemini CLI（検証）という、得意分野の異なる2つのAIを組み合わせることで、高品質なプロダクトを経済的に開発する手法を試しました。

特に、Vision能力に優れた Gemini CLI を検証に充てることで、「コードが仕様通りか」だけでなく「ユーザーにとって使いやすいか」までをAIが担保する ことができました。

この「適材適所」の開発スタイルは、今後ますます高度化するAI開発において、非常に重要な戦略になると確信しています。

リポジトリ:
[https://github.com/CHIPMUNK-T0T/chrome-ext-receipt-guide]

どなたかの参考になれば幸いです。
最後までお読みいただきありがとうございました。