カスタムテンプレートを作成する

Firebase Studio には、言語やフレームワークをすぐに使い始めるために必要なすべてのファイル、システムパッケージ（コンパイラなど）、拡張機能を含む、さまざまな組み込みテンプレートが用意されています。

GitHub でホストされているコミュニティテンプレートを使用して、Firebase Studio ワークスペースを起動することもできます。テンプレートから新しいワークスペースを起動することの詳細については、Firebase Studio ワークスペースを作成するをご覧ください。

ほとんどのユーザーは、組み込みのテンプレートを使用するか、Git からプロジェクトをインポートしますが、さらに高度なユースケースの場合は、独自のテンプレートを作成できます。

独自のフレームワーク、ライブラリ、サービスを構築している場合は、クラウドベースの仮想マシンの機能を最大限に活用して、ユーザーが、ブラウザを離れることなくテクノロジーをすぐに利用できるようになります。
プロジェクトに推奨される技術スタックがある場合は、カスタムテンプレートを使用して新しいプロジェクトを開始する独自のプロセスを簡素化できます。
チュートリアルや Codelab などで他のユーザーに教える場合は、Codelab の開始点をカスタムテンプレートとして事前に構成することで、学習者の最初の手順の一部を省略できます。

カスタムテンプレートを作成してテストしたら、そのテンプレートのリンクを作成して、ウェブサイト、Git リポジトリの README ファイル、パッケージの詳細ページ（NPM など）、ユーザーがテクノロジーの使用を開始すると想定される他の場所に配置できます。

前提条件

ご利用の前に:

idx/dev.nix ファイルを使用して環境をカスタマイズする方法を学習します。
Nix 言語の基本を理解し、リファレンスを手元に置いておきます。

テンプレートのファイル構造

Firebase Studio テンプレートは、公開 Git リポジトリ（またはリポジトリ内のフォルダまたはブランチ）であり、少なくとも次の 2 つのファイルを含んでいます。

idx-template.json には、テンプレートのメタデータ（ユーザーに表示される名前、説明、テンプレートの構成に使用できるパラメータなど）が含まれます。たとえば、ユーザーに複数のプログラミング言語やユースケースの例からの選択を許可できます。Firebase Studio は、この情報を使用して、ユーザーがテンプレートから新しいワークスペースを作成するときに表示される UI を準備します。
idx-template.nix は、Nix 言語で記述されたファイルです。このファイルには次の処理を行う（Nix 関数内にラップされた） Bash シェルスクリプトが含まれています。
1. 新しいワークスペースの作業ディレクトリの作成。
2. .idx/dev.nix ファイルを作成して環境を設定します。このスクリプトで flutter create や npm init などのプロジェクトスキャフォールディングツールを実行したり、Go、Python、Node.js などの言語で記述されたカスタムスクリプトを実行することもできます。
  
  このファイルは、Firebase Studio がテンプレートを読み込むときに、ユーザーが指定したパラメータで実行されます。

テンプレートをインスタンス化する目的で、idx-template.nix で使用するためにこれらの 2 つのファイルとともに他のファイルを含めることができます。たとえば、最終的な .idx/dev.nix ファイルを含めることや、すべてのスキャフォールディングファイルをリポジトリに直接含めることが可能です。

スターターテンプレートを作成する

テンプレートの作成を速やかに行うには、まず次のいずれかの方法で Firebase Studio テンプレートを作成し、さらにカスタマイズすることをおすすめします。

公開 GitHub リポジトリをテンプレートに変換する
テンプレートのベースとして正式なテンプレートまたはコミュニティテンプレートを使用する

基本的な例: 公開 GitHub リポジトリをテンプレートに変換する

idx-template.json と idx-template.nix の定義方法の詳細に入る前に、次の基本テンプレートの例を見ておくと役立ちます。

ユーザー構成可能なパラメータが含まれていないテンプレート。
テンプレートリポジトリ内のすべてのファイル（2 つの idx-template ファイルを除く）をユーザーのワークスペースにコピーするテンプレート。環境を定義する dev.nix ファイルを含む .idx サブフォルダがすでに存在しているはずです。

次のファイルを公開 GitHub リポジトリ（またはサブフォルダまたはブランチ）に追加すると、そのリポジトリは実質的に Firebase Studio テンプレートになります。

`idx-template.json`

{
  "name": "Hello world",
  "description": "A template for a CLI program that prints 'hello world'",
  "icon": "https://www.gstatic.com/images/branding/productlogos/studio/v1/192px.svg",
  "params": []
}

`idx-template.nix`

# No user-configurable parameters
{ pkgs, ... }: {
  # Shell script that produces the final environment
  bootstrap = ''
    # Copy the folder containing the `idx-template` files to the final
    # project folder for the new workspace. ${./.} inserts the directory
    # of the checked-out Git folder containing this template.
    cp -rf ${./.} "$out"

    # Set some permissions
    chmod -R +w "$out"

    # Remove the template files themselves and any connection to the template's
    # Git repository
    rm -rf "$out/.git" "$out/idx-template".{nix,json}
  '';
}

