UIの滑らかさに関する問題の調査
ユーザーインターフェイス（UI）の滑らかさはVegaアプリにとって重要な主要業績評価指標（KPI）であり、これにより、ユーザーにスムーズなナビゲーション体験が提供されます。Vegaアプリでは、スクロールなどのUI操作のユースケースにおいて、UIの滑らかさKPIスコアが99%以上である必要があります。
UIの滑らかさKPIが低いアプリでは、スクロールアクションやアニメーション中に視覚的な途切れやジッターが発生することがよくあります。
このページでは、VegaアプリのUIの滑らかさの問題を特定、分析、解決するプロセスの概要を説明します。
前提条件
以下の要件を確認してください。
- Visual Studio（VS）Codeで開かれたVegaアプリプロジェクト。
- アプリ内で高速スクロールを実行するアプリ固有のUI自動化スクリプト。このスクリプトをまだ作成していない場合は、滑らかさとフォアグラウンドメモリの測定の手順に従ってください。
手順1： App KPI VisualizerでUIの滑らかさKPIを測定する
以下の手順を実行して、VegaアプリのUIの滑らかさのベースライン測定値を設定します。
-
VS Codeでコマンドパレットを開きます。
Mac： Shift + Command ⌘ + P
Linux： Ctrl + Shift + P
-
「Kepler: Launch App KPI Visualizer」と入力し、Enterキーを押します。
-
[KPI Visualizer] ダイアログボックスで [Application UI Fluidity Test] を選択し、[OK] を押します。
-
[Record CPU Profiler] ダイアログボックスで、チェックボックスがオフになっていることを確認し、[OK] を押します。
-
[Custom Test Scenario] ダイアログボックスで、[Yes] を選択します。
-
事前の準備セクションで説明したように、作成したUI自動化スクリプトを選択します。
App KPI Visualizerがスクリプトを実行し、UIの滑らかさを測定します。次の図のようにUIの滑らかさKPIスコアが表示されます。
スコアは改善のベースラインです。Vegaアプリは、99％以上のUIの滑らかさKPIスコアを目指すべきであることを覚えておいてください。
KPIの測定とその解釈方法の詳細については、アプリのKPIの測定を参照してください。
手順2： コンポーネントのレンダリングを特定する
Reactの再レンダリングメカニズムは、最新の状態変化に合わせてUIを最新の状態に保つために不可欠です。ただし、過度または不必要な再レンダリングはアプリのパフォーマンスとUIの滑らかさに大きな影響を与える可能性があります。
アプリ内の再レンダリングの問題を特定して解決するには、コンポーネントの再レンダリングの問題の調査の手順に従ってください。
手順3： オーバードローを特定する
オーバードローはコンポーネントが不必要に再描画されるときに発生し、スクロールのパフォーマンスに影響します。アプリを最適化するには：
-
オーバードローコンポーネントを検出します。オーバードロー検出の指示に従ってください。
-
アプリでのオーバードローを回避します。アプリのオーバードローの回避のガイダンスに従ってください。
手順4： Vega CPUプロファイラーでパフォーマンス負荷の高い関数を特定する
Vega CPUプロファイラーはApp KPI Visualizerと統合されており、特にスクロール中にアプリのUIの滑らかさKPIに影響する関数の特定に役立ちます。
CPUプロファイラーを使用するには：
-
手順1： App KPI VisualizerでUIの滑らかさKPIを測定するを再度実行します。ただし、[Record CPU Profiler] のチェックボックスをオンにしておきます。
-
CPUプロファイラーを実行すると、App KPI Visualizerは次の3つのアーティファクトを生成します。
- 滑らかさグラフ
- CPUプロファイルグラフ
- Perfettoトレース
-
アーティファクトを分析して、パフォーマンス上の問題（ジャンク）の原因を特定します。UIレンダリングの問題の特定の指示に従ってください。
-
特定されたパフォーマンス負荷の高い関数を最適化して、UIの滑らかさを向上させます。
関連トピック
Last updated: 2025年9月30日
