CPU使用率のモニタリング

CPU使用率は、アプリのパフォーマンスとユーザーエクスペリエンスに直接的に影響を及ぼします。CPU消費量を追跡して最適化できるようにするために、Vega Studioには次のモニタリングツールが用意されています。

• Activity Monitor - リアルタイムのCPU指標と記録機能を提供します（Fire TV Stickのみ）。
• Recording View - フィルタリングに対応したデータ分析とライフサイクルイベントの追跡を行うことができます。

これらのツールを使用すると、パフォーマンスのボトルネックを特定し、CPUに高い負荷がかかる問題をユーザーに影響が及ぶ前に解決できます。

前提条件

開始する前に、以下の準備が整っていることを確認してください。

1. 動作中のアプリがある。

   アプリの構築についてのヘルプ情報が必要な場合は、アプリの作成を参照してください。

2. アプリがデバイスに接続している。

Activity Monitorの起動

1. 接続されたデバイスでアプリを起動します。

2. Visual Studio（VS）Codeでコマンドパレットを開きます。

   Mac： Shift + Command ⌘ + P

   Linux： Ctrl + Shift + P

   

3. 「Vega: Start Activity Monitor」と入力し、Macの場合はReturnキー、Linuxの場合はEnterキーを押します。

   

   [App Performance Tools] から [Activity Monitor] を選択することもできます。

   

4. 進行状況バーが表示されない場合は、ウィンドウを閉じてActivity Monitorを再起動してください。

5. エラーが発生すると、次のメッセージが表示されます。

   

6. メッセージを閉じ、Activity Monitorを再起動してください。

   Activity Monitorには、次の2つの時系列グラフが表示されます。

   • CPU使用率
   • メモリ使用量

   どちらのグラフでも、X軸は連続した時間帯を表しており、データストリーム全体のアクティビティを相関させることができます。

   

   CPU使用率グラフのY軸は、デバイス上のすべてのコアにおける時間経過に伴うリアルタイムのCPU使用率を示します。

   注： CPU使用率が400%の場合、4基のコアがすべてフルで使用されています。

   

   メモリグラフのY軸には、現在のメモリ消費量が時系列に沿ってメビバイト（MiB、1,048,576バイトに等しいデジタル情報の単位）で表示されます。

   パフォーマンスグラフの点線は、クラッシュから再起動までの間にアプリがダウンした時間を示しています。これは、アプリが実行されていなかったために記録データがないことを意味します。

   アプリがクラッシュすると、Activity Monitorはデータの収集を停止します。モニタリングを再開するには、アプリを再起動します。

   

7. コマンドパレットで「Vega App: Run」と入力します。

   [Kepler Studio] > [Projects] セクションに移動することもできます。ここにはアプリ名と、ビルド、上向き矢印、再生の各アイコンが表示されます。

8. 再生アイコンをクリックします。

記録の開始

1. Activity Monitorで、[⏹️ Start Recording] を選択します。
2. プロンプトが表示されたら、記録セッションの名前を入力します。
3. プロンプトが表示されたら、記録時間（タイムアウト）を入力します。デフォルトでは、録音タイムアウトは120秒です。
4. Fire TV Stickで、アプリをリリースモードで実行します。

5. セッションを終了するには、[⏹️ Stop Recording] を選択します。

   別のウィンドウでRecording Viewが開きます。

起動モードの記録の実行

この機能では、アプリの起動時にCPU、メモリ消費量、トレース、CPUプロファイラーのデータをキャプチャします。このデータから、起動時間を短縮するために最適化できる機能を特定することができます。この機能を使用する前に、アプリのプロジェクトにreact-native.config.jsがあり、projectとkeplerが含まれていることを確認してください。

コードをコピー クリップボードにコピーしました。

   module.exports = {
	   project: {
	      kepler: {
	      }
	   },
   };

1. Vegaデバイスを開発用コンピューターに接続します。

2. Vegaデバイスでアプリを実行します。

   Fire TV Stickでのアプリの実行の手順に従ってください。

3. [Kepler Studio] パネルの場合：

   • [Build Modes] から [Release] を選択します。

   • [Devices] から接続するデバイスを選択します。

4. コマンドパレットを開きます。

   Mac： Shift + Command ⌘ + P

   Linux： Ctrl + Shift + P

   

5. 「Vega: Run CPU Profiler on App Launch」と入力し、Macの場合はReturnキー、Linuxの場合はEnterキーを押します。

   

   構成、ビルド、インストール、記録、アプリ起動の実行中は、画面に進行状況を示す通知が表示されます。

   プロセスが完了すると、Vegaにより、起動モードのプロファイラー構成を使用してアプリのvpkg（アプリ配布用のVegaのパッケージ形式）が生成されます。次に、このパッケージがデバイスにインストールされます。インストール後、Activity Monitorが新しいウィンドウで開き、プロファイリングデータの記録が開始されます。