テンプレートをカスタマイズするに進み、テンプレートをカスタマイズするために追加できる変更について学びます。

正式なテンプレートまたはコミュニティテンプレートを使用してカスタムテンプレートを作成する

Firebase Studio チームは、Firebase Studio テンプレートの 2 つのリポジトリを管理します。

正式なテンプレート: 新しいアプリを作成するときに、Firebase Studio ダッシュボードから直接選択するテンプレートです。
コミュニティテンプレート: このテンプレートでは、オープンソースコミュニティからの貢献が可能です。コミュニティテンプレートを使用するには、コミュニティテンプレート Git リポジトリのクローンを作成します。使用するテンプレートへの完全なリンクを使用できます。

ヒント: 新しいテンプレートの追加や既存のテンプレートの更新を通じてコミュニティに貢献するには、プルリクエストを送信します。

既存のテンプレートをベースとしてカスタムテンプレートを作成するには:

カスタムテンプレートのベースとして使用するテンプレートを選択し、プロジェクトのクローンを作成します。
必要に応じて、テンプレートをカスタマイズするから、idx-template.json、idx-template.nix、.idx/dev.nix をカスタマイズします。
リポジトリに対する変更を確認します。
テンプレートの新しいワークスペースを作成するに従って、テンプレートを公開してテストします。ネストされたリポジトリを使用する場合は、URL で直接リンクします。たとえば、コミュニティの「Vanilla Vite」テンプレートを使用している場合は、次の URL を使用して新しいワークスペースをプロビジョニングし、テストします。
```
https://studio.firebase.google.com/new?template=https://github.com/firebase-studio/community-templates/tree/main/vite-vanilla
```

テンプレートをカスタマイズするに進み、テンプレートをカスタマイズするために追加できる変更について学びます。

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

基盤となる基本テンプレートが作成されたので、要件に合わせて idx-template.json、idx-template.nix、.idx/dev.nix ファイルを編集できます。次のように構成をカスタマイズすることもできます。

bootstrap スクリプトにシステムパッケージを追加する。
ユーザー構成可能なパラメータを追加する
デフォルトで開くファイルを選択する
デフォルトのワークスペースアイコンを選択する

`bootstrap` スクリプトで追加のシステムパッケージを使用する

基本的な例では、基本的な POSIX コマンドのみを使用して、ファイルを適切な場所にコピーします。テンプレートの bootstrap スクリプトでは、git、node、python3 などの追加バイナリのインストールが必要になる場合があります。

idx-template.nix ファイルで packages を指定すると、dev.nix ファイルの packages に追加して追加のシステムパッケージでワークスペースをカスタマイズする場合と同様に、ブートストラップスクリプトで追加のシステムパッケージを使用できるようになります。

pkgs.nodejs を追加する例を次に示します。これには node、npx、npm などのバイナリが含まれます。

# idx-template.nix
{pkgs}: {
  packages = [
    # Enable "node", "npm" and "npx" in the bootstrap script below.
    # Note, this is NOT the list of packages available to the workspace once
    # it's created. Those go in .idx/dev.nix
    pkgs.nodejs
  ];

  bootstrap = ''
    mkdir "$out"
    # We can now use "npm"
    npm init --yes my-boot-strap@latest "$out"
  ''
}

ユーザー構成可能なパラメータを追加する

ユーザーが新しいプロジェクトの開始点をカスタマイズできるようにするには、複数のテンプレートを作成するか、パラメータを含む単一のテンプレートを作成します。これは、異なる開始点が CLI ツールに渡される異なる値である場合（--language=js と --language=ts など）に最適なオプションです

パラメータを追加する手順は次のとおりです。

idx-template.json メタデータファイルの params オブジェクトでパラメータを記述します。Firebase Studio は、このファイルの情報を使用して、テンプレートのユーザーに表示される UI（チェックボックス、プルダウン、テキストフィールドなど）を準備します。
テンプレートをインスタンス化するときにユーザーが選択した値を使用するように idx-template.nix ブートストラップを更新します。

`idx-template.json` でパラメータを記述する

enum パラメータを追加する例を次に示します。Firebase Studio では、オプションの数に応じて、プルダウンメニューまたはラジオボタングループとしてこのパラメータが表示されます。

{
  "name": "Hello world",
  "description": "A hello world app",
  "params": [
    {
      "id": "language",
      "name": "Programming Language",
      "type": "enum",
      "default": "ts",
      "options": {
        "js": "JavaScript",
        "ts": "TypeScript"
      },
      "required": true
    }
  ]
}

値が 2 つ（JavaScript と TypeScript）あるため、UI は、オプションが 2 つ場合、ラジオボタングループをレンダリングして、ts または js の値を idx-template.nix スクリプトに渡します。

各パラメータオブジェクトには次のプロパティがあります。

