トップ > AI-DLC > AI-DLCでChrome拡張機能を爆速開発！

AI-DLCでChrome拡張機能を爆速開発！

AI-DLC Chrome Extension
記事タイトルとURLをコピーする

AI-DLCでChrome拡張機能を爆速開発

こんにちは、サーバーワークスで生成AIの活用推進を担当している針生です。

前回のブログでは、AI-DLC（AI駆動開発ライフサイクル）のクイックスタート方法を公開しました。

今回は実際にアプリケーションを開発した過程を公開したいと思います。

「ChatGPT、Gemini、Claudeに同時に質問を投げたい」

普段の仕事では検証の意味も含めて、この3つのAIチャットツールのWebサービスに対して同じ質問をして、回答を比較する事が多いのですが、毎回それぞれのサービスにアクセスし、同じ質問をコピペするのが面倒でした。

そこで、1回の入力で3つのWebサービスに同時に質問を送信できるChrome拡張機能を作ることにしました。

このChrome拡張機能をAI-DLCワークフローを活用して開発してみました。

すると開発開始から約20分で完成！

本ブログでは、その全過程を詳細に記述します。

AI-DLCのセットアップ

インストール

AI-DLCのセットアップ手順は前回のクイックスタートガイドを参照してください。

blog.serverworks.co.jp

日本語での応答設定

今回はKiro CLIを利用して開発しましたが、デフォルトの場合、英語で応答されてしまいます。

.kiro/steering/aws-aidlc-rules/core-workflow.md

このファイルの先頭に以下を追加することで日本語での応答が可能となりました。

## MANDATORY: Language Setting
**CRITICAL**: すべての応答は日本語で行うこと。ユーザーへのメッセージ、質問、説明、承認依頼など、すべてのコミュニケーションは日本語で記述すること。

この設定により、AIからの質問、説明、承認依頼などすべてのコミュニケーションが日本語で行われます。

AI-DLCの特徴

適応型ワークフロー

AI-DLCの最大の特徴はプロジェクトの複雑さに応じてステージを自動スキップすること。

  • シンプルなプロジェクト → 最短ルートで実装
  • 複雑なプロジェクト → 詳細な設計フェーズを経由

今回のChrome拡張機能は比較的シンプルなので、多くのステージがスキップされました。

開発の全記録

Phase 1: INCEPTION（計画）

Step 1: ワークスペース検出

開発を開始すると、まずAIがワークスペースを分析します。

私の入力：

Using AI-DLC, Google Chrome の拡張機能を作成。
この拡張機能は、ChatGPT, Gemini, Claude のWebアプリケーションに対して、
一つの入力からそれぞれのページにアクセスして質問を投げることができる。

AIの分析結果：

🔍 ワークスペース検出完了

ワークスペース分析結果：
- プロジェクトタイプ: Greenfield（新規プロジェクト）
- 既存コード: なし
- 次のステップ: 要件分析に進みます...

空のディレクトリだったので「Greenfield（新規プロジェクト）」と判定されました。既存コードがある場合は「Brownfield」となり、リバースエンジニアリングのステージが追加されます。

Step 2: 要件分析

AIが質問ファイルを生成しました。

ファイルパス：aidlc-docs/inception/requirements/requirement-verification-questions.md

生成された質問（7問）：

## Question 1
拡張機能のUIはどのような形式を想定していますか？

A) ポップアップウィンドウ（ツールバーアイコンをクリックして表示）
B) サイドパネル（ブラウザの横に常時表示）
C) 新しいタブページ
D) Other

[Answer]: 

## Question 2
質問を各AIサービスに送信する方法はどのようにしますか？

A) 同時に全てのサービスに送信（並列実行）
B) 順番に一つずつ送信（順次実行）
C) ユーザーが送信先を選択できる
D) Other

[Answer]: 

## Question 3
各AIサービスへの質問送信後、結果はどのように表示しますか？

A) 拡張機能内で各サービスの回答を一覧表示
B) 各サービスのタブを自動で開き、そのページで回答を確認
C) 両方（タブを開きつつ、拡張機能内でも結果を集約）
D) Other

[Answer]: 

## Question 4
各AIサービスへのログイン状態はどのように扱いますか？

A) ユーザーが事前に各サービスにログインしていることを前提とする
B) 拡張機能内でログイン情報を管理する
C) Other

[Answer]: 

## Question 5
質問履歴の保存機能は必要ですか？

A) 必要（ローカルストレージに保存）
B) 必要（クラウド同期あり）
C) 不要
D) Other

[Answer]: 

## Question 6
対応するAIサービスは、ChatGPT、Gemini、Claude の3つで確定ですか？

