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

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

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

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

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

[Firebase Studio SDK で開く] を使用する

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

インポート方法

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

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

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

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

Open in 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 ワークスペースが開きます。これには、プロジェクト ファイル、アプリのプレビュー、次のステップが記載された README ファイルが含まれています。

[Firebase Studio で開く] ボタンをデザインする

ボタンをデザインするには、Open in 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'
});

次のステップ

• Open in Firebase Studio SDK をインストールする
• Firebase Studio ワークスペースのカスタマイズ方法を確認する