プロジェクト IDX はベータ版です。ベータ版のプロダクトや機能では、サポートが制限されることがあります。また、ベータ版のプロダクトや機能の変更は、以前のバージョンと互換性がない可能性があります。

このページは Cloud Translation API によって翻訳されました。

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

IDX には幅広い組み込みのテンプレート。これには、すべてのファイル、パッケージ（コンパイラなど）、ユーザーが使用できる拡張機能言語やフレームワークをすぐに使い始める必要があります。

ユーザーが構成可能な独自のテンプレートを作成することもできます。例:

独自のフレームワーク、ライブラリ、サービスを構築する場合は、ユーザーは手間をかけずにテクノロジーをすぐに使い始めることができますクラウドベースの仮想マシンの機能を最大限に活用できます。
プロジェクトに適した技術スタックがある場合は、カスタムテンプレートを使用して、新しいプロジェクトを開始するプロセスを簡素化できます。
Codelab を利用するなどして他のユーザーに教える場合は、開始条件を事前に構成し、生徒向けの最初の手順の一部をカスタムテンプレートとして使用することをおすすめします。

カスタムテンプレートの準備ができたら、これをウェブサイト、Git リポジトリに配置します README ファイル、パッケージの詳細ページ（NPM など）、ユーザーがアクセスできる場所新しいテクノロジーをぜひご検討ください

前提条件

開始する前に、環境と.idx/dev.nixファイルを

テンプレートでは Nix 言語も使用されます。基本を復習したり、ご覧ください。

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

テンプレートは GitHub の公開リポジトリ（またはリポジトリ内のフォルダまたはブランチ）少なくとも 2 つのファイルを含む

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> カスタムテンプレートからの新しいワークスペースの作成
をご覧ください。

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

他のファイルをこれら 2 つのファイルとともに追加して、テンプレートをインスタンス化するための idx-template.nix。たとえば、最終的な .idx/dev.nix ファイルを含めるか、すべてのスキャフォールディングを含めるリポジトリに保存できます。

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

idx-template.json の定義方法の詳細に入る前に、 idx-template.nix の場合、次のような基本的なサンプルテンプレートがあると役に立ちます。

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

公開 GitHub リポジトリ（またはサブフォルダまたはそのリポジトリを IDX テンプレートに効率的に変換します。

`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/idx/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}
  '';
}

`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"
  ''
}

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

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

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

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

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

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

{
  "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 スクリプトを実行します。

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

プロパティ	タイプ	説明
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 オブジェクトを定義したら、次のことができます。ユーザーが指定したパラメータ値に基づいて、ブートストラップスクリプトのカスタマイズを開始します。表示されます。

前のセクションの例に沿って操作すると、1 つのパラメータに ts または js の値が可能な列挙型である ID language を持つ場合、次のようになります。

# 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 ファイルではありません！）に onCreate ワークスペースフックを含めます。これを openFiles 属性に置き換えます。

# .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 = { ... };
  };
}

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

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

テンプレートから新しいワークスペースを作成する

テンプレートをエンドツーエンドでテストする最も簡単な方法は、新しいワークスペースを作成することです。できます。次のリンクにアクセスし、サンプルをテンプレートの 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 を他のユーザーと共有すると、他のユーザーがお客様の新しいテンプレート、または [IDX で開く] ボタン。

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

また、ユーザーがテンプレートを見つけやすくするために、「 IDX"ボタンをウェブサイトまたはリポジトリの README に追加します。

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

前提条件

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

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

idx-template.json

idx-template.nix

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