Amazon Developer

Console

as

Settings
Sign out
Notifications
Alexa
Amazonアプリストア
Ring
AWS
ドキュメント
Support
Contact Us
My Cases

Console

as

開発
設計と開発
公開
リファレンス
サポート

CPU使用率のモニタリング

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

    コマンドパレットのStart Activity Monitorコマンドを示すスクリーンショット。

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

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

    [App Performance Tools] メニューから [Activity Monitor] を選択する画面のスクリーンショット。

    進行状況バーが表示された後、Activity Monitorが新しいウィンドウで開きます。

    「Loading your view...」というテキストが表示された進行状況バーのスクリーンショット。

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

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

    Activity Monitorの起動に失敗したときのエラーメッセージを示すスクリーンショット。メッセージには、「Failed to start Activity Monitor. Please try again」と表示されています。

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

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

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

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

    CPU使用率とメモリ使用量を示すActivity Monitorのグラフのスクリーンショット。

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

    メモリ使用量（MiB単位）とアプリのダウンタイムインジケーターを示すMemory Monitorのスクリーンショット。

    メモリグラフのY軸は、時間経過に伴う現在のメモリ消費量をメビバイト（MiB）単位で示します。

    パフォーマンスグラフの点線は、クラッシュから再起動までの間にアプリがダウンしていた期間を表します。これは、データがアプリの実行中にのみ記録されたということを意味します。アプリがクラッシュすると、Activity Monitorはデータの収集を停止します。モニタリングを再開するには、アプリを再起動します。

    コマンドパレットからActivity Monitorを再開する画面のスクリーンショット。

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

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

  8. [Play] アイコンをクリックします。

記録の開始

  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. [Vega Studio] パネルで、次の操作を行います。

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

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

    Mac： Shift+Command ⌘+P

    Linux： Ctrl+Shift+P

    コマンドパレットからCPUプロファイラーを起動する画面のスクリーンショット。

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

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

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

記録セッションの終了

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

記録セッションを終了できる [Stop Recording] を示すスクリーンショット。

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

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

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

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

記録されたデータの分析

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

Recording Viewのスクリーンショット。さまざまなパフォーマンス分析ツールが表示されます。

タイムライン

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

タイムラインのスクリーンショット。時間帯を選択してデータをフィルタリングできます。
  • 時間帯を選択するには、マウスを使用して緑色のタイムラインバーをドラッグします。
  • 個々のグラフ （プロファイラーグラフ、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時間を消費しているかを示します（包括時間）。

CPU負荷の高いコード領域を識別するホット関数の表のスクリーンショット。

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

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

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

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

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

パフォーマンスの最適化を示す詳細なCPU時間の指標をオンにした画面のスクリーンショット。

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

サードパーティライブラリのホット関数を表示する [Include Library Hot Function] をオンにした画面のスクリーンショット。

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

  1. 記録中にアプリに接続する。
  2. パフォーマンスデータを分析する。

  3. 次の2つのファイルを作成する。

    • ホット関数の概要を含むJSONファイル
    • Chrome DevToolsのTrace Event Formatのトレースイベントを含むCPUプロファイラー（traceEventsFilePath）

    プロファイリングにより、以下が可能になります。

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

ホット関数とフレームグラフの表示

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

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

詳細なパフォーマンスデータがキャプチャされたCPUプロファイルの記録のスクリーンショット。

パフォーマンスコマンドラインインターフェイス（CLI）でのVega CPUプロファイラーの使用

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

例：

vega 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

traceRecordsは、次の属性を使用してライフタイムステージを記録します。

  • startTs（開始タイムスタンプ）
  • endTs（終了タイムスタンプ）
  • pid（プロセスID）
  • processName（アプリ名）
activityRecords

activityRecordsは、システムとプロセスのActivity Monitorデータを追跡します。

  • system：
    • CPU使用率（sysおよびuser、各値の最大値はnumCores x 100）
    • メモリ使用量
  • process：
    • cpuPercentage（最大値はnumCores×100）
    • memPercentage（メモリパーセンテージ、最大100%）
    • memRes（共有メモリでアプリが使用するメモリの合計）
    • pidとアプリのname（プロセスIDと名前）
cpuRecords

cpuRecordsは、Vega CPUプロファイラーからホット関数を格納します。

生成されたJSONファイルからのトレースとプロファイリングデータを示すスクリーンショット。

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

フレームグラフ

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

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

関数のCPU消費量と呼び出し階層を視覚化するフレームグラフのスクリーンショット。

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

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

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

キーボードコントロールを使用してフレームグラフ内を移動できることを示すスクリーンショット。

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

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

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

パス コード カテゴリー
@amzn #ff9900 Amazonオレンジ
schedule #008000 濃い緑
Native #a0522d 茶
react #087EA4 Reactブルー
@react-native #087EA4 Reactブルー
root #008080 ティール
JavaScript #4CAF50 薄い緑（独自のコード）
色分けによって関数ソースとカテゴリーが識別されることを示すスクリーンショット。

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

  • 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. 記録ファイル（例： Basic-trace-recorder[timestamp].json）を探します。VS Code Quick Openを使用してActivity Monitorで、またはプロジェクトのgeneratedディレクトリで見つけることができます。
  2. ファイルを1回クリックしてプレビューするか、2回クリックしてアクティブモードで開きます。

CLIの場合

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

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

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

    Mac： Shift+Command ⌘+P

    Linux： Ctrl+Shift+P

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

  1. VS Codeを開きます。

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

    Mac： Shift+Command ⌘+P

    Linux： Ctrl+Shift+P

  3. 「Shell Command: Install code command in PATH」を実行します。
  4. コマンドを再試行します。

オプション2： VS Codeのコマンドパレットを使用する

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

  1. VS Codeを開きます。

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

    Mac： Shift+Command ⌘+P

    Linux： Ctrl+Shift+P

  3. 「Vega: Open Recording View」と入力します。

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

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

Last updated: 2026年5月7日

フォローする

サポート対象デバイス

amazon_developer_logo

© 2010-2026, Amazon.com, Inc. or its affiliates. All Rights Reserved. 無断複写·転載を禁じます。

利用規約

Amazon開発者ブログ

お問い合わせ