Conductor プラグインを使用してアプリを計画、構築する

1. はじめに

この Codelab では、Conductor プラグインを使用してソフトウェア アプリケーションを計画、構築する方法を学びます。Conductor は、Google が構築したオープンソースのプラグインで、プランニングや実装のトラッキングなどの仕様主導の開発機能を有効にします。まず、完全にゼロから「グリーンフィールド」アプリケーションを構築します。その後、このプロジェクトを「ブラウンフィールド」プロジェクトとして扱い、認証とストレージを追加するために反復処理を行います。

演習内容

  • Antigravity CLI または Claude Code に Conductor プラグインをインストールする
  • Conductor の計画機能と実装機能を使用して、ゼロから「Picker Wheel」ウェブアプリを構築する
  • Firebase を使用して認証とストレージを追加し、アプリケーションにパーソナライズを追加する

学習内容

  • Conductor プラグインを使用して「グリーンフィールド」アプリケーションを計画、実装、レビューする方法
  • Conductor プラグインを使用して「ブラウンフィールド」アプリケーションに機能を追加する方法

必要なもの

  • ウェブブラウザ（Chrome など）
  • 課金を有効にした Google Cloud プロジェクト
  • Node.js がインストールされている（バージョン 18 以降を推奨）
  • Visual Studio Code などのローカル コードエディタ
  • Antigravity CLI や Claude Code などのコーディング エージェント

2. 始める前に

Google Cloud プロジェクトの作成

  1. Google Cloud コンソールのプロジェクト セレクタ ページで、Google Cloud プロジェクトを選択または作成します。
  2. Cloud プロジェクトに対して課金が有効になっていることを確認します。プロジェクトで課金が有効になっているかどうかを確認する方法をご覧ください。

Cloud Shell の起動

Cloud Shell は、必要なツールがプリロードされた Google Cloud で動作するコマンドライン環境です。

  1. Google Cloud コンソールの上部にある [Cloud Shell をアクティブにする] をクリックします。
  2. Cloud Shell に接続したら、認証を確認します。
    gcloud auth list
  3. プロジェクトが構成されていることを確認します。
    gcloud config get project
  4. プロジェクトが想定どおりに設定されていない場合は、設定します。
    export PROJECT_ID=<YOUR_PROJECT_ID>
gcloud config set project $PROJECT_ID

API を有効にする

Google Cloud プロジェクトで Firebase Management API を有効にします。

gcloud services enable firebase.googleapis.com

プロジェクトに Firebase を追加する

Firebase CLI は Cloud Shell にプリインストールされています。Cloud Shell で、Google Cloud プロジェクトにアクセスできる Google アカウントでログインします。ローカルで作業している場合は、手順に沿って Firebase CLI をインストールします。

firebase login

次のコマンドを実行して、Firebase を Google Cloud プロジェクトに追加します。

firebase projects:addfirebase

firebase CLI を初めて実行する場合は、質問に答えます。

Cloud Shell を終了する

Cloud Shell ウィンドウを閉じてもかまいません。次のセクションでは、ローカル環境を構成します。

3. CLI コーディング エージェントをインストールして認証する

このステップでは、Google Cloud 認証情報を使用してローカル コードエディタに Antigravity CLI または Claude Code をインストールして認証し、ローカル開発環境を準備します。

Antigravity CLI をインストールして認証する

  1. Antigravity CLI の最新バージョンをインストールします。
    # MacOS and Linux
curl -fsSL https://antigravity.google/cli/install.sh | bash

# Windows Powershell
irm https://antigravity.google/cli/install.ps1 | iex

# Windows CMD
curl -fsSL https://antigravity.google/cli/install.cmd -o install.cmd && install.cmd && del install.cmd
  2. agy が PATH に追加されるように、ターミナルを再起動します。
  3. インストールを確認して、最新バージョンがインストールされていることを確認します。
    agy --version
  4. Google Cloud 認証情報を使用して認証します。
    • Antigravity CLI を起動します。
      agy
    • [ログイン方法を選択] で、[Google Cloud プロジェクトを使用する] を選択します。ウェブブラウザで安全な認証 URL を開きます。承認された認証情報でログインし、認証を完了します。ブラウザに一意の英数字の認証コードが表示されます。このコードをコピーし、ターミナルに戻ってプロンプトに貼り付けます。
  5. Antigravity CLI を終了します。続行する前に、CLI ターミナルから /exit と入力して、ライブ Antigravity CLI セッションを終了します。

Claude Code をインストールして認証する

