Gemini CLI Conductor を使用してアプリを計画して構築する

1. はじめに

この Codelab では、Gemini CLI Conductor 拡張機能を使用してソフトウェア アプリケーションを計画して構築する方法を学びます。まず、完全にゼロから「グリーンフィールド」アプリケーションを構築します。その後、このプロジェクトを「ブラウンフィールド」プロジェクトとして扱い、認証とストレージを追加するために反復処理を行います。

演習内容

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

学習内容

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

必要なもの

  • ウェブブラウザ（Chrome など）
  • 課金を有効にした Google Cloud プロジェクト
  • Node.js がインストールされている（バージョン 18 以降を推奨）
  • Visual Studio 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. Gemini CLI と Conductor をローカルにインストールする

このステップでは、ローカル コードエディタとターミナルを使用して Gemini CLI と Conductor 拡張機能をインストールし、ローカル開発環境を準備します。

Gemini CLI をインストールする

  1. npm を使用して Gemini CLI の最新バージョンをグローバルにインストールします。
    npm install -g @google/gemini-cli
  2. gemini が PATH に追加されるように、ターミナルを再起動します。
  3. インストールを確認して、最新バージョンがインストールされていることを確認します。
    gemini --version
  4. 新しいプロジェクト ディレクトリを作成して移動する: 後のセクションで、picker-wheel ディレクトリにプロジェクトを作成します。このディレクトリを作成し、このディレクトリに移動します。
    mkdir picker-wheel
cd picker-wheel
  5. 認証:
    • Gemini CLI を起動します。
      gemini
    • [Do you trust the files in this folder?]（このフォルダ内のファイルを信頼しますか？）というメッセージが表示されたら、[Trust folder (picker-wheel)]（フォルダを信頼する（ピッカーホイール））を選択します。
    • 「このプロジェクトの認証方法を選択してください」というメッセージが表示されたら、[Vertex AI] を選択します。認証ガイドに沿って、Google Cloud API キーを取得し、GOOGLE_API_KEY 環境変数を設定します。さまざまな使用量階層と、それに対応する API のレート上限について説明します。
  6. Gemini CLI を終了する: CLI ターミナルで /quit と入力して、Gemini CLI のライブ セッションを終了してから続行します。

Conductor 拡張機能をインストールする

Conductor は、Google が構築したオープンソースの Gemini CLI 拡張機能で、プランニングや実装の追跡などのコンテキスト駆動型の開発機能を有効にします。

  1. 拡張機能をインストールする:
    gemini extensions install https://github.com/gemini-cli-extensions/conductor
  2. インストールを確認する:
    • Gemini CLI を起動します。
      gemini
    • 「/conductor」と入力すると、setup、newTrack、implement などのコマンドのリストが表示されます。
  3. Gemini CLI を終了する: CLI ターミナルで /quit と入力して、Gemini CLI のライブ セッションを終了してから続行します。

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

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

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

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

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

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

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

トラックを実装する

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

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

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

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

  1. 次の「ブラウンフィールド」の例では、認証とストレージに Firebase を使用します。Conductor が使用できるように、Gemini CLI Firebase 拡張機能をインストールします。
    gemini extensions install https://github.com/gemini-cli-extensions/firebase
  2. Gemini CLI を起動する: プロジェクト ディレクトリから新しい Gemini CLI セッションを開始します。
    gemini
  3. 新しいトラックを開始: 新しいトラックを開始します。
    /conductor:newTrack "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]（ホイール オプション）
      • Data Storage → Firestore
      • Firestore ログイン UI → モーダル オーバーレイ
    Conductor は、conductor/tracks/{track-id} 内の新しいトラックのコンテキスト ファイルを生成します。
  5. 生成されたプランを確認する: conductor/tracks/{track-id}/ 内の index.md、spec.md、plan.md を確認します。
  6. 実装: 問題がなければ、実装を開始できます。
    /conductor:implement
  7. Verify: アプリケーションを再読み込みします。更新されたアプリケーションが表示されます。 ログイン付きのピッカーホイール

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

6. クリーンアップ

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

Firebase プロジェクト（および Google Cloud プロジェクト）を削除する

最も簡単なクリーンアップ方法は、プロジェクトを完全に削除することです。

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

または、プロジェクトは保持するがリソースを削除する場合は、次の操作を行います。

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

7. 完了

おめでとうございます！Gemini CLI Conductor 拡張機能を使用して、ウェブ アプリケーションをゼロから構築し、認証やデータベース統合などの複雑な機能を実装して反復処理を行いました。

次のステップ