A) はい、この3つのみ
B) 将来的に他のサービスも追加したい（拡張性を考慮）
C) Other

[Answer]: 

## Question 7
質問のテンプレート機能（よく使う質問形式を保存）は必要ですか？

A) 必要
B) 不要
C) Other

[Answer]:

私の回答：

  • Q1: A（ポップアップウィンドウ）
  • Q2: A（同時送信）
  • Q3: 「何もしない」← ここで追加質問が発生
  • Q4: A（事前ログイン前提）
  • Q5: C（履歴不要）
  • Q6: A（3つのみ）
  • Q7: B（テンプレート不要）

曖昧な回答への追加質問

Q3で「何もしない」と回答したところ、AIが追加の確認質問を生成しました。

## Question 3-1
「何もしない」とのことですが、質問送信後の動作について確認させてください。

各AIサービスのタブは既に開いている状態で、拡張機能から質問を送信すると、
各タブ内のAIサービスに質問が入力・送信されるという理解で正しいですか？

A) はい、既に開いているタブに質問を送信し、回答は各タブで直接確認する
B) タブが開いていない場合は自動で開き、質問を送信する。回答は各タブで確認
C) Other

[Answer]: B

AIが勝手に解釈せず、ちゃんと確認してくれるのが良いポイントです。

要件の修正

要件定義書が生成された後、私から追加の要望を出しました。

私の入力：

「タブ管理について、既に開いていても、新しいタブを開きたいです。」

AIの対応：

要件を更新しました。

FR-003: タブ管理 を以下に変更：
- 質問送信時に各AIサービスの新しいタブを常に開く
- 各タブに質問を入力し送信

このように、承認前であれば要件の修正が可能です。

生成された要件定義書

最終的に以下の要件定義書が生成されました。

# 要件定義書

## 機能要件

### FR-001: ポップアップUI
- ツールバーアイコンをクリックするとポップアップウィンドウを表示
- 質問入力用のテキストエリアを提供
- 送信ボタンで質問を実行

### FR-002: 並列質問送信
- 入力された質問を3つのAIサービスに同時送信
- 対象サービス:
  - ChatGPT (chat.openai.com)
  - Gemini (gemini.google.com)
  - Claude (claude.ai)

### FR-003: タブ管理
- 質問送信時に各AIサービスの新しいタブを常に開く
- 各タブに質問を入力し送信

### FR-004: 回答確認
- 回答は各AIサービスのタブで直接確認
- 拡張機能内での回答集約は行わない

## 非機能要件

### NFR-001: 前提条件
- ユーザーは各AIサービスに事前にログイン済みであること

### NFR-002: 対応ブラウザ
- Google Chrome

### NFR-003: スコープ制限
- 質問履歴の保存機能なし
- テンプレート機能なし
- 対応サービスは3つのみ（拡張性は考慮しない）

Step 3: ワークフロー計画

要件が確定すると、AIが実行計画を提案しました。

📋 ワークフロー計画完了

🟢 実行するステージ (2):
1. コード生成 - Chrome拡張機能の実装
2. ビルド & テスト - ビルドとテスト手順

🔵 スキップするステージ (7):
- ユーザーストーリー - シンプルな単一ユーザー向け
- アプリケーション設計 - 単一コンポーネント
- ユニット生成 - 単一ユニット
- 機能設計 - 複雑なビジネスロジックなし
- NFR要件/設計 - 特別な要件なし
- インフラ設計 - クライアントサイドのみ

シンプルなChrome拡張機能なので、9つのステージのうち7つがスキップされました。

これが「適応型ワークフロー」の効果です。

Phase 2: CONSTRUCTION（構築）

Step 4: コード生成計画

コード生成の前に、まず計画が提示されます。

# コード生成計画 - AllAI Chrome拡張機能

## 生成するファイル構造
src/
├── manifest.json          # 拡張機能マニフェスト (Manifest V3)
├── popup/
│   ├── popup.html         # ポップアップUI
│   ├── popup.css          # スタイル
│   └── popup.js           # ポップアップロジック
├── background/
│   └── service-worker.js  # タブ管理・メッセージング
└── content-scripts/
    ├── chatgpt.js         # ChatGPT用コンテンツスクリプト
    ├── gemini.js          # Gemini用コンテンツスクリプト
    └── claude.js          # Claude用コンテンツスクリプト

## 生成ステップ
1. マニフェストファイル生成
2. ポップアップUI生成
3. Background Service Worker生成
4. Content Scripts生成
5. 完了確認

計画を承認すると、コード生成が始まります。約1分で全ファイルが生成されました。

Step 5: ビルド＆テスト手順