また、Claude Code で Conductor プラグインを使用することもできます。ここでは、Google Cloud の認証情報を使用して Claude Code をインストールして認証します。

  1. Claude Code の最新バージョンをインストールします。
  2. Google Cloud 認証情報を使用して認証します。
    • Claude Code を起動します。
      claude
    • /login と入力してログイン方法を選択します。[サードパーティ プラットフォーム · Amazon Bedrock、Microsoft Foundry、Vertex AI] と [Google Vertex AI] のオプションを選択します。Google Vertex AI を設定するには、[アプリケーションのデフォルト認証情報（Google 認証）] を選択し、プロンプトに従って設定を完了します。
  3. Claude Code を再起動します。

4. Conductor プラグインをインストールする

Conductor は、Google が構築したオープンソースのプラグインで、プランニングや実装のトラッキングなどの仕様主導の開発機能を有効にします。

Antigravity CLI でインストールする

  1. プラグインをインストールする:
    • Antigravity CLI 
      agy plugins install https://github.com/gemini-cli-extensions/conductor
  2. インストールを確認する:
    • Antigravity CLI を起動します。
      agy
    • 「/conductor」と入力すると、/conductor:conductor-setup、/conductor:conductor-new-track、conductor:conductor-implement などのコマンドのリストが表示されます。
  3. CLI を終了します。続行する前に、ターミナルから /exit と入力して、ライブ CLI セッションを終了します。

Claude Code にインストールする

  1. マーケットプレイス リポジトリを登録し、Claude Code セッションに Conductor プラグインを直接インストールします。
    /plugin marketplace add gemini-cli-extensions/conductor
/plugin install conductor
/reload-plugin
  2. インストールを確認します。
    • 「/conductor」と入力すると、/conductor-setup、conductor-new-track、conductor-implement などのコマンドのリストが表示されます。
  3. CLI を終了します。続行する前に、Claude Code ターミナルから /exit と入力して、ライブ CLI セッションを終了します。

5. グリーンフィールド開発: ピッカー ホイール

環境が設定されたので、新しいアプリケーションをゼロから構築します。「Picker Wheel」という、回転してランダムなオプションを選択する軽量なウェブアプリを作成します。

プロダクト コンテキストを設定する

  1. 新しいプロジェクト ディレクトリを作成して移動します。これで、picker-wheel ディレクトリ内のプロジェクトで作業できるようになりました。このディレクトリを作成し、そのディレクトリに移動します。
    mkdir picker-wheel
cd picker-wheel
  2. Antigravity CLI を起動する。Antigravity CLI または Claude Code を使用して、プロジェクト ディレクトリから新しい CLI セッションを開始します。
    # Antigravity CLI
agy

# Claude Code
claude
    • [Do you trust the files in this folder?]（このフォルダ内のファイルを信頼しますか？）というメッセージが表示されたら、[Trust folder (picker-wheel)]（フォルダを信頼する（ピッカーホイール））を選択します。
  3. Conductor を初期化します。設定コマンドを実行して、プロジェクトをスキャフォールディングし、Conductor 環境を設定します。
    # Antigravity CLI
/conductor:conductor-setup

# Claude Code
/conductor-setup
  4. インタラクティブなプロンプトに沿って操作します。表示されるインタラクティブなプロンプトは、これらの例と完全に一致するとは限りません。シンプルな設計に焦点を当てて、Conductor ワークフローを理解します。
    • プロダクトの目標: 構成可能なルーレットを表示して、リストからランダムにアイテムを選択するウェブ アプリケーション。
      • 対象ユーザー → 一般ユーザー
      • インタラクション → タップ/クリックして回転
      • カスタマイズ → 基本
      • プラットフォーム → デスクトップ ファースト
    • プロダクト ガイドライン: 自動生成。
    • 技術スタック:
      • 言語 → TypeScript/JavaScript - フルスタック ウェブに最適
      • フロントエンド → Vue.js - 直感的なウェブ インターフェース
      • バックエンド → Express.js - 高速な Node バックエンド
      • [Database] → [None - No database needed]
    • ワークフロー: 標準。
    • プロダクトの要件:
      • ユーザー ストーリー → カスタマイズ可能なオプション、明確な勝者の表示
      • 主な機能 → 編集可能なオプション リスト、ランダムな色
      • 制約 → クライアントサイドのみ、高パフォーマンス
      • 非機能 → 高いテスト カバレッジ、TypeScript と Vue.js、レスポンシブ デザイン
    Conductor は、conductor/ ディレクトリにコンテキスト ファイルを生成します。

新しいトラックを作成する

