プロジェクト IDX は公開プレビュー版です。プレビュー版のプロダクトと機能では、サポートが制限されることがあります。また、プレビュー版のプロダクトや機能には、他のプレビュー版と互換性のない変更が行われる場合があります。プロジェクト IDX にアクセスするには、順番待ちリストに登録してください。

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

アプリをプレビューする

Project IDX を使用すると、コードエディタでアプリケーションのライブビューをレンダリングして、作業内容をプレビューできます。IDX ウェブプレビューは、アプリのウェブサーバーのインラインフレーム（iFrame）とクラウドベースの Android エミュレータをレンダリングします。

プレビュー環境を有効にして構成する

ワークスペースでアプリをプレビューするには、プレビュー環境を構成する必要があります。

.idx/dev.nix 構成ファイルでプレビューを有効にします。このファイルは、IDX によって新しいワークスペースの作成時に自動的に生成され、選択したテンプレートに基づいて該当するプレビュー環境が組み込まれます。ファイルが IDX コードリポジトリにない場合は作成します。次の例のように、idx.previews 属性を true に設定し、構成属性を追加します。

{ pkgs, ... }: {

# NOTE: This is an excerpt of a complete Nix configuration example.
# For more information about the dev.nix file in IDX, see
# https://developers.google.com/idx/guides/customize-idx-env

# Enable previews and customize configuration
idx.previews = {
  enable = true;
  previews = {
    # The following object sets web previews
    web = {
      command = [
        "npm"
        "run"
        "start"
        "--"
        "--port"
        "$PORT"
        "--host"
        "0.0.0.0"
        "--disable-host-check"
      ];
      manager = "web";
    };
    # The following object sets Android previews
    # Note that this is supported only on FLutter workspaces

    android = {
      manager = "flutter";
    };
  };
};

IDX の Nix 属性の一覧については、Nix + IDX をご覧ください。

環境を再ビルドします。
- コマンドパレット（Cmd+Shift+P/Ctrl+Shift+P）から「Project IDX: Hard restart」コマンドを実行します。
- [Environment config update] 通知で [Rebuild environment] をクリックします。
dev.nix ファイルを変更して環境を再構築すると、有効にした項目に応じてプレビューパネルがワークスペースに表示され、[Android] タブと [ウェブ] タブが表示されます。ただし、環境が再構築されるまでしばらく待たなければならない場合があります。ワークスペースを閉じてから、IDX ダッシュボードから再度開いてみてください。

アプリのプレビューを使用する

IDX は、アプリをプレビュー環境にインストールする Chrome エミュレータと Android Emulator（Flutter ワークスペース上）でウェブプレビューを提供するため、ワークスペースから直接エンドツーエンドで完全にテストできます。

ウェブと Android のプレビューを更新

IDX は、基盤となるフレームワークのホットリロード機能（npm run start や flutter hot-reload など）に接続し、タイトな開発ループを実現します。このセクションでは、IDX のデフォルトの動作がユースケースで適切に機能しない場合のトラブルシューティングに役立つ、さまざまな種類の再読み込みについて説明します。

自動ホットリロード: ファイルを保存すると、ホットリロードが自動的に実行されます。ホットモジュールの交換（HMR）とも呼ばれるホットリロードは、ページの再読み込み（ウェブアプリの場合）やアプリの再起動や再インストール（エミュレータの場合）を行わずに、アプリを更新します。この方法は、アプリのライブ状態を維持するには適していますが、意図したとおりに動作しないことがあります。
手動フル再読み込み: このオプションは、ページの更新（ウェブアプリの場合）またはアプリの再起動（エミュレータの場合）と同じです。コードの大きなチャンクをリファクタリングする場合など、ソースコードの重要な変更をキャプチャするには、フル再読み込みを使用することをおすすめします。
手動ハードリスタート: IDX のプレビューシステムを完全に再起動します。これには、アプリのウェブサーバーの停止と再起動も含まれます。

すべての再読み込みオプションは、プレビューツールバーまたは IDX カテゴリのコマンドパレット（Mac では Cmd+Shift+P、ChromeOS、Windows、Linux では Ctrl+Shift+P）で使用できます。

プレビューツールバーを使用する手順は次のとおりです。

再読み込みアイコンをクリックしてページを更新します。これにより、フル再読み込みが強制されます。別の種類の更新を行うには、再読み込みアイコンの横にある矢印をクリックしてメニューを開きます。
メニューから更新オプション（ホットリロード、フルリロード、ハードリスタート）を選択します。

自動保存とホットリロードを構成する

デフォルトでは、IDX は入力をやめてから 1 秒後に作業内容を自動保存し、自動ホットリロードをトリガーします。IDX に別の間隔で作業を保存する場合は、自動保存設定を変更します。自動保存をオフにすることもできます。

自動保存を設定する

Project IDX を開きます。
設定アイコンをクリックします。[設定] ウィンドウが表示されます。
Files: Auto Save を検索し、このフィールドが「afterDelay」に設定されていることを確認します。
「Files: Auto Save Delay」を検索します。[Auto Save Delay] フィールドが表示されます。
新しい自動保存の遅延間隔をミリ秒単位で入力します。作業内容の変更は、新しい自動保存の遅延の設定に基づいて自動的に保存されるようになりました。

自動保存をオフにする

Project IDX を開きます。
設定アイコンをクリックします。[設定] ウィンドウが表示されます。
「Files: Auto Save」を検索します。
プルダウンをクリックして [オフ] を選択します。これで自動保存は無効になります。