ブラウザープレビューと SideCar

セッションのブラウザーを開く

1. 会話のツールバーで Web プレビューを開く を選びます。
2. 認証情報を含まない http:// または https:// の プレビュー URL を入力し、プレビューを開く を選びます。ツールバーで移動、更新、戻る／進むを行います。
3. プレビューの閉じるボタンでチャットに戻ります。その会話で開き直すと続行できます。

各プレビューは、プロジェクトフォルダーとセッションに属します。会話、プロジェクト、情報、チャットの切り替えでは、明示的に開いたネイティブゲストを非表示にしますが、現在の文書／履歴を破棄しません。非表示のゲストは自動操作の対象ではありません。プロジェクト／ウィンドウを閉じるか、レンダラーを再起動すると、現在の文書は終了します。

保存済み履歴は、そのセッションのブラウザーを明示的に開き直したときにだけ復元し、起動時やセッション選択時には復元しません。保存するのは URL とカーソルであり、未送信フォーム、DOM、POST 本文、JavaScript のメモリではありません。履歴はセッションごとに 32 URL と共有レイアウト容量の上限があり、古い項目は削られる場合があります。URL の復元は新しいページ読み込みを行う場合があり、トランザクションの再実行ではありません。

共有ログインと自動操作の境界

ネイティブプレビューは、同じデスクトップエンジンとプロファイル／設定範囲のプロジェクト／セッション間で、Cookie、ログイン、サイトストレージを共有します。信頼された CodeNomad レンダラーとは分離されています。1 つのプレビューでサイトからログアウトすると、同じストアを使う他のプレビューにも影響します。文書、フォーム、セッションストレージ、移動履歴、自動操作の接続はセッションに属したままです。iframe プレビューは、完全な共有ネイティブブラウザープロファイルではありません。

ネイティブ自動操作はデスクトップ起動時に準備され、セッションに紐づく codenomad.browser ツールで open、navigate、snapshot、screenshot と、ページ操作（クリック、入力、選択、ホバー、ドラッグ、スクロール、キー入力、テキストの出現待ち）を行います。ツールが使えることは、全ウィンドウの操作許可ではありません。実行時に、所有するバックエンド、ネイティブ機能、セッション、表示中の対象を確認します。その間にページが非表示、置き換え、移動された操作は、別のページへ送られずに拒否され、操作が自動的に繰り返されることもありません。ページ内容は引き続き信頼できない情報です。埋め込みを対象が禁止して iframe が失敗する場合は、保護を弱めず外部ブラウザーを使ってください。

6 種類のビューポートテンプレートから選ぶ

1. プレビューのビューポートメニューを開きます。
2. 下表から選びます。縦／横の項目を直接使い、独立した回転コントロールはありません。
3. モバイルエミュレーションの開始／変更や、寸法のみのテンプレートへ戻る際は、ネイティブの再読み込みが行われます。

ネイティブのモバイルテンプレートは、所有するゲストにだけ Android/Chromium の識別、向き、タッチ、DPR 2.75 を設定します。レスポンシブ／デスクトップ／タブレットへ戻ると上書きを解除し再読み込みします。代替 iframe はサイズを変えるだけです。再現可能なレイアウトの基準であり、Safari/Firefox のエミュレーションや、携帯のキーボード、ブラウザー／システムバー、モバイル OS の文字設定のシミュレーションではありません。再読み込みで未送信のページ状態を失う場合があるため、テンプレート変更前にページ上の作業を保存してください。

SideCar を登録する

1. CodeNomad バックエンドホストで、ウェブツールを別途起動し、127.0.0.1:<port> で待ち受けます。
2. 設定 → SideCar を開き、名前 と ポート を入力し、算出された ベースパス（/sidecars/<id>）を確認します。
3. 上流サービスに合わせて プロトコル を設定し、プレフィックスモード を選びます。
4. SideCar を追加 を選び、ホームページの SideCar を開く でタブを開きます。

登録はクライアント間で共有されるサーバー設定であり、サービスのインストールや起動はしません。ポートはバックエンドホスト上にあり、閲覧中のノートパソコンやスマートフォン上ではありません。実行中 は到達可能性を示し、ツールのアプリ／認証が正常だとは限りません。登録を削除しても、別に起動したプロセスは停止しません。タブを閉じても停止しません。

到達できない場合はバックエンドのプロセスとポートを確認します。HTML は読めても資産／WebSocket が失敗する場合は、ツールのベースパスとプレフィックスモードを確認します。誤った登録は目的の設定で作り直してください。プロキシエラーの回避だけのために上流を公開しないでください。SideCar アプリは、サーバーアカウントの権限でターミナルやファイルを公開できるため、利用者と設定を信頼する必要があります。

SideCar はサンドボックス化されたプレビューではなく、CodeNomad の信頼された拡張です。そのページは CodeNomad 自身のオリジンで動作するため、スクリプトはサインイン済みのアクセス権で CodeNomad を利用できます。コードを信頼できるサービスだけを登録してください。CodeNomad は自身のサインイン Cookie をサービスへ転送しませんが、サービス自身の Cookie は保持されます。リモートコントロールは SideCar アプリのプロキシ通信を公開しません。リモートアクセスとリモートコントロールに記載の適切な直接接続経路を使用します。

OpenVSCode Server の例

1. バックエンドホストで、サービスをループバックにバインドして Docker を実行します。

docker run -it --init -p 127.0.0.1:8000:3000 -v "${HOME}:${HOME}:cached" -e HOME=${HOME} gitpod/openvscode-server --server-base-path /sidecars/vscode

2. 名前 VSCode、ポート 8000、プロトコル HTTP、プレフィックスモード プレフィックスを保持 で登録します。
3. 表示されたベースパスが /sidecars/vscode であることを確認し、SideCar を開きます。

このシェルの例は、ホームディレクトリをコンテナーにマウントします。エディターのアクセス範囲を絞るなら、より狭いマウントを使用してください。サービスの --server-base-path は、登録と正確に一致する必要があります。終わったらコンテナーを別途停止してください。SideCar の削除ではコンテナーやそのファイルは削除されません。

ttyd ターミナルの例

1. バックエンドホストで、書き込み可能なシェルターミナルをループバックにバインドして起動します。

ttyd --interface 127.0.0.1 --writable zsh

2. 名前 Terminal、ポート 7681、プロトコル HTTP、プレフィックスモード プレフィックスを削除 で登録します。
3. 表示された /sidecars/terminal ベースパスで SideCar を開きます。

ターミナルは ttyd を起動したアカウントの権限で実行します。zsh がなければ別のシェルを選びます。ttyd の既定ポートを変えた場合は実際のポートを使い、終了時は ttyd を別途停止してください。CodeNomad へのアクセスを認証・保護してください。書き込み可能なターミナルはサンドボックスではありません。