記録セッションの終了

Activity Monitorウィンドウで、[Stop Recording] をクリックします。

別のウィンドウでRecording Viewが開きます。

起動モードの記録の再実行

1. 「Vega: Start Activity Recording and Launch App」と入力します。

2. アプリコードを変更した場合は、起動モードの記録を再実行します。コマンドパレットに「Vega: Run CPU Profiler on App Launch」と入力します。

記録されたデータの分析

記録されたデータは、Recording Viewで分析できます。このビューには、タイムライン、CPU使用率、メモリ、トレース、時間ベースのフレームグラフが含まれます。

タイムライン

タイムラインでは、選択した時間帯に基づいてデータをフィルタリングできます。

• 時間帯を選択するには、マウスを使用して緑色のタイムラインバーをドラッグします。
• 個々のグラフ （プロファイラーグラフ、CPUグラフなど）をフィルタリングします。各グラフで選択した時間帯は、そのグラフにのみ適用されます。

トレース

トレースは、アプリのライフサイクルイベントとスレッドの状態を可視化します。

アプリのライフサイクルイベント

アプリのライフサイクルは、次のようなアプリの状態に関するコンテキストを提供します。

• Launch - アプリが起動し、画面に表示され、フォアグラウンドに移動します。
• Foreground - アプリは画面に表示されています。
• Background - アプリは画面に表示されていませんが、バックグラウンドで実行されています。
• Crash - このイベントはアプリのクラッシュを示します。

モニタリング中にアプリがクラッシュすると、Activity Monitorは次のアクションを実行します。

• クラッシュしたアプリに対応する集約クラッシュレポート（ACR）をダウンロードします。ACRにはクラッシュに関する詳細情報が含まれており、問題の診断と修正に役立ちます。
• VS Codeワークスペースに通知を送信します。これはVS Codeウィンドウの右下隅に表示されます。通知には、 [Symbolicate an ACR] と [View and Copy Logs] の2つのアクションボタンが含まれます。

スレッド状態の情報

スレッド状態の情報には以下が表示されます。

• 100ミリ秒間隔ごとの主要なスレッドの状態。
• 記録セッション全体で、スレッドが最も多くの時間を費やした場所。

スレッドのタイプ

スレッドには次のようなさまざまなタイプがあります。

• JSスレッド - すべてのJavaScriptロジック、イベントハンドラー、スクリプトを単一スレッドで実行します。長時間実行される操作はUIとレンダリングタスクをブロックし、次のようなパフォーマンス上の問題を引き起こします。 UIの応答不能、アニメーションの遅延、高レイテンシ。
• UIスレッド - インターフェイス要素を更新し、クリックやキー押下などのユーザー操作を処理します。この重要なスレッドがブロックされると、アプリが応答しなくなります。

• レンダリングスレッド - すべてのビジュアル要素を作成して管理し、UIスレッドと連携してグラフィカルな出力を提供します。

  スレッド状態の情報は、JavaScriptアプリのパフォーマンスボトルネックを見つけるために使用します。JavaScriptスレッドのパフォーマンスの調査で代表的なシナリオを参照してください。

スレッドの状態

スレッドのさまざまな状態は次のとおりです。

• Running - スレッドはCPUコアで命令をアクティブに実行中です。
• Runnable - スレッドは実行可能な状態であり、CPUコアの空きを待機しています。
• Runnable (Preempted) - スケジューラによってスレッドがプリエンプトされ別のスレッドが実行中のため、CPUの競合が起こっている状態です。
• Sleeping - スレッドが自発的に制御を停止し、他のスレッドがCPUを使用してリソースを管理できる状態です。
• Uninterruptible Sleep - スレッドがカーネルのシステムコールを実行中で、プリエンプションを受け入れられない状態です。
• Stopped - スレッドは一時停止しており（多くの場合、デバッグまたは同期のため）、後で再開できる状態です。
• Idle - スレッドは作業割り当てを待機しており、タスクを実行していない状態です。
• Exit - スレッドは実行を完了して終了し、再開はできない状態です。

ホット関数

記録中、ホット関数は、子関数で消費された時間を含め、コードのどの部分が最も多くCPU時間を消費しているかを示します（包括時間）。

Recording Viewには、ホット関数の表が表示されます。

• Hot Functions - 関数名とソースの位置。Hot Functionsのリンクをクリックすると、関数のソースコードに移動します。