プロパティ	TYPE	説明
id	`string`	パラメータの一意の ID、変数名に似ています。
name	`string`	このパラメータの表示名。
type	`string`	このパラメータに使用する UI コンポーネントと、ブートストラップスクリプトに渡すデータ型を指定します。指定できる値は次のとおりです。 `"enum"` - プルダウンまたはラジオボタングループを表示し、`string` をブートストラップに渡します。 `"boolean"` - チェックボックスを表示し、`true` または `false` を渡します。 `"text"` - テキストフィールドを表示し、`string` を渡します。
オプション	`object`	`enum` パラメータの場合は、ユーザーに表示するオプションを表します。たとえば、オプションが `{"js": "JavaScript", ...}` の場合、オプションとして「JavaScript」が表示され、選択するとこのパラメータの値は `js` になります。
デフォルト	`string` または `boolean`	UI の初期値を設定します。`enum` パラメータの場合、これは `options` のキーのいずれかにする必要があります。`boolean` パラメータの場合、これは `true` または `false` のいずれかにする必要があります。
必須	`boolean`	このパラメータが必須であることを示します。

`idx-template.nix` でパラメータ値を使用する

idx-template.json ファイルで params オブジェクトを定義したら、ユーザーが選択したパラメータ値に基づいてブートストラップスクリプトのカスタマイズを開始できます。

前のセクションの例に従って、ID が language の単一のパラメータがあり、それが ts または js の値を持つことができる列挙型である場合は、次のように使用できます。

# idx-template.nix
# Accept additional arguments to this template corresponding to template
# parameter IDs, including default values (language=ts by default in this example).
{ pkgs, language ? "ts", ... }: {
  packages = [
    pkgs.nodejs
  ];

  bootstrap = ''
    # We use Nix string interpolation to pass the user's chosen programming
    # language to our script.
    npm init --yes my-boot-strap@latest "$out" -- --lang=${language}
  ''
}

もう 1 つの一般的なパターンは、文字列の値に応じてコンテンツを条件付きで含めることです。前の例は次のように記述することもできます。

npm init --yes my-boot-strap@latest "$out" -- \
    ${if language == "ts" then "--lang=ts" else "--lang=js" }

デフォルトで開くファイルを選択する

テンプレートを使用して新しいワークスペースを作成するときに、編集のためにどのファイルが開かれるかをカスタマイズすることをおすすめします。たとえば、テンプレートが基本的なウェブサイト用の場合は、メインの HTML、JavaScript、CSS のファイルを開いてください。

デフォルトで開くファイルをカスタマイズするには、.idx/dev.nix ファイル（idx-template.nix ファイル以外）を更新して、openFiles 属性を持つ onCreate ワークスペースフックを追加します。次に例を示します。

# .idx/dev.nix
{pkgs}: {
  ...
  idx = {
    # Workspace lifecycle hooks
    workspace = {
      # Runs when a workspace is first created with this `dev.nix` file
      onCreate = {
        # Open editors for the following files by default, if they exist.
        # The last file in the list will be focused.
        default.openFiles = [
          "src/index.css"
          "src/index.js"
          "src/index.html"
        ];
        # Include other scripts here, as needed, for example:
        # installDependencies = "npm install";
      };
      # To run something each time the workspace is (re)started, use the `onStart` hook
    };
    # Enable previews and customize configuration
    previews = { ... };
  };
}

デフォルトのワークスペースアイコンを選択する

テンプレートで作成されたワークスペースのデフォルトアイコンを選択するには、.idx ディレクトリ内の dev.nix ファイルの隣に icon.png という名前の PNG ファイルを配置します。

新しいワークスペースでテンプレートをテストする

テンプレートをエンドツーエンドでテストする最も簡単な方法は、それを使用して新しいワークスペースを作成することです。次のリンクにアクセスし、例をテンプレートの GitHub リポジトリ URL に置き換えます。

https://idx.google.com/new?template=https://github.com/my-org/my-repo

必要に応じて、ブランチとサブフォルダを含めることができます。次のものはすべて有効です（一般公開されている限りにおいて）。

https://github.com/my-org/my-repo/
https://github.com/my-org/my-repo/tree/main/path/to/myidxtemplate
https://github.com/my-org/my-repo/tree/branch
https://github.com/my-org/my-repo/tree/branch/path/to/myidxtemplate

この URL を他のユーザーと共有して、他のユーザーが新しいテンプレートを使用できるようにするほかに、[Firebase Studio で開く] ボタンでこの URL にリンクすることもできます。

テンプレートが想定どおりに動作することを確認したら、GitHub リポジトリに公開し、テスト用のワークスペースを作成するときに使用した同じリンクを共有します。

ユーザーがテンプレートをより簡単に見つけられるようにするには、ウェブサイトまたはリポジトリの README に [Firebase Studio で開く] ボタンを追加します。

カスタム テンプレートを作成する コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

前提条件

テンプレートのファイル構造

スターター テンプレートを作成する

基本的な例: 公開 GitHub リポジトリをテンプレートに変換する

idx-template.json

idx-template.nix

正式なテンプレートまたはコミュニティ テンプレートを使用してカスタム テンプレートを作成する