Windows アプリに適したビジュアル ツリー ビューアーを選択する

UI ビジュアライザーとも呼ばれるビジュアル ツリー ビューアーは、実行時に Windows アプリの UI コンポーネントを検査し、操作するために使用されるツールです。

これは、コンポーネント階層の表示と走査、コンポーネントの強調表示、状態の取得と設定、関連コードへのディープリンクなどの機能を通じて、プロトタイプの作成、ユーザー エクスペリエンスの向上、UI 問題のデバッグに役立ちます。

推奨されるツール

次の表は、いくつかの UI 視覚化ツールと、それらがサポートする UI フレームワークおよび Windows アプリ プラットフォームを示しています。 各ツールの概要はテーブルの後にあります。

UI プラットフォーム/フレームワーク	Visual Studio - ライブ ビジュアル ツリー	スパイ++	アクセシビリティ インサイト	Chromium UI開発ツール
Windows App SDK の WinUI	サポートされています	サポートされていません	サポートされています	サポートされていません
WPF	サポートされています	サポートされていません	サポートされています	サポートされていません
デスクトップ用 React Native	サポートされています	サポートされていません	サポートされています	サポートされています
.NET MAUI (英語)	サポートされています	サポートされていません	サポートされています	サポートされていません
WinFormsの	サポートされています	サポートされています	サポートされています	サポートされていません
UWP 用 WinUI 2	サポートされています	サポートされていません	サポートされています	サポートされていません
クラシック Visual Basic アプリ	サポートされていません	サポートされています	サポートされていません	サポートされていません
クラシック Win32 アプリ	サポートされていません	サポートされています	サポートされていません	サポートされていません
Chromium ベースのアプリ	サポートされていません	サポートされていません	サポートされていません	サポートされています

Visual Studio - ライブ ビジュアル ツリー

ライブ ビジュアル ツリーとライブ プロパティ エクスプローラー機能は Visual Studio に同梱されており、連携して動作して、アプリ内の UI 要素の対話型ランタイム ビューを提供します。

ライブ ビジュアル ツリーを使用する場合

これらのツールは、Windows アプリ SDK、UWP、WPF、.NET MAUI、WinForms、デスクトップ用のWinUI 2でWindows アプリ SDKWinUI 2 を使用してアプリをビルドする場合に使用します。

• Windows アプリ SDKの WinUI、UWP 用 WinUI 2、WPF の詳細については、「デバッグ中に XAML プロパティを検査する」を参照してください。
• .NET MAUIの詳細については、「.NET MAUIアプリのビジュアル ツリーを検査する」を参照してください。

注

WPF ツリー ビジュアライザーはレガシ機能であり、アクティブな開発ではありません。 WPF ツリー ビジュアライザーを使用すると、WPF オプションのビジュアル ツリーを調べたり、ツリーに含まれるオブジェクトの WPF 依存関係プロパティを表示したりすることができます。

ライブ ビジュアル ツリーの使用方法

ライブ ビジュアル ツリーを表示するには、XAML ホット リロードを有効にする必要があります (この機能は Visual Studio 2019 以降では既定で有効になっています)。

XAML ホット リロードが有効になっているかどうかをチェックするには、Visual Studio デバッガーをアタッチしてアプリを実行します (F5 またはデバッグ - >デバッグの開始)。 アプリが起動すると、アプリ内ツールバーが表示され、XAML ホット リロードが利用可能であることが確認されます (次の図を参照)。

アプリ内ツール バーが表示されない場合は、Visual Studio のメニュー バーから[XAML ホット リロード>のデバッグ >オプション] を選択します。 [オプション] ダイアログ ボックスで、[XAML ホット リロード を有効にする] オプションが選択されていることを確認します。

アプリがデバッグ構成 (デバッガーがアタッチされた状態) で実行されたら、Visual Studio メニュー バー (Windows > Live ビジュアル ツリー>のデバッグ) に移動します。 これにより、[ライブ ビジュアル ツリー] ウィンドウが開き、XAML コードがリアルタイムで表示されます。

既定では、ライブ ビジュアル ツリーの [マイ XAML のみ] オプションが選択されています。 これにより、アプリ内の XAML 要素コレクションの簡略化されたビューが提供され、次の図に示すように、[マイ XAML のみを表示] ボタンを使用して、オンまたはオフを切り替えることができます。

ライブ ビジュアル ツリーの機能

Live Visual Tree ツール バーには、実行時にアプリケーションの UI を通じて調べる要素を選択するためのいくつかのオプションが用意されています。

• 実行中のアプリケーションの要素を選択します。 このモードをオンにすると、アプリケーションで UI 要素を選択すると、ライブ ビジュアル ツリーが自動的に更新され、その要素に対応するツリー内のノードとそのプロパティが表示されます。

  

• 実行中のアプリケーションでレイアウトの装飾を表示します。 このモードをオンにすると、アプリケーション ウィンドウには、選択したオブジェクトの境界に沿った水平線と垂直線が表示され、その余白の輪郭を示す四角形が表示されます。

  

• 選択のプレビュー。 このモードをオンにすると、要素が宣言されている XAML が Visual Studio に表示されます (アプリケーションのソース コードにアクセスできる場合)。

  

Spy++

Spy++ (SPYXX.EXE) は、Visual Studio に付属の Win32 ベースのユーティリティで、システムのプロセス、スレッド、ウィンドウ、およびウィンドウ メッセージのグラフィカル ビューを提供します。

Spy++ をいつ使用するか

クラシック Win32 アプリケーションをビルドする場合、または Win32 API を使用して UI 要素 (WinForms や クラシック Visual Basic アプリなど) を描画する場合に、Spy++ を使用します。

注

