Firebase Studio にコードをインポートするボタンを作成する

ウェブサイトに [Firebase Studio で開く] ボタンを追加すると、ユーザーはサイトから Firebase Studio ワークスペースにコードを直接インポートして、エージェントベースのクラウドベースの開発環境で作業を続行できます。

この機能は、以下のようなユーザーを対象としています。

  • コード プレイグラウンド。ユーザーは基本的なエディタから完全な開発環境に移行できます。

  • アプリのプロトタイピング ツール。サイトでコードとビジュアル プロトタイプが生成され、ユーザーが Firebase Studio でそれを反復処理します。

Open in Firebase Studio SDK を使用する

[Firebase Studio で開く] ボタンは、[Firebase Studio で開く] SDK によって機能しています。これは、新しいワークスペースを作成してデータを入力するための適切なリンクを生成する JavaScript ライブラリです。コードのインポート方法について、いくつかのオプションが用意されています。

インポート方法

次の方法で、コードをインポートするボタンを構成できます。

  • Git リポジトリまたはテンプレートから: Git リポジトリまたは Firebase Studio テンプレートにリンクします。これは、完全なプロジェクトや事前定義されたテンプレートに最適です。これらのユースケースの詳細については、Firebase Studio で事前定義されたワークスペースへのショートカットを作成するをご覧ください。

  • プロジェクト ファイルのセットから: ウェブ アプリケーションから直接、ファイルのセットとコード スニペットからワークスペースを動的に作成します。これは、コード プレイグラウンドやアプリ プロトタイパーにとって最も強力なオプションです。ユーザーの現在の作業が、他の場所に保存されていない場合でもエクスポートされるためです。

サイトに [Firebase Studio で開く] ボタンを追加する

Firebase Studio で開く SDK: ボタン画像の生成、ディープリンクの作成、ファイル コンテンツの送信による Firebase Studio ワークスペースの作成を行うヘルパー関数など、必要なものがすべて提供されます。

ウェブサイトに [Firebase Studio で開く] ボタンを追加するには:

  1. プロジェクト ディレクトリにパッケージをインストールします。

    npm install @firebase-studio/open-sdk

  2. ライブラリをインポートするには、次のコードを追加します。

    import * as FirebaseStudio from '@firebase-studio/open-sdk';

詳細な手順、コードサンプル、完全な API リファレンスについては、公式 SDK ドキュメントをご覧ください。

ワークスペース環境を理解する

ユーザーがサイトからワークスペースを作成すると、Firebase Studio が開発環境を設定します。自動化のレベルは、プロジェクトのタイプによって異なります。

最適化された環境

React、Angular、シンプルな HTML プロジェクトの場合、呼び出し元が settings オブジェクト内で baselineEnvironment プロパティを正しく設定していれば、Firebase Studio は最適化された事前構成済みの環境を提供します。つまり、ユーザーが Firebase Studio でリンクを開くと、Firebase Studio はワークスペースを作成し、次の処理を自動的に行います。

  • 必要な依存関係をすべてインストールします。
  • 正しい開発サーバーを構成して起動します。
  • 適切なツールと拡張機能を使用して環境を設定します。

これにより、ユーザーがアプリケーションのライブ プレビューを表示してコードを直接操作できる環境が開きます。

汎用環境

他のすべてのプロジェクト タイプでは、Firebase Studio は汎用インポーターを使用します。ファイルはワークスペースにアップロードされますが、ユーザーは初期設定を手動で行う必要があります。次のような操作が必要になることがあります。

  • 言語ランタイムと依存関係をインストールします。
  • dev.nix ファイルを構成します。

これらのプロジェクトの場合、Firebase Studio はカスタマイズされていない環境を作成し、ユーザーが設定プロセスを完全に制御できるようにします。

ユーザー エクスペリエンス

どちらのタイプのワークスペースでも、ユーザーが [Firebase Studio で開く] ボタンをクリックすると、ワークスペースの名前を入力し、インポートするファイルのリストを確認するよう求められます。

Firebase Studio で開く [ワークスペースをインポート] ダイアログ

ユーザーが [インポート] をクリックすると、新しい Firebase Studio ワークスペースが開きます。プロジェクト ファイル、アプリのプレビュー、次のステップが記載された README ファイルが含まれています。

[Firebase Studio で開く] ボタンを設計する

[Firebase Studio で開く] SDK を使用してボタンをデザインするか、以下のツールを使用して Firebase Studio ボタンの HTML を生成します。

SDK を使用する場合は、ボタンのオプションの構成プロパティを含めることができます。

  • label: ボタンに表示されるテキスト ラベルを設定します。
    • 使用できる値: open、try、export、または continue。
  • color: ボタンの配色を定義します。
    • 使用できる値: dark、light、blue、または bright。
  • size: ボタンの高さをピクセル単位で指定します。
    • 使用できる値: 20 または 32。
  • imageFormat: 生成される画像のファイル形式を決定します。
    • 使用できる値: svg または png。

例:

img.src = FirebaseStudio.getButtonImageUrl({
  label: 'export',
  color: 'dark',
  size: 32,
  imageFormat: 'svg'
});

[Firebase Studio にエクスポート] ボタンの例

次のステップ