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

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

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)] を選択します。
    • [How would you like to authenticate for this project?] と表示されたら、[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

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

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

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

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

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

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

トラックを実装する

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

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

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

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

  1. 次の「ブラウンフィールド」の例では、認証とストレージに Firebase を使用します。Conductor が使用できるように、Gemini CLI Firebase 拡張機能をインストールします。
    gemini extensions install https://github.com/firebase/agent-skills
  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 ワークフローに慣れてください。
    • トラックの目標:
      • 認証プロバイダ → Firebase Auth
      • 保存された構成 → ホイール オプション
      • データ ストレージ → Firestore
      • Firestore ログイン UI → モーダル オーバーレイ
    Conductor は、conductor/tracks/{track-id} 内の新しいトラックのコンテキスト ファイルを生成します。
  5. 生成されたプランを確認する: conductor/tracks/{track-id}/ 内の index.md、spec.md、plan.md を確認してください。
  6. 実装: 問題がなければ、実装を開始できます。
    /conductor:implement
  7. 確認: アプリケーションを再読み込みします。更新されたアプリケーションが表示されます。 ログイン状態での選択ツール

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

6. クリーンアップ

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

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

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

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

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

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

7. 完了

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

次のステップ