Firebase Studio の新機能から AI を統合するさまざまな方法まで、I/O で発表された内容をすべてご紹介します。ブログを読む。

Firebase Studio ワークスペースをカスタマイズする

Firebase Studio では、プロジェクト固有のニーズに合わせてワークスペースをカスタマイズできます。次の内容を記述した単一の .idx/dev.nix 構成ファイルを定義することで行います。

コンパイラやその他のバイナリなど、（ターミナルからなど）実行する必要があるシステムツール。
インストールする必要がある拡張機能（プログラミング言語のサポートなど）。
アプリのプレビューの表示方法（ウェブサーバーを実行するコマンドなど）。
ワークスペースで実行されているローカルサーバーで使用できるグローバル環境変数。

使用可能なものの詳細については、dev.nix リファレンスをご覧ください。

プロジェクトに .idx/mcp.json ファイルを追加することで、Firebase MCP サーバーなどの Model Context Protocol（MCP）サーバーに接続することもできます。

Nix と Firebase Studio

Firebase Studio は Nix を使用して、各ワークスペースの環境構成を定義します。具体的には、Firebase Studio は次のものを使用します。

ワークスペース環境を記述するための Nix プログラミング言語。Nix は関数型プログラミング言語です。dev.nix ファイルで定義できる属性とパッケージライブラリは、Nix 属性セットの構文に従います。
ワークスペースで使用可能なシステムツールを管理する Nix パッケージマネージャー。これは、APT（apt と apt-get）、Homebrew（brew）、dpkg などの OS 固有のパッケージマネージャーに似ています。

Nix 環境は再現可能で宣言的であるため、Firebase Studio のコンテキストでは、Git リポジトリの一部として Nix 構成ファイルを共有して、プロジェクトで作業するすべてのユーザーが同じ環境構成を持つようにできます。

基本的な例

次の例は、プレビューを有効にする基本的な環境構成を示しています。

{ pkgs, ... }: {

  # Which nixpkgs channel to use.
  channel = "stable-23.11"; # or "unstable"

  # Use https://search.nixos.org/packages to find packages
  packages = [
    pkgs.nodejs_20
  ];

  # Sets environment variables in the workspace
  env = {
    SOME_ENV_VAR = "hello";
  };

  # Search for the extensions you want on https://open-vsx.org/ and use "publisher.id"
  idx.extensions = [
    "angular.ng-template"
  ];

  # Enable previews and customize configuration
  idx.previews = {
    enable = true;
    previews = {
      web = {
        command = [
          "npm"
          "run"
          "start"
          "--"
          "--port"
          "$PORT"
          "--host"
          "0.0.0.0"
          "--disable-host-check"
        ];
        manager = "web";
        # Optionally, specify a directory that contains your web app
        # cwd = "app/client";
      };
    };
  };
}

システムツールを追加する

クラウドサービスのコンパイラや CLI プログラムなどのシステムツールをワークスペースに追加するには、Nix パッケージレジストリで一意のパッケージ ID を見つけ、dev.nix ファイルの packages オブジェクトに追加します。接頭辞は「pkgs.」にします。

{ pkgs, ... }: {
  # Which nixpkgs channel to use.
  channel = "stable-23.11"; # or "unstable"

  # Use https://search.nixos.org/packages to find packages
  packages = [
    pkgs.nodejs_20
  ];
  ...
}

これは、APT（apt と apt-get）、Homebrew（brew）、dpkg などの OS 固有のパッケージマネージャーを使用してシステムパッケージをインストールする一般的な方法とは異なります。必要なシステムパッケージを宣言的に記述することで、Firebase Studio ワークスペースを簡単に共有して再現できます。

ローカルノードバイナリを使用する

ローカルマシンの場合と同様に、ローカルにインストールされたノードパッケージに関連するバイナリ（package.json で定義されたパッケージなど）は、npx コマンドで呼び出すことで、ターミナルパネルで実行できます。

さらに便利な点として、node_modules フォルダがあるディレクトリ（ウェブプロジェクトのルートディレクトリなど）では、npx 接頭辞なしでローカルにインストールされたバイナリを直接呼び出すことができます。

`gcloud`　コンポーネントを追加する

Google Cloud の gcloud CLI のデフォルト構成は、すべての Firebase Studio ワークスペースで使用できます。

追加のコンポーネントが必要な場合は、dev.nix ファイルに追加できます。

