Project IDX の利用を開始するために必要な基本事項について説明します。
始める前に
利用を開始する前に、ブラウザでサードパーティ Cookie を有効にする必要があります。プロジェクト IDX では、ほとんどのブラウザでワークスペースの認証にサードパーティ Cookie が必要です。
Chrome
- [設定] を開きます。
- [プライバシーとセキュリティ] タブを開きます。
- [Cookie をすべて受け入れる] が有効になっていることを確認します。
- idx.google.com を開きます。
- アドレスバーの公開設定アイコン visibility_off をクリックして、[トラッキング保護] パネルを開きます。[サードパーティ Cookie] の設定をオンにして、サードパーティ Cookie を一時的に許可します。これにより、IDX で Cookie が 90 日間有効になります。
Safari
- Safari > [設定...] を開きます。
- 以下の設定をオフにします。
- [詳細設定] > [すべての Cookie をブロックする]
- [プライバシー] > [クロスサイト トラッキングの防止]
- idx.google.com を開きます。
Firefox
Firefox ではサードパーティ Cookie を有効にする必要はありません。idx.google.com にアクセスします。
オペラ
- idx.google.com を開きます。
- メニューを開いて [設定] をクリックします。
- [プライバシーとセキュリティ] に移動し、[サードパーティ Cookie] オプションを開きます。
- [シークレット モードでサードパーティの Cookie をブロックする] または [サードパーティの Cookie を許可する] を選択します。
- idx.google.com を開きます。
Arc
- arc://settings にアクセスします。
- [プライバシーとセキュリティ] に移動して、[サードパーティ Cookie] オプションを開きます。
- [シークレット モードでサードパーティの Cookie をブロックする] または [サードパーティの Cookie を許可する] を選択します。
- idx.google.com を開きます。
勇敢
Brave のサードパーティ Cookie を有効にする必要はありません。idx.google.com にアクセスします。
ワークスペースの作成
IDX のワークスペースは、アプリケーションの開発に必要なものがすべて入った開発環境です。コード、コードエディタ（プロジェクトに関連するプラグインを含む）、アプリ開発をサポートするツールチェーンが含まれています。これは、ローカルのデスクトップ開発環境で新しいプロジェクトを作成する場合と似ていますが、コンピュータ全体と OS が事前に構成されており、アプリケーションの構築専用です。
プロジェクト IDX ワークスペースは、一度に 1 つのコードベースを含めるように最適化されているため、異なるアプリケーションの環境とシステムレベルの依存関係を互いに分離できます。
新しいアプリを作成する場合は、IDX のマネージド ワークスペース テンプレートを使用して、すぐにアプリを構築できます。既存のアプリケーション コードベースを IDX にインポートすることもできます。
新しいワークスペースを作成する手順は次のとおりです。
プロジェクト IDX を開きます。
IDX を初めて開くと、Google プロダクト、生成 AI、Android SDK の利用規約を読んで同意するよう求められます。また、サービスの最新情報やお知らせに関する通知、サービス改善のためのユーザー調査を受け取るように設定することもできます。適切なオプションを選択します。表示されたリンクをクリックして利用規約を読み、同意するオプションを選択して [続行] をクリックします。次に、IDX を初めて使用するときに [AI 機能を有効にする] を選択するか、[後で] をクリックして無効にします（後でいつでも有効にすることができます）。有効にする場合は、AI とプライバシーに関する注意事項を読み、[続行] をクリックして設定を維持するか、[戻る] をクリックして AI 機能を無効にします。
作成するワークスペースの種類を選択します。
- テンプレート: 必要な基本的なファイルとパッケージがあらかじめ読み込まれたワークスペースを作成します。注目のテンプレートから 1 つを選択するか、[すべてのテンプレートを表示] をクリックして、利用可能なフレームワーク、API、言語の完全なリストを表示します。テンプレート ライブラリに [空のワークスペース] テンプレートもあります。
- GitHub リポジトリ: [Import a repo] を選択して、ワークスペースに GitHub リポジトリのクローンを作成します。
テンプレート
アプリケーションの種類別にテンプレートを参照できます。または、右上の検索ボックスを使用して、キーワードでテンプレート ライブラリ全体をフィルタできます。「空のワークスペース」テンプレートは、[その他] カテゴリにあります。
ワークスペースの名前を入力し、追加のオプションを設定します。
[作成] をクリックします。選択した内容に基づいて新しいワークスペースが作成されます。
新しいテンプレートは常に追加されていますので、定期的に確認するか、ご希望のテンプレートをお知らせください。
GitHub のインポート
Repo の URL を入力します。
[作成] をクリックします。選択した内容に基づいて新しいワークスペースが作成されます。
ワークスペースが読み込まれたら、GitHub に対する認証を行います。
プロジェクトをインポートした後、IDX ターミナルで
npm install（またはflutter pub get）を実行します。デフォルトでは、IDX はプロジェクトをインポートする際に npm 依存関係をインストールしません。
ワークスペースを構成する
IDX は、Nix を使用して各ワークスペースの環境構成を定義します。Nix は純粋に機能するパッケージ マネージャーであり、各依存関係に一意の識別子を割り当てます。つまり、最終的には、同じ依存関係の複数のバージョンを環境にシームレスに含めることができます。また、再現可能で宣言的です。IDX のコンテキストでは、ワークスペース間で Nix 構成ファイルを共有して、同じ環境構成を読み込むことができます。Nix + IDX の詳細を確認する。
.idx/dev.nix ファイルを作成または編集する
環境構成は、コード リポジトリ内の .idx/dev.nix ファイルで定義されます。このファイルを使用して、インストールするパッケージ、環境変数、Code OSS 拡張機能を指定できます。
IDX でアプリ プレビューを有効にする基本的なワークスペース環境構成については、次の .idx/dev.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_18
];
# 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";
};
};
};
}
新しい設定を適用
dev.nix 構成ファイルを追加または更新するたびに、IDX の右下に環境を再ビルドするためのプロンプトが表示されます。環境の再構築にかかる時間は、構成に必要なパッケージの数によって異なります。
デバッグ環境のビルドエラー
構成ファイルは機械で読み取り可能なコードであるため、エラーが発生する可能性があります。この場合、環境の構築に失敗し、起動できなくなる可能性があります。IDX に、リカバリ環境を開始するオプションが表示されます。このワークスペースには定義済みの構成は含まれておらず、基本的なコード OSS を実行するだけです。これにより、dev.nix 構成ファイルのエラーを修正し、環境を再ビルドできます。
IDX は最終的に、環境のビルドエラーを表示します。現時点では、ご自身でトラブルシューティングを行う必要があります。