.NET Framework アプリの場合、Spy++ によってインターセプトされるウィンドウ メッセージとクラスはマネージド イベントやプロパティ値に対応しないため、Spy++ の有用性は限定されます。

Spy++ の使用方法

Spy++ は、Visual Studio または Visual Studio の開発者コマンド プロンプトから起動できます。

Visual Studio から Spy++ を起動するには:

• Visual Studio のインストールに、C++ によるデスクトップ開発ワークロードの C++ コア デスクトップ機能コンポーネントが含まれていることを確認します。 (Visual Studio 2022 では既定でインストールされます。)
• インストールすると、[ツール] メニューから Spy++ を使用できます。
• Spy++ は Visual Studio とは独立して実行されるため、不要になった場合は終了することができます。

Visual Studio の開発者コマンド プロンプトから Spy++ を起動するには:

• Windows の [スタート] メニューから、Visual Studio 用開発者コマンド プロンプトを開きます。
• コマンド プロンプトで、spyxx.exe (64 ビット バージョンの場合は spyxx_amd64.exe) と入力し、Enter キーを押します。

Visual Studio から Spy++ を使用する方法の詳細については、「Spy++ ツール バー」を参照してください。

Spy++ の機能

Spy++ は、システム オブジェクト間の関係のグラフィカル ツリーを表示します。ツリーの最上部には現在のデスクトップ ウィンドウがあり、標準のウィンドウ階層に従ってリストされた他のすべてのウィンドウを表す子ノードが表示されます。 これにより、Visual C++ デバッガーでは得られない、アプリケーションの動作に関する貴重な分析情報が得られます。

Spy++ では、次のことができます。

• 指定した ウィンドウ、 スレッド、プロセス、またはメッセージを検索します。
• 選択したスレッド プロセス、またはメッセージのプロパティを表示します。
• ツリー ビューでウィンドウ、スレッド、プロセス、またはメッセージを直接選択します。
• Finder ツールを使用して、マウス ポインターを使用してウィンドウを選択します (検索 -> ウィンドウの検索)。
• 複雑なメッセージ ログ選択パラメーターを使用して、メッセージ オプションを設定します。

Spy++ のドキュメントについては、Spy++ のヘルプを参照してください。

Accessibility Insights for Windows - ライブ検査

Accessibility Insights for Windows - ライブ検査は、開発者がUI オートメーションをサポートする Windows アプリのアクセシビリティの問題を見つけて修正するのに役立つ、ダウンロード可能な Microsoft アプリケーションです。 これは、開発者が要素の上にマウスを置くか、要素にキーボード フォーカスを設定するだけで、アプリ内の要素に正しい UI オートメーション プロパティがあることを確認するのに役立ちます。

Accessibility Insights - ライブ検査を使用する場合

Live Inspect は、通常、Live Visual Tree と組み合わせて使用されます。 Spy++ などのツールは、Windows アプリ SDKでWinUI、UWP、、WPF、.NET MAUI、WinForms、またはデスクトップ用ネイティブ React Native でWinUI 2 を使用してアプリをビルドする場合に使用します。

Accessibility Insights - ライブ検査の使用方法

Accessibility Insights は、「Accessibility Insights のダウンロード」からダウンロードしてインストールする必要があります。

Accessibility Insights の機能 - ライブ検査

ライブ検査は、選択した要素に対応する UI オートメーション プロパティとパターンを含む詳細ペインを備えたシステム オブジェクト間の関係のグラフィカル ツリーを表示します。 現在のデスクトップ ウィンドウはツリーの最上部に表示され、子ノードは標準のウィンドウ階層に従ってリストされた他のすべてのウィンドウを表します。

ライブ検査を使用すると、次のことが可能になります。

• 要素の上にマウスを置くか、要素にキーボード フォーカスを設定するだけで、アプリ内の要素に適切な UI オートメーション プロパティがあることを確認できます。
• ターゲット アプリケーション内の要素を視覚的に強調表示します。
• 多数のアクセシビリティ ルールやガイドラインへの準拠を手動または自動でチェックして、コントロールやパターンをテストします。

UI オートメーションの詳細については、「UI オートメーションの概要」を参照してください。

Accessibility Insights の詳細については、「Accessibility Insights for Windows」を参照してください。

Windows 用 Chromium UI DevTools

Chromium UI DevTools for Windows は、フロントエンド DevTools Inspector を使用して Web ページのように UI システムを検査できる Google のツールです。

Chromium UI DevTools for Windows を使用する場合

プログレッシブ Web アプリや Electron デスクトップ アプリを含む Chromium プロジェクトを開発している場合は、Chrome UI DevTools を使用します。 Electron の詳細については、GitHub の「DevTools 拡張機能」を参照してください。

Chromium UI DevTools for Windows の使用方法

Windows コードベース用の Chromium UI DevTools は GitHub からダウンロードして、Visual Studio でビルドする必要があります。 詳細については、UI DevTools ツールの概要に関するページを参照してください。

Chromium UI DevTools for Windows の機能

Chromium UI DevTools for Windows では、Web ページ フロントエンドを使用して、ビュー、ウィンドウ、およびその他の UI 要素を表示および走査します。

Chromium UI DevTools for Windows を使用すると、次のことができます。

• 階層 UI 要素ツリーを使用して、UI 要素とそのプロパティを検査します。
• 検査モードを使用すると、UI 要素の上にマウスを置くとその要素が強調表示され、UI 要素ツリー内の要素のノードが表示されます。
• [要素] パネルを使用して検索バーを開き、名前、タグ、スタイルのプロパティを使用して UI 要素ツリー内の要素を検索します。
• [ソース] パネルを使用して、Chromium コード検索でクラス ヘッダー ファイルを開き、ローカル ファイルからコードを取得します。

関連するコンテンツ