Amazon Developer

Console

as

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

Console

as

開発
設計と開発
公開
リファレンス
サポート
メインコンテンツへスキップ
ユーザーインターフェイス（UI）の滑らかさはVegaアプリにとって重要な主要業績評価指標（KPI）であり、これにより、ユーザーにスムーズなナビゲーション体験が提供されます。Vegaアプリでは、スクロールなどのUI操作のユースケースにおいて、UIの滑らかさKPIスコアが99%以上である必要があります。 UIの滑らかさKPIが低いアプリでは、スクロールアクションやアニメーション中に視覚的な途切れやジッターが発生することがよくあります。 このページでは、VegaアプリのUIの滑らかさの問題を特定、分析、解決するプロセスの概要を説明します。

​
前提条件

以下の要件を確認してください。
  1. Visual Studio（VS）Codeで開かれたVegaアプリプロジェクト。
  2. アプリ内で高速スクロールを実行するアプリ固有のUI自動化スクリプト。このスクリプトをまだ作成していない場合は、滑らかさとフォアグラウンドメモリの測定の手順に従ってください。

​
手順1：App KPI VisualizerでUIの滑らかさKPIを測定する

以下の手順を実行して、VegaアプリのUIの滑らかさのベースライン測定値を設定します。
  1. VS Codeでコマンドパレットを開きます。 Mac：Shift+Command ⌘+P Linux：Ctrl+Shift+P
  2. 「Kepler: Launch App KPI Visualizer」と入力し、Enterキーを押します。 VS Codeのコマンドパレットで [Kepler: Launch App KPI Visualizer] を選択している画面のスクリーンショット。
  3. [KPI Visualizer] ダイアログボックスで [Application UI Fluidity Test] を選択し、[OK] を押します。 ユースケースの一覧を示すスクリーンショット。コマンドパレットで目的のユースケースを選択できます。
  4. [Record CPU Profiler] ダイアログボックスで、チェックボックスがオフになっていることを確認し、[OK] を押します。 [Record CPU Profiler] オプションのスクリーンショット。コマンドパレットでチェックボックスをオンにできます。
  5. [Custom Test Scenario] ダイアログボックスで、[Yes] を選択します。 カスタムテストシナリオを使用するかどうかをたずねるポップアップのスクリーンショット。[Yes] を選択できます。
  6. 前提条件に従って作成したUI自動化スクリプトを選択します。
App KPI Visualizerがスクリプトを実行し、UIの滑らかさを測定します。次の図のようにUIの滑らかさKPIスコアが表示されます。 テスト結果からKPI名、テスト名、KPIの健全性、KPIスコア、ガイドラインの値が表示された画面のスクリーンショット。 スコアは改善のベースラインです。Vegaアプリは、99％以上のUIの滑らかさKPIスコアを目指すべきであることを覚えておいてください。 KPIの測定とその解釈方法の詳細については、アプリのKPIの測定を参照してください。

​
手順2：コンポーネントのレンダリングを特定する

Reactの再レンダリングメカニズムは、最新の状態変化に合わせてUIを最新の状態に保つために不可欠です。ただし、過度または不必要な再レンダリングはアプリのパフォーマンスとUIの滑らかさに大きな影響を与える可能性があります。 アプリ内の再レンダリングの問題を特定して解決するには、コンポーネントの再レンダリングの問題の調査の手順に従ってください。

​
手順3：オーバードローを特定する

オーバードローはコンポーネントが不必要に再描画されるときに発生し、スクロールのパフォーマンスに影響します。アプリを最適化するには：
  1. オーバードローコンポーネントを検出します。オーバードロー検出の指示に従ってください。
  2. アプリでのオーバードローを回避します。アプリのオーバードローの回避のガイダンスに従ってください。

​
手順4：Vega CPUプロファイラーでパフォーマンス負荷の高い関数を特定する

Vega CPUプロファイラーはApp KPI Visualizerと統合されており、特にスクロール中にアプリのUIの滑らかさKPIに影響する関数の特定に役立ちます。 CPUプロファイラーを使用するには：
  1. 手順1：App KPI VisualizerでUIの滑らかさKPIを測定するを再度実行します。ただし、[Record CPU Profiler] のチェックボックスをオンにしておきます。 追加でキャプチャするリソースの選択を求められたときに表示される、[Record CPU Profiler] オプションのスクリーンショット。コマンドパレットでオンにすることができます。
  2. CPUプロファイラーを実行すると、App KPI Visualizerは次の3つのアーティファクトを生成します。
    • 滑らかさグラフ
    • CPUプロファイルグラフ
    • Perfettoトレース
  3. アーティファクトを分析して、パフォーマンス上の問題（ジャンク）の原因を特定します。UIレンダリングの問題の特定の指示に従ってください。
  4. 特定されたパフォーマンス負荷の高い関数を最適化して、UIの滑らかさを向上させます。

​
関連トピック

最終更新日 2026年10月26日