• Total CPU Time - 記録セッション全体で関数の実行に費やされた合計包括時間（ミリ秒）。

• Self CPU Time - 記録セッション全体で関数の実行に費やされた排他的合計時間（ミリ秒）。

• Total % - 合計包括CPU時間のうち、この関数に費やされた時間の割合。

  

  デフォルトでは、アプリのホット関数のみが表示されます。サードパーティライブラリのホット関数を表示するには、[Include Library Hot Functions] オプションをオンにします。

  重要：​ 一部のライブラリ関数は、パスに@amzn/が含まれているために検査できない場合があります。検査するには、node_modulesフォルダ内の対応する@amazon-devices/スコープベースのパスを代わりに参照してください。

  

Vega CPUプロファイラーは、記録セッション中に5～15ミリ秒ごとにアプリのパフォーマンスをサンプリングします。プロファイラーは次のタスクを実行します。

1. 記録中にアプリに接続する。
2. パフォーマンスデータを分析する。
3. 次の2つのファイルを作成する。
   • ホット関数の概要を含むJSONファイル
   • Chrome DevToolsのTrace Event FormatのCPUプロファイラートレースイベントファイル（traceEventsFilePath）

   これは次のことに役立ちます。

   • コードベースで最もCPU使用率の高い領域を特定する。
   • 最適化する必要がある機能に優先順位を付ける。

ホット関数とフレームグラフを表示するには、次の手順に従います。

• [Recording] で、記録したファイルを開きます。

  次の画像は、CPUプロファイルの記録のサンプルです。

  

Vega CPUプロファイラーをパフォーマンスコマンドラインインターフェイス（CLI）で使用するには、次の手順に従います。

• 記録セッションを開始する前に、Activity Monitorまたは記録コマンドに--record-cpu-profiling引数と--source-map-file-path引数を指定します。

例：

kepler exec perf activity-monitor
            --record-cpu-profiling
            --app-name=com.amazondeveloper.keplervideoapp
            --sourcemap-file-path=<kepler-buildディレクトリ内のJSソースマップファイルのパス>

JSONファイルの内容には、CPUおよびメモリの使用率とプロセスの状態が含まれます。

例：

{
   "traceRecords": [
      {
         "startTs": 1687263185520361000,
         "endTs": 1687263201482227000,
         "traceName": "FOREGROUND",
         "pid": 2838,
         "timestamp": null,
         "processName": "com.amazondeveloper.keplervideoapp"
      },
      {
         "startTs": 1687263201482227000,
         "endTs": 1687263215311317000,
         "traceName": "BACKGROUND",
         "pid": 2838,
         "timestamp": null,
         "processName": "com.amazondeveloper.keplervideoapp"
      }
   ],
   "activityRecords": [
      {
         "timestamp": 1687263185024674256,
         "system": {
            "cpu": {
               "numCores": 4,
               "aggregated": {
                  "user": 147.6,
                  "sys": 114.8
               },
               "cores": []
            },
            "memory": {
               "total": 1807052.8,
               "free": 667648.0,
               "used": 502784.0,
               "available": 1252147.2
            }
         },
         "process": [
            {
               "pid": 2838,
               "name": "com.amazondeveloper.keplervideoapp",
               "cpuPercentage": 130.0,
               "memPercentage": 3.8,
               "memRES": 68456.0
            }
         ]
      }
   ],
   "cpuRecords": [{
        "hotFunctions": [{
                "function_name": "GradientOverlay",
                "file_path": "/VegaVideoApp/src/components/miniDetails/Preview.tsx",
                "line_number": 28,
                "column_number": 7,
                "begin_timestamp": 8407098854,
                "end_timestamp": 8408235415,
                "duration": 1136561,
                "percent_of_total": 16.08
            },
         ],
         "traceEventsFilePath": "/VegaVideoApp/generated/2024-01-10_09-52-13/trace1704909179877459917-converted.json"
   }]
}

このJSONファイルには次の3つのセクションがあります。

• traceRecords - 以下のライフタイムステージを記録します。

  • startTs（開始タイムスタンプ）
  • endTs（終了タイムスタンプ）
  • pid（プロセスID）
  • processName（アプリ名）
• activityRecords - Activity Monitorデータをトラッキングします。
  • system：
    • CPU使用率（sysおよびuser、各値の最大値はnumCores x 100）
    • メモリ使用量
  • process：
    • cpuPercentage（最大値はnumCores×100）
    • memPercentage（メモリパーセンテージ、最大100%）
    • memRes（共有メモリでアプリが使用するメモリの合計）
    • pidとアプリのname（プロセスIDと名前）

• cpuRecords - Vega CPUプロファイラーからのホット関数を保存します。

  

