最高評価！「AI Reply Assistant Chrome拡張開発」（ポートフォリオ）
aiai
先日、株式会社AX様のAX camp テスト開発に参加させていただきました。開発コンペといえば分かりやすいかもしれませんが、その中で、最高評価を頂きました。
開発したのは、Gmail、Discord、LINEを統合したAI返信支援Chrome拡張機能です。複数のコミュニケーションプラットフォームを統一的に管理し、AI支援による効率的な返信業務を実現するシステムとして高く評価されました。
※ ご依頼をご検討のクライアント様へは、技術レベルの確認のためのコード共有（閲覧）も可能ですので、お気軽にお問い合わせください。
AI Reply Assistantの特徴
3分の動画で解説しています。
リポジトリはこちら
https://github.com/kentaroh7777/ax-camp-test
主な機能
- マルチチャネル統合: Gmail、Discord、LINEの3つのプラットフォームを単一UIで管理
- AI powered返信生成: LLM（OpenAI、Anthropic、Google）を使用した自動返信案生成
- 同一ユーザー紐づけ: 複数チャンネルでの同一ユーザー管理により、より適切な返信を生成
- 統一返信UI: 全チャンネル共通の返信インターフェースで一貫した操作体験
- 手動支援設計: 完全自動化を避け、ユーザーの判断を重視した支援型アプローチ
- Chrome Extension Manifest V3対応: 最新のセキュリティ標準に準拠
技術的特徴
- Chrome拡張機能として動作するため、インストールするだけですぐに利用可能
- プロキシサーバーによる統一API設計で、各プラットフォームの技術的制約を解決
- Clean Architecture（4層構造）による保守性の高い設計
- TypeScript + Reactによる型安全で現代的な開発
AI Reply Assistant開発概要
目的・目標
分散したコミュニケーションチャネル（Gmail、Discord、LINE）を統合し、AI支援による効率的な返信業務を実現する。特に、複数チャンネルを横断した同一ユーザーとのコミュニケーション履歴を活用し、より適切な返信を生成することを目指す。
開発方針
Clean Architecture設計によるモジュラー構成を採用し、MVP（Minimum Viable Product）から段階的に機能拡張する方針。完全自動化ではなく「手動支援」というアプローチにより、ユーザーの最終判断を重視した設計とする。
開発実績
- 開発者: フルスタック設計とコーディング
- 期間: 3日ほどでプロトタイプ構築（開発キャンプということで、短期間でのプロトタイプ化、MVP開発を行いました）
- 技術スタック: TypeScript, React, Webpack 5, Chrome Extension Manifest V3, Clean Architecture
- プロジェクト規模: 複数ワークスペース構成、モノレポ管理
AI Reply Assistant開発の注目部分
以下、アプリ開発の技術的注目部分についてご説明します。
Clean Architecture（4層構造）の実装
ソフトウェアの保守性とテスタビリティを重視し、Clean Architectureパターンを採用しました。
4層構成
- User Interface Layer: React コンポーネント
- Application Service Layer: ビジネスロジック（返信支援、ユーザー紐づけ、LLM統合）
- Channel Service Layer: チャンネル固有処理（Gmail、Discord、LINE各API）
- Infrastructure Layer: データ永続化・外部API連携
この設計により、外部技術の変更（例：Gmail API仕様変更）が他の層に影響しない構造を実現し、長期的な保守性を確保しています。
Chrome Extension Manifest V3対応
2024年から必須となったManifest V3の複雑な制約に対応。特に以下の技術的課題を解決しました：
- Service Worker制約: Background Scriptの永続化制限への対応
- Content Security Policy: 厳格なセキュリティポリシー下でのReact実行
- Cross-Origin制約: 各プラットフォームのCORS制限回避
マルチチャネル統合アーキテクチャ
各プラットフォームの技術的制約を統一的に解決するため、プロキシサーバーによる抽象化レイヤーを実装：
Chrome Extension ←→ Proxy Server ←→ 各プラットフォームAPI
├── Gmail API (OAuth 2.0)
├── Discord (DOM操作 + Webhook)
└── LINE (Messaging API)
主要解決課題
- Gmail: OAuth 2.0認証とレート制限対応
- Discord: 利用規約準拠（完全自動化禁止）のための手動支援設計
- LINE: CORS制約とWebhook署名検証
同一ユーザー紐づけ機能
複数チャンネル間での同一ユーザー識別により、より文脈に適した返信を生成：
例: 同一ユーザーの紐づけ
├── Gmail: user@example.com
├── Discord: username123
└── LINE: [User ID]
AI返信生成時に、対象チャンネルのメッセージに加えて、同一人物の他チャンネル最新メッセージも入力データとして活用し、より適切な返信を生成します。
LLM統合とマルチプロバイダー対応
複数のLLMプロバイダーに対応し、用途に応じた最適なモデル選択が可能：
- OpenAI: GPT-4系モデル
- Anthropic: Claude系モデル
- Google: Gemini系モデル
プロキシサーバー経由での統一APIにより、プロバイダー切り替えが容易な設計としています。
セキュリティ設計
プライバシーとセキュリティを重視した設計：
- OAuth 2.0認証: Gmailアクセス
- ローカルストレージのみ: データは端末内でのみ管理
- HTTPS通信: 全ての外部通信を暗号化
- No Telemetry: 使用統計の外部送信なし
技術的課題とソリューション
Discord利用規約制約への対応
2024年7月のDiscord利用規約更新により、完全自動化が明示的に禁止されました。この制約に対し、以下のソリューションを実装：
- 手動支援アプローチ: 自動送信ではなく、ユーザーの確認・編集を必須とする設計
- DOM操作の最小化: 必要最小限の情報取得のみ実装
- 透明性確保: 全ての操作をユーザーが認識できるUI設計
CORS制約の解決
各プラットフォームのCross-Origin制約を回避するため、プロキシサーバーを実装：
- 統一API Gateway: 全チャンネルへの一元的アクセス
- 認証情報管理: セキュアなトークン管理
- レート制限対応: 各APIの制限に応じた調整機能
Content Scriptによる統一UI注入
各プラットフォームの異なるDOM構造に対し、統一されたUIを注入：
- Base Content Script: 共通処理の抽象化
- Platform Specific: 各サイト固有の処理
- UI Injector: ReactコンポーネントのDynamic Import
その他・今後の展望
現在の制約事項
本拡張機能は現在開発・テスト段階のため、以下の制約があります：
- 認証機能: クライアント-サーバー間認証は開発用途のため無効化
- 本番利用: セキュリティ強化が必要なため、現段階では推奨されません
今後の開発予定
- 認証システム強化: 本番環境向けの認証機構実装
- スケーラビリティ向上: 大規模利用に向けた性能最適化
- 追加チャンネル対応: Slack、Microsoft Teams等への拡張
- 高度な紐づけ機能: AIによる自動ユーザー識別補助
まとめ
AI Reply Assistant Chrome拡張の開発により、以下の技術的成果を実現しました：
- 複雑な統合システム: 3つの異なるプラットフォームの技術的制約を統一的に解決
- Clean Architecture実装: 保守性とテスタビリティを両立した設計
- 最新技術対応: Chrome Extension Manifest V3等の最新標準への準拠
- 実用的AI統合: LLMを活用した実際の業務効率化
AX camp テスト開発で最高評価を獲得した本プロジェクトは、複雑な技術課題を体系的に解決し、実用的なソリューションとして実現した技術力の証明となっています。
ご参考になりましたら幸いです。