ビルド手順とテスト手順のドキュメントが生成されました。

インストール手順：

1. `chrome://extensions/` を開く
2. 「デベロッパーモード」をON
3. 「パッケージ化されていない拡張機能を読み込む」→ `src/` フォルダを選択

テストケース：

- TC-001: ポップアップ表示
- TC-002: 質問送信（3タブが開き、各サービスに質問が送信される）
- TC-003: 空入力の処理
- TC-004: 長文質問

Phase 3: デバッグ

ここからが実際の開発で最も重要な部分です。最初のコードは動きませんでした。

問題1: タブは開くが、質問が入力されない

私の入力：「タブは開くけど、テキスト入力欄に質問が入力されていないです。」

AIがContent Scriptsを修正：

  • 初期待機時間を追加（ページ読み込み完了を待つ）
  • リトライ回数を増加
  • セレクタを更新

問題2: 権限エラー

エラーメッセージ：

Uncaught (in promise) Error: Cannot access contents of url 
"https://gemini.google.com/app". 
Extension manifest must request permission to access this host.

原因： host_permissionsが不足

修正： manifest.jsonにhost_permissionsを追加

問題3: Claudeだけ動かない

ChatGPTとGeminiは動くようになったが、Claudeだけ動かない。

私の入力：「Claudeだけ実行されなかったです。」

AIがデバッグログを追加して原因を調査。

ログの結果：

AllAI: Found textarea <div data-testid="chat-input" ...>
AllAI: Text inserted
AllAI: Send button <button aria-label="サイドバーを閉じる" ...>  ← 間違ったボタン！

テキストは入力されていたが、送信ボタンのセレクタが間違っていて「サイドバーを閉じる」ボタンを選択していました。

修正： data-testid属性を使用してセレクタを修正

これで全サービスで動作するようになりました。

生成されたドキュメント

AI-DLCは開発中に以下のドキュメントを自動生成しました。

aidlc-docs/
├── aidlc-state.md                    # 進捗状態
├── audit.md                          # 監査ログ（全やり取りの記録）
├── inception/
│   ├── requirements/
│   │   ├── requirements.md           # 要件定義書
│   │   ├── requirement-verification-questions.md
│   │   └── requirement-clarification-questions.md
│   └── plans/
│       └── execution-plan.md         # 実行計画
└── construction/
    ├── plans/
    │   └── allai-extension-code-generation-plan.md
    └── build-and-test/
        ├── build-instructions.md     # ビルド手順
        ├── unit-test-instructions.md # テスト手順
        └── build-and-test-summary.md

特にaudit.mdには全てのやり取りがタイムスタンプ付きで記録されており、後から開発過程を振り返ることができます。

AI-DLCを使ってみた感想

良かった点

  1. 構造化された進行

    • 何をすべきか迷わない
    • 各ステージで承認ゲートがあり、意図しない方向に進まない

  2. 適応型ワークフロー

    • シンプルなプロジェクトでは不要なステージを自動スキップ
    • 今回は9ステージ中7ステージがスキップされた

  3. ドキュメント自動生成

    • 要件定義書、実行計画、監査ログが自動で残る
    • 後から開発過程を振り返れる

  4. 曖昧さの排除

    • 曖昧な回答には追加質問が来る
    • AIが勝手に解釈しない

  5. デバッグ支援

    • エラーメッセージを伝えると即座に修正案を提示
    • デバッグログの追加も自動

まとめ

AI-DLCは「AIに丸投げ」ではなく「AIと協働」するためのフレームワークです。

  • 人間が意思決定：要件の確定、計画の承認、修正の指示
  • AIが実装：コード生成、ドキュメント作成、デバッグ支援

このバランスが良いと感じました。シンプルなプロジェクトなら30分程度で動くものができるはずです。

今回作成したChrome拡張機能は、ChatGPT、Gemini、Claudeに同時に質問を送信できる便利なツールになりました。

まとめイラスト

完成したChrome拡張機能

見た目はシンプルなアプリケーションとなりましたが、Vibe Coding（バイブコーディング）で開発するよりも、AI-DLCワークフローを利用して開発したほうが手戻りも少なく、結果的には短時間で素早く開発できたと思います。

また、Chrome拡張機能の開発は、面倒なサーバーの構築やデータベースの準備などが不要な場合が多く、比較的簡単に開発して試すことが可能なので、すぐに形にできる手軽さがあります。ぜひ皆さんもAI-DLCワークフローを活用して、自分だけの便利なChrome拡張機能を作ってみてください。

針生 泰有(執筆記事の一覧)

サーバーワークスで生成AIの活用推進を担当