記録が終了すると、アプリはJSONファイルを生成し、その場所を表示します。

フレームグラフ

フレームグラフはシステムアクティビティとCPU消費量を示し、潜在的なボトルネックや非効率なコードの特定に役立ちます。各関数ノードの幅は、呼び出された関数に費やされた時間（包括時間）を含むCPU消費時間を示します。

包括時間とは、ある関数の実行に費やされた時間に、その関数から呼び出されたすべての関数に費やされた時間を含めたものです。

フレームグラフには次の3つの主要な要素があります。

• 記録中にアクティブになる関数
• 各関数のコールスタックの順序
• 各関数のおおよその実行時間

キーボードの矢印キーまたはa-s-d-wキーを使用してフレームグラフ内を移動します。

フレームグラフを分析することで、最適化の余地のある関数やコードパスを特定できます。ノードの幅が広いほど時間がかかっていることを表します。これを基に、対応作業の優先順位を効果的に設定できます。

関数ソースの色分けガイド

次の色分けガイド表を使用すると、関数やコードパスが呼び出された経路を特定しやすくなります。

関数ノードの上にマウスカーソルを合わせると、その関数の属性が表示されます。

• Name - 関数名。

• Category - 関数が属するカテゴリー。

• Duration - アプリがこの関数とこの関数が呼び出したすべての子関数の実行に費やしたおおよその時間（ミリ秒）。

• SelfDuration - アプリがこの関数の実行に費やしたおおよその時間（ミリ秒）。ただし、子関数に費やした時間を除きます。

• Start - 関数の開始タイムスタンプ。

• End - 関数の終了タイムスタンプ。

• SourcePosition - ソースの位置（関数名、行番号、列番号）。

SourcePosition をクリックすると、プロジェクト内の関数ソースコードが表示されます。

コールツリー

コールツリーには、プロファイリング中の関数呼び出しの階層が、最も時間を消費する関数から順に表示されます。

グリッドには以下が表示されます。

Function Name - 関数名とソースの位置。リンクをクリックするとソースコードが表示されます。

Total CPU Time - すべての子関数で費やされた時間を含む、各関数に費やされた包括的合計時間（ミリ秒（ms））。

Self CPU Time - すべての子関数で費やされた時間を除く、各関数に費やされた排他的合計時間（ミリ秒（ms））。

コールツリーを使用すると、次のタスクを実行できます。

• ノードを展開したり折りたたんだりして、特定の領域に注目する。
• [Self CPU Time] または [Total CPU Time] で並べ替える。

以前の記録を開く方法

以下のいずれかの方法を使用します。

オプション1（推奨）： クイックオープンを使用するこの方法では、VS CodeのインターフェイスまたはCLIから記録にアクセスできます。

VS Codeから：

1. Activity Monitorの記録ファイル（例： Basic-trace-recorder[タイムスタンプ].json）を、VS Codeクイックオープンを使用して、またはプロジェクトのgeneratedディレクトリで見つけます。
2. ファイルを1回クリックしてプレビューするか、2回クリックしてアクティブモードで開きます。

CLIから：

1. ターミナルウィンドウを開き、次のように入力します。

   code <<記録ファイルのパス>>
   

2. VS Codeでコマンドパレットを開きます。

   Mac： Shift + Command ⌘ + P

   Linux： Ctrl + Shift + P

ターミナルがcodeコマンドを認識しない場合：

1. VS Codeを開きます。

2. コマンドパレットを開きます。

   • Mac： Cmd+Shift+P
   • Linux： Ctrl+Shift+P
3. 「Shell Command: Install code command in PATH」を実行します。
4. コマンドを再試行します。

オプション2： VS Codeコマンドパレットを使用するこの方法では、VS Codeに組み込みのコマンドインターフェイスを使用して記録にアクセスできます。また、クイックオープンを利用できない場合にも使用できます。

1. VS Codeを開きます。

2. コマンドパレットを開きます。

   • Mac： Cmd+Shift+P
   • Linux： Ctrl+Shift+P
3. 「Kepler: Open Recording View」と入力します。

4. 一覧から以前の記録セッションを選択します。

   選択したセッションのRecording Viewが新しいウィンドウで開きます。別のタブで現在のセッションを開いている場合は、新しいセッションにフォーカスが移ります。

関連トピック

• アプリのKPIの測定
• UIレンダリングの問題の特定
• コンポーネントの再レンダリングに関する問題の調査
• 💬 コミュニティ： Inspect JS traces from Vega Apps（英語のみ）
• 💬 コミュニティ： JSプロファイラートレースをPerfettoトレースファイルにマージする方法

Last updated: 2025年10月1日