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

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

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
    • When asked to [Select login method]（ログイン方法を選択）が表示されたら、[Use a Google Cloud project]（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 と入力して、ログイン方法を選択します。[3rd-party platform · Amazon Bedrock, Microsoft Foundry, or Vertex AI]（サードパーティ プラットフォーム · Amazon Bedrock、Microsoft Foundry、Vertex AI）と [Google Vertex AI] を選択します。Google Vertex AI を設定するには、[Application Default Credentials (google auth)]（アプリケーションのデフォルト認証情報（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

環境が設定されたので、新しいアプリケーションをゼロから構築します。「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)]（フォルダを信頼する（picker-wheel））を選択します。
  3. Conductor を初期化します 。setup コマンドを実行してプロジェクトをスキャフォールディングし、Conductor 環境を設定します。
    # Antigravity CLI
/conductor:conductor-setup

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

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

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

  1. /conductor-new-rack を使用して新しいトラックを開始します 。Conductor は、プロダクト コンテキストに基づいて初期トラックを提案する場合があります。または、独自のトラックを提案するか、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 が表示されます。Picker Wheel アプリケーション
  3. 実装を確認します 。最後のステップとして、Conductor に実装の確認を依頼できます。ソースコードを確認し、プロジェクト ドキュメントを同期して、トラックをアーカイブする必要があります。
    # Antigravity CLI
/conductor:conductor-review

# Claude Code
/conductor-review

6. ブラウンフィールドの反復: パーソナライズを追加する

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

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

  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 ワークフローに慣れてください。
    • トラックの目標:
      • 認証プロバイダ → Firebase Auth
      • 保存された構成 → ホイール オプション
      • データ ストレージ → 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 データベースを削除する: Firebase コンソール > Firestore に移動して、データベースを削除します。
  2. 認証を削除する: Firebase コンソール > AuthenticationSign-in method に移動し、Google を無効にします。

8. 完了

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

次のステップ