アプリをプレビューする

Firebase Studio は、コードエディタの横にアプリケーションのライブビューをレンダリングするプレビュー機能を提供します。

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

テンプレートを使用する場合、プレビューはすでに構成されていることがよくあります。テンプレートでプレビューがまだ設定されていない場合は、プロジェクトの Nix 構成ファイルで設定できます。

1. ワークスペースで .idx/dev.nix を開きます。

   Firebase Studio は、新しいワークスペースを作成するときに自動的に生成され、選択したテンプレートに基づいて該当するプレビュー環境が含まれます。ファイルが Firebase Studio コード リポジトリにない場合は、ファイルを作成して idx.previews 属性を true に設定します。次に、次の例に示すように構成属性を追加します。

   { pkgs, ... }: {
   
     # NOTE: This is an excerpt of a complete Nix configuration example.
     # For more information about the dev.nix file in Firebase Studio, see
     # https://firebase.google.com/docs/studio/customize-workspace
   
     # 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";
           # Optionally, specify a directory that contains your web app
           # cwd = "app/client";
         };
         # The following object sets Android previews
         # Note that this is supported only on Flutter workspaces
         android = {
           manager = "flutter";
         };
       };
     };
   }
   

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

2. 環境を再ビルドします。

   • コマンド パレット（Cmd+Shift+P/Ctrl+Shift+P）から、Firebase Studio: ハードリブート コマンドを実行します。
   • [環境構成が更新されました] 通知で、[環境を再ビルド] をクリックします。

   dev.nix ファイルを変更した後に環境を再ビルドすると、ワークスペースにプレビュー パネルが表示され、有効にした内容に応じて [Android] タブと [ウェブ] タブのいずれかまたは両方が表示されます。

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

Firebase Studio は、プレビュー環境にアプリをインストールする Flutter ワークスペースの Chrome エミュレータと Android エミュレータでウェブプレビューを提供します。これにより、ワークスペースから直接、アプリをエンドツーエンドで完全にテストできます。

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

Firebase Studio は、基盤となるフレームワーク（npm run start や flutter hot-reload など）のホットリロード機能にフックして、内部開発ループを効率化します。Firebase Studio は、次のタイプの再読み込みを提供します。

• 自動ホットリロード: ファイルを保存すると、ホットリロードが自動的に実行されます。ホットリロードは、ホット モジュール置換（HMR）とも呼ばれ、ページを再読み込みせずに（ウェブアプリの場合）、またはアプリを再起動または再インストールせずに（エミュレータの場合）アプリを更新します。このアプローチは、アプリのライブ状態を保持する場合に便利ですが、意図したとおりに機能しない場合があります。

• 手動完全再読み込み: このオプションは、ページの更新（ウェブアプリの場合）またはアプリの再起動（エミュレータの場合）と同等です。コードの大規模なリファクタリングなど、ソースコードに大幅な変更を加える場合は、完全な再読み込みを使用することをおすすめします。

• 手動ハードリセット: このオプションを選択すると、Firebase Studio のプレビュー システムが完全に再起動されます。これには、アプリのウェブサーバーの停止と再起動が含まれます。

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

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

1. [再読み込み] アイコンをクリックしてページを更新します。これにより、完全な再読み込みが強制されます。別の種類の更新を行うには、再読み込みアイコンの横にある矢印をクリックしてメニューを開きます。

2. メニューから、[ホットリロード]、[フルリロード]、[ハードリスタート] のいずれかを選択します。

ウェブプレビューを他のユーザーと共有する

アプリのウェブプレビューを他のユーザーと共有してフィードバックを取得するには、アクセスを有効にして、プレビューへの直接リンクを共有します。

1. ウェブ プレビュー ツールバーで、アドレスバーの右側にある [プレビュー リンクを共有] アイコンをクリックして、共有メニューを開きます。

2. 次のいずれかのオプションを使用して、他のユーザーにワークスペースへのアクセスを許可します。

   • プレビューを公開する: ワークスペースのプレビューを一般公開します。これにより、ワークスペースがアクティブな間、および一般公開をオフにするまで、インターネット上のすべてのユーザーがワークスペースで実行されているプレビュー サーバーにアクセスできるようになります。

   • ワークスペースへのアクセスを管理する。アクセス権を付与するユーザーにのみワークスペースを共有します。

3. [プレビュー URL をコピー] を選択して、ワークスペース プレビューへの直接リンクをコピーします。このリンクは、フィードバックをもらう相手に送信できます。表示された QR コードを使用して、モバイル デバイスでプレビューを開くこともできます。

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

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

次のステップ

• Firebase で公開する。
• アプリをモニタリングする。