ネットワークプロキシによるトラフィックのモニタリング
Vega Studioのネットワークプロキシツールでは、Vegaアプリのネットワークアクティビティのモニタリングとトラブルシューティングを行うことができます。mitm-http-proxyライブラリをベースとして構築されたこのツールは、アプリとそのサーバーの間の中間プロキシとして機能し、ネットワークトラフィックの検査と変更を可能にします。
このツールは、以下の作業に役立ちます。
- ネットワークの問題のデバッグ
- API呼び出しの検査
- パフォーマンスのボトルネックの分析
- Vegaアプリのデータ転送の検証
このツールは、以下のトラフィックをキャプチャします。
- HTTP
- HTTPS
- WebSocket
- XMLHttpRequest
- メディアプレーヤーのリクエスト
前提条件
次の要件を満たしている必要があります。
- Vega SDKとVega Studioのインストール
- Fire TV StickデバイスまたはVega仮想デバイス
- Vegaアプリプロジェクト
ネットワークプロキシの設定
-
Visual Studio（VS）Codeでコマンドパレットを開きます。
Mac： Shift + Command ⌘ + P
Linux： Ctrl + Shift + P
コマンドパレット -
「Start Network Proxy」と入力します。
ネットワークプロキシの設定 [Setup Network Proxy] のユーザーインターフェイス（UI）には、[Capture Call Stack] と [Enable SSL Proxy] がデフォルトでオンの状態で表示されます。
重要： [Enable SSL Proxy] をオフにすると、ツールは証明書を生成せず、HTTPSトラフィックをインターセプトすることはできなくなります。[Capture Call Stack] をオフにすると、ネットワークプロキシのUIでこのオプションが非表示になります。 -
[Setup Network Proxy] のUIで、4桁のポート番号を入力します。
ヒント： 競合が発生する可能性を避けるために、一般的なポート（8081など）や、ほかのサービスまたはアプリで使用されているポートは使用しないでください。 -
[送信] をクリックします。
ネットワークプロキシのユーザーインターフェイスが開き、デバイスのシリアル番号が表示されます。
-
ポートフォワーディングを設定します。
ポートフォワーディングは、特定のポート宛てのリクエストを、代わりに開発用コンピューターに送信するようにデバイスに指示します。
コマンドプロンプトで、次のコマンドを実行します。
vda reverse tcp:<リモートポート> tcp:<ローカルポート><リモートポート>は、Fire TV Stickのproxy-config.jsonファイルに構成したポートに置き換えます。<ローカルポート>は、開発用コンピューターのネットワークプロキシ用に構成したポートに置き換えます。例：
vda reverse tcp:8888 tcp:8888ヒント： デバッグが完了したら、ポートフォワーディングを停止して、デバイスの通常のネットワーク構成を復元します。プロキシが起動したことを示す確認メッセージが表示されます。プロキシツールにより、以下が自動的に実行されます。
assets/rawディレクトリの作成proxy-config.jsonの生成- SSL証明書（
ca.pem）の作成（このオプションはデフォルトで有効になっています）
ネットワークプロキシのユーザーインターフェイス
ネットワークプロキシのメインインターフェイスは以下で構成されています。
- コントロールパネル
- トラフィックビュー
- 詳細パネル
コントロールパネル
コントロールパネルには、以下のオプションが用意されています。
-
記録の開始または停止
a. [Start Recording] - すべてのネットワークアクティビティのキャプチャを開始します。記録中の動作は次のようになります。
- ツールは、すべてのネットワークトラフィックを表示します。
- リクエストとレスポンスをリアルタイムでモニタリングできます。
b. [Stop Recording] - 新しいリクエストまたはレスポンスのキャプチャを停止します。
- [Clear] - セッションをリセットし、キャプチャされたすべてのデータを削除します。
-
[Settings] - 次のオプションがあります。
a. [Export] - Vegaアプリの生成フォルダにセッションをJSON形式で保存します。
b. [Import] - 以前にエクスポートしたセッションを読み込みます。
-
[Disable SSL Proxying] - HTTPSトラフィックのインターセプトを制御します。
有効にすると、ツールはHTTPSトラフィックをインターセプトし、復号化してインターフェイスに表示します。
無効にすると、ツールはHTTPSトラフィックを復号化しません。
-
ブレークポイントの設定の有効化
[Enable Breakpoint Settings] チェックボックスをオンにすると、ブレークポイント機能がアクティブ化され、ブレークポイントを設定できるようになります。
ブレークポイントの設定
ブレークポイントの設定 ブレークポイントを設定するには、任意のネットワーク呼び出しの横にある [+] アイコンをクリックします。ツールは、その呼び出しの時点でトラフィックを一時停止します。
トラフィックフローの中止、キャンセル、再開
ブレークポイントがトリガーされたことを示すネットワークプロキシUI ツールでブレークポイントがトリガーされたら、目的の操作に応じたボタンをクリックします。
- [Abort] - リクエストをキャンセルします。
- [Cancel] - ブレークポイントを停止します。
- [Resume] - 通常のフローを続行します。
トラフィックビュー
ネットワークプロキシは、インターセプトされたそれぞれのリクエストまたはレスポンスを次の詳細と共に表示します。
- [Status] - リクエストの結果を示すHTTPレスポンスコード（200や404など）。
- [Size] - レスポンス本文のサイズ。
- [Method] - 使用されたHTTPメソッド（GET、POST、PUT、DELETEなど）。
- [Url] - リクエストの完全なURL。ドメインとパスが含まれます。
- [Start Time] - レスポンスの送信時刻のタイムスタンプ。
-
[Duration] - リクエストの処理とレスポンスの受信にかかった時間（ミリ秒）。
ネットワークプロキシUIの下部のパネルを示す画像
詳細パネル
インターセプトされたデータの特定の行を選択すると、下部に新しいパネルが開き、選択されたネットワークトラフィックに関するインサイトが表示されます。
- [Overview] - 一般的なメタデータやステータス情報など、選択したトラフィックの大まかな概要が表示されます。
- [Contents] - リクエストとレスポンスの詳細が表示されます。ヘッダー、本文の内容、その他の関連データが含まれます。
-
[Request Headers] - リクエストで送信されたすべてのヘッダーのセット。
- [Response Headers] - レスポンスで送信されたすべてのヘッダーのセット。
-
[Body Content] - 未加工または書式設定された本文（JSON、HTML）。
-
- [Summary] - 選択されたネットワークトラフィックに関する重要な指標の概要が表示されます。ホストURL、本文のサイズ、MIMEタイプ、ステータスコード、時刻などが含まれます。
デバッグ後のクリーンアップ
アプリを本番環境向けに申請する前に、次の手順を実行します。
- アプリから、proxy-config.jsonファイルとすべての証明書ファイル（assets/raw/ca.pemなど）を削除します。
-
プロジェクトをクリーンアップします。
kepler clean - アプリをビルドします。
トラブルシューティング
Vega Studioのネットワークプロキシツールの使用中に問題が発生した場合は、ネットワークプロキシに関する問題のトラブルシューティングを参照してください。
関連トピック
Last updated: 2025年9月30日