Conductor の「トラック」は、機能または作業単位を表します。

  1. /conductor-new-rack を使用して新しいトラックを開始します。Conductor は、プロダクト コンテキストに基づいて初期トラックを提案する場合があります。独自のトラックを提案することも、コンダクターにトラックの提案を依頼することもできます。
  2. 生成されたプランを確認します。Conductor は、conductor/tracks/{track-id}/ 内に index.md、spec.md、plan.md を生成します。少し時間を取って、お読みください。問題がなければ、Conductor から初期設定ファイルの保存と commit を求めるメッセージが表示されます。

トラックを実装する

  1. 実装を開始する。
    # Antigravity CLI
/conductor:conductor-implement

# Claude Code
/conductor-implement
    Conductor は計画に沿ってプロジェクトのコードを記述します。
  2. アプリケーションを検証する。実装フェーズ全体を通して、Conductor はアプリケーションを手動でテストするよう求めるメッセージを表示します。たとえば、ローカル ウェブサーバーを開き、ブラウザでアプリケーションをプレビューして、変更内容を確認するよう求められます。実装が完了すると、機能するピッカー ホイールが表示されます。Picker Wheel アプリケーション
  3. 実装を確認する。最後の手順として、Conductor に実装の確認を依頼できます。ソースコードを確認し、プロジェクトのドキュメントを同期して、トラックをアーカイブする必要があります。
    # Antigravity CLI
/conductor:conductor-review

# Claude Code
/conductor-review

6. ブラウンフィールド イテレーション: パーソナライズを追加

ここからは「ブラウンフィールド」開発に移行します。前のセクションのピッカーホイール ウェブ アプリケーションを改善して、ログインしたユーザーがピッカーホイールの構成を保存して復元できるようにします。

パーソナライズ トラックを作成する

  1. 次の「ブラウンフィールド」の例では、認証とストレージに Firebase を使用します。Conductor が使用できるように Firebase スキルをインストールします。
  2. CLI エージェントを起動します。新しい CLI セッションを開始します。
    # Antigravity CLI
/new

# Claude Code
/new
  3. 新しいトラックを開始。新しいトラックを開始します。
    # Antigravity CLI
/conductor:conductor-new-track "I want users to be able to log in to their
accounts and save their picker wheel configurations."

# Claude Code
/conductor-new-track "I want users to be able to log in to their accounts
and save their picker wheel configurations."
  4. インタラクティブ プロンプトに沿って操作します。表示されるインタラクティブ プロンプトは、これらの例と完全に一致するとは限りません。シンプルな設計に焦点を当てて、Conductor ワークフローを理解します。
    • 目標をトラッキングする:
      • Auth Provider → Firebase Auth
      • [Saved Configs]（保存した構成）→ [Wheel Options]（ホイール オプション）
      • データ ストレージ → Firestore
      • Firestore ログイン UI → モーダル オーバーレイ
    Conductor は、conductor/tracks/{track-id} 内の新しいトラックのコンテキスト ファイルを生成します。
  5. 生成されたプランを確認します。conductor/tracks/{track-id}/ 内の index.md、spec.md、plan.md を確認します。
  6. 実装。問題がなければ、実装を開始できます。
    # Antigravity CLI
/conductor:conductor-implement

# Claude Code
/conductor-implement
  7. 確認。アプリケーションを再読み込みします。更新されたアプリケーションが表示されます。 ログイン状態での選択ツール

参照実装のゴールデン コードを次に示します。アプリケーションを適切に起動するには、.firebaserc で Firebase プロジェクトを指定し、firebase.ts で Firebase 構成を指定する必要があります。

7. クリーンアップ

Google Cloud アカウントに継続的に課金されないようにするには、この Codelab で作成したリソースを削除します。

Firebase プロジェクトと Google Cloud プロジェクトを削除する

最も簡単にクリーンアップするには、プロジェクトを完全に削除します。

  1. Google Cloud コンソールで、作成したプロジェクトを選択します。
  2. [削除] をクリックします。

または、プロジェクトは保持するがリソースは削除する場合:

  1. Firestore Database を削除する: Firebase コンソール > [Firestore] に移動して、データベースを削除します。
  2. 認証を削除する: Firebase コンソール > [認証] > [ログイン方法] に移動し、[Google] を無効にします。

8. 完了

おめでとうございます！このラボでは、選択したコーディング エージェント（Antigravity CLI または Claude Code）で Conductor プラグインを使用して、ウェブ アプリケーションをゼロから構築し、認証やデータベース統合などの複雑な機能を実装して反復処理を行いました。

次のステップ