{ pkgs }: {
  packages = [
    ...
    (pkgs.google-cloud-sdk.withExtraComponents [
      pkgs.google-cloud-sdk.components.cloud-datastore-emulator
    ])
    ...
  ];
}

IDE 拡張機能を追加する

Firebase Studio に拡張機能をインストールするには、OpenVSX 拡張機能レジストリを使用します。次の 2 つの方法があります。

Firebase Studio の [拡張機能] パネルを使用して、拡張機能を検出してインストールします。このアプローチは、次のようなユーザー固有の拡張機能に最適です。
- カスタムカラーテーマ
- VSCodeVim などのエディタエミュレーション
dev.nix ファイルに拡張機能を追加します。これらの拡張機能は、ワークスペース構成を共有すると自動的にインストールされます。このアプローチは、次のようなプロジェクト固有の拡張機能に最適です。
- プログラミング言語の拡張機能（言語固有のデバッガを含む）
- プロジェクトで使用されるクラウドサービスの公式な拡張機能
- コードフォーマッタ

後者のアプローチでは、次のように、完全修飾拡張 ID（<publisher>.<id> 形式）を見つけて idx.extensions オブジェクトに追加することで、IDE 拡張機能を dev.nix ファイルに含めることができます。

{ pkgs, ... }: {
  ...
  # Search for the extensions you want on https://open-vsx.org/ and use the format
  # "<publisher>.<id>"
  idx.extensions = [
    "angular.ng-template"
  ];
  ...
}

共通サービスを追加する

Firebase Studio では、開発中に必要となる共通サービスのセットアップと構成も簡素化されています。たとえば、次のようなサービスがあります。

コンテナ
- Docker（services.docker.*）
メッセージ
- Pub/Sub エミュレータ（services.pubsub.*）
データベース
- MySQL（services.mysql.*）
- Postgres（services.postgres.*）
- Redis（services.redis.*）
- Spanner（services.spanner.*）

ワークスペースでこれらのサービスを有効にする方法の詳細については、dev.nix リファレンスの services.* 部分をご覧ください。

プレビューをカスタマイズする

アプリのプレビューをカスタマイズする方法の詳細については、アプリをプレビューするをご覧ください。

ワークスペースのアイコンを設定する

ワークスペースのカスタムアイコンを選択するには、dev.nix ファイルと同じレベルの .idx ディレクトリ内に icon.png という名前の PNG ファイルを配置します。Firebase Studio は、このアイコンを使用してダッシュボードでワークスペースを表します。

このファイルはソース管理（Git など）にチェックインできるため、これは、Firebase Studio を使用するときに、プロジェクトで作業するすべてのユーザーがプロジェクトの同じアイコンを確認するのに役立つ方法です。このファイルは Git ブランチによって異なる可能性があるため、このアイコンを使用して、ベータ版アプリワークスペースと本番環境アプリワークスペースを視覚的に区別することや、他の目的に使用することが可能です。

カスタマイズをテンプレートに変換する

環境構成を、誰でも新しいプロジェクトの構築に使用できる「スターター環境」に転換するには、カスタムテンプレートを作成するをご覧ください。

すべてのカスタマイズオプションを確認する

環境構成スキーマの詳細な説明については、dev.nix リファレンスをご覧ください。

ファイルをダウンロード

ファイルを zip ファイルとしてダウンロードするには:

Explorer ペインでディレクトリを右クリックし、[Zip and Download] を選択します。

プロジェクトディレクトリ内のすべてをダウンロードするには:

[ファイル] > [フォルダを開く] を選択します。
デフォルトの /home/user ディレクトリを受け入れます。
ファイルが読み込まれたら、作業ディレクトリを右クリックして [Zip Explorer] を選択します。App Prototyping agent を使用する場合、作業ディレクトリは studio になります。テンプレートまたはアップロードしたプロジェクトを使用している場合は、これがプロジェクト名になります。
環境の再ビルドを求めるメッセージが表示されたら、[キャンセル] をクリックします。
ダウンロードが完了したら、[ファイル] メニューから作業ディレクトリを再度開き、ワークスペースに戻ります。

MCP サーバーを使用する

MCP サーバーは、Gemini が使用する追加のツールとデータソースを提供します。たとえば、Firebase MCP サーバーを追加して、アプリケーションのビルドやデバッグ中に、Cloud Firestore で自然言語を使用してデータを探索できます。

前提条件

MCP サーバーで必要な場合は、Node.js と npm が動作していることを確認します。

互換性のある MCP サーバーを選択する

Firebase Studio は MCP サーバーの基本的なサポートを備えていますが、すべての MCP サーバーと互換性があるわけではありません。Firebase Studio ワークスペースに追加する MCP サーバーを選択する際は、次の点に注意してください。

サポート対象:
- 特別な形式の認証を必要としない標準入出力（stdio）またはサーバー送信イベント（SSE） / Streamable HTTP トランスポートサーバー
- MCP サーバーが提供するツール
現在はサポート対象外:
- グラフィカルユーザーインターフェースまたはデスクトップセッションが必要なサーバー
- MCP サーバーが提供するプロンプト、サンプリング、その他のリソース

MCP サーバーを追加する

エクスプローラ (Ctrl+Shift+E) で、.idx フォルダを右クリックし、[New file] を選択します。ファイルに「mcp.json」という名前を付け、Enter キーを押します。
サーバー構成を .idx/mcp.json ファイルのコンテンツに追加します。たとえば、Firebase MCP サーバーを追加するには、次のように入力します。
```
{
  "mcpServers": {
   "firebase": {
     "command": "npx",
     "args": [
       "-y",
       "firebase-tools@latest",
       "experimental:mcp"
      ]
    }
  }
}
```
この構成ファイルは、使用する MCP サーバーを Gemini に指示します。この例では、firebase という名前のサーバーを 1 つ追加しました。このサーバーは npx コマンドを使用して firebase-tools@latest をインストールして実行します。他の MCP サーバーでは異なる構成が必要ですが、同じ一般的な形式に従います。
ターミナル（Shift+Ctrl+C）で、インストールを完了するために必要なコマンドを実行します。たとえば、Firebase MCP サーバーを使用するには、次のコマンドを入力してアカウントにログインします。
```
firebase login --no-localhost
```
ターミナルの指示に従ってセッションを認証します。一部のツールでは、Firebase プロジェクトが接続されている必要があります。Firebase MCP サーバーを使用してプロジェクトを作成することも、次のコマンドを実行して Firebase プロジェクトを初期化することもできます。
```
firebase init
```
これにより、ルートディレクトリに firebase.json ファイルが作成されます。
ワークスペースを再ビルドしてセットアップを完了します。
1. コマンドパレット（Shift+Ctrl+P）を開きます。
2. 「Firebase Studio: Rebuild Environment」と入力します。

MCP ツールを使用する

使用する MCP サーバーをインストールすると、そのサーバーが提供するツールやデータを以下で使用できるようになります。

Gemini CLI
Gemini in Firebase チャット（エージェントモードやエージェント（自動実行）モードを使用している場合）
App Prototyping agent

たとえば、Firebase MCP サーバーを追加すると、現在のプロジェクトの SDK 構成の取得、Cloud Firestore や Realtime Database に保存されたデータの取得、Firebase サービスの設定の支援などを Gemini に依頼できます。

MCP サーバーのトラブルシューティング

MCP サーバーが想定どおりに動作しない場合は、Gemini ログを開いてエラーを確認します。

[出力（Shift+Ctrl+U）] で、プルダウンメニューをクリックして [Gemini] を選択します。
[MCPManager] タグで始まるメッセージを確認します。これらのログには、MCP サーバーの設定情報やエラーメッセージが含まれています。この情報を使用して、構成をトラブルシューティングします。MCP サーバーが正常に接続されると、追加されたツールのリストが表示されます。

MCP サーバーのインストールや接続に失敗した場合は、ワークスペースの再ビルドを試してください。

コマンドパレット（Shift+Ctrl+P）を開きます。
「Firebase Studio: Rebuild Environment」と入力します。
ワークスペースが再ビルドされるのを待ってから、選択した MCP サーバーをもう一度使用してみてください。

MCP サーバーは接続されているが、指定したツールが Gemini で使用されない場合:

Gemini とのチャットセッションを新たに開始します。
MCP ツールを使用しなくてもタスクを完了できる場合は、Gemini が別の方法を試すことがあります。特定のツールを使用したい場合は、プロンプトでツール名を指定してみてください。たとえば、「firebase_get_sdk_config を使用して、現在のプロジェクトの SDK 構成を取得して」のように依頼します。
Google Developer Program に参加する