知っているとちょっと便利なセレクターの基礎知識

知っているとちょっと便利な セレクター の基礎知識 @kinuasa Tuesday, June 7, 2022 RPALT

セレクターの基礎知識①

UI 要素とは？ UI 要素：ボタンやテキストボックスなどのアプリケーションの部品 “Consider UI elements as application components, such as buttons and text fields.” https://docs.microsoft.com/en-us/power-automate/desktop-flows/build-custom-selectors?WT.mc_id=M365MVP-4029057 より 2022/6/7 #RPALT 3

• https://docs.microsoft.com/en-us/power-automate/desktop-flows/build-custom-selectors?WT.mc_id=M365-MVP-4029057

セレクターとは？ 2022/6/7 #RPALT 4

2022/6/7 #RPALT 5

2022/6/7 #RPALT 6

デスクトップ 属性 属性値 :desktop > window[Name="03"][Process="explorer"] 要素 セレクターは“要素を指定するための条件式”です。 • 通常デスクトップを親とする階層構造、「>」は直下の要素を 示すもの。 • 属性：対象要素に性質を与える役割、どのような属性がある のかは要素によって異なる。 2022/6/7 #RPALT 7

• Name：01 • Process：explorer desktop window • ・・・ • Name：02 • Process：explorer window • ・・・ • Name：03 • Process：explorer window • ・・・ • Name：04 • Process：explorer window 2022/6/7 #RPALT • ・・・ 8

セレクターの基礎知識②

DEMO 2022/6/7 #RPALT 10

メモ帳のバージョン情報を表示するフローです。 2022/6/7 #RPALT 11

文章を編集した後にフローは動くでしょうか？ 2022/6/7 #RPALT 12

フローが動かなくなった原因は セレクターを見ればわかります。 2022/6/7 #RPALT 13

ウィンドウの名前が違っている❗ 2022/6/7 #RPALT 14

演算子を活用して条件に合うように 変更すれば良い✨ 2022/6/7 #RPALT 15

2022/6/7 #RPALT 16

セレクターの演算子リスト と等しい window[Name="メモ帳"] と等しくない window[Name!="メモ帳"] 含む window[Name*="メモ帳"] 次の値で開始 window[Name^="メモ帳"] 次の値で終わる window[Name$="メモ帳"] 正規表現一致 window[Name@="メモ帳"] 2022/6/7 #RPALT 17

セレクターの基礎知識③

アプリケーションのUI要素の構成(例：電卓) 2022/6/7 #RPALT 19

1. > window[Class="Windows.UI.Core.CoreWindow"][Name="電卓"] 2. > custom[Id="NavView"] 3. > group[Class="LandmarkTarget"] 4. > group[Class="NamedContainerAutomationPeer"][Id="NumberPad"] 5. > button[Class="Button"][Id="num5Button"] 2022/6/7 #RPALT 20

Accessibility Insights のインストールと使い方

Accessibility Insightsとは？ 「Accessibility Insights」は、アプリケーションの ユーザーインターフェイスをアクセシビリティの面から 監査し、一般的なユーザー補助の問題を指摘してくれ る無償ツール。 https://forest.watch.impress.co.jp/docs/news/ 1174814.html より UI要素の調査ができる 2022/6/7 #RPALT 22

• https://forest.watch.impress.co.jp/docs/news/1174814.html

Accessibility Insightsのインストール(1) https://accessibilityinsights.io/downloads/ 2022/6/7 #RPALT 23

• https://accessibilityinsights.io/downloads/

Accessibility Insightsのインストール(2) 2022/6/7 #RPALT 24

Accessibility Insightsのインストール(3) 2022/6/7 #RPALT 25

Accessibility Insightsのインストール(4) 2022/6/7 #RPALT 26

Accessibility Insightsのインストール(5) 2022/6/7 #RPALT 27

Accessibility Insightsのインストール(6) 2022/6/7 #RPALT 28

Accessibility Insightsのインストール(7) 2022/6/7 #RPALT 29

表示する属性の設定(1) 2022/6/7 #RPALT 30

表示する属性の設定(2) Name, AutomationId, ClassName, ProcessId, ControlType あたりを 表示しておくのがオススメ❗ 2022/6/7 #RPALT 31

UI要素の調べ方 ②Pauseを解除 ①Live Inspectモードを選択 ③調べたい要素上にカーソルを持っていく ④属性と属性値が表示される 2022/6/7 #RPALT 32

類似ツール：Inspect(Inspect.exe) • Accessibility tools – Inspect ※Windows SDK付属 2022/6/7 #RPALT 33

• https://docs.microsoft.com/ja-jp/windows/win32/winauto/inspect-objects?WT.mc_id=M365-MVP-4029057
• https://developer.microsoft.com/ja-jp/windows/downloads/sdk-archive/

セレクターの基礎知識④

電卓の1～9ボタンをクリックするフローは どのようなフローになるでしょうか？ 2022/6/7 #RPALT 35

DEMO 2022/6/7 #RPALT 36

2022/6/7 #RPALT 37

2022/6/7 #RPALT 38

2022/6/7 #RPALT 39

セレクターに変数を使うことで 工程を減らすことができます✨ 2022/6/7 #RPALT 40

カスタムセレクタービルダーでは セレクター内で変数を使用できます。 2022/6/7 #RPALT 41

> window[Class="Windows.UI.Core.CoreWindow"][Name="電卓"] > custom[Id="NavView"] > group[Class="LandmarkTarget"] > group[Class="NamedContainerAutomationPeer"][Id="NumberPad"] > button[Class="Button"][Id="num%LoopIndex%Button"] セレクターに変数を使用 2022/6/7 #RPALT 42

2022/6/7 #RPALT 43

まとめ

本日のまとめ 1. セレクターは“要素を選択するための条件式” 2. ツリー構造になっている要素を属性で指定 3. 「演算子」を活用すれば柔軟に要素を指定できる。 4. セレクター内で変数を使用することでより柔軟に要素を指定できる。 • 例：連番になっている要素、ユーザー名や日付が含まれるタイトルのウィンドウ など 5. 「Accessibility Insights」や「Inspect」といったツールで要素の構造を確認 できる。 2022/6/7 #RPALT 45

予定されているセレクター周りの アップデート

https://docs.microsoft.com/ja-jp/power-platform-release-plan/2022wave1/power-automate/ui-elements-now2022/6/7 #RPALT 47 generate-two-selectors-one-ui-element-when-capturing?WT.mc_id=M365-MVP-4029057 より

• https://docs.microsoft.com/ja-jp/power-platform-release-plan/2022wave1/power-automate/ui-elements-now-generate-two-selectors-one-ui-element-when-capturing?WT.mc_id=M365-MVP-4029057

https://docs.microsoft.com/ja-jp/power-platform-release-plan/2022wave1/power-automate/make-editing-ui2022/6/7 #RPALT 48 elements-more-user-friendly?WT.mc_id=M365-MVP-4029057 より

• https://docs.microsoft.com/ja-jp/power-platform-release-plan/2022wave1/power-automate/make-editing-ui-elements-more-user-friendly?WT.mc_id=M365-MVP-4029057

参考資料 1. UI オートメーション 2. UI 要素とコントロール 3. カスタム セレクターの作成 4. Introduction to Accessibility Insights for Windows – YouTube 5. Inspect in Accessibility Insights for Windows 6. [PA4d]なかなか取れないUI要素を直接書く方法（Accessibility Insights for Windows） 2022/6/7 #RPALT 49

• https://docs.microsoft.com/ja-jp/power-automate/desktop-flows/actions-reference/uiautomation?WT.mc_id=M365-MVP-4029057
• https://docs.microsoft.com/ja-jp/power-automate/desktop-flows/ui-elements?WT.mc_id=M365-MVP-4029057
• https://docs.microsoft.com/ja-jp/power-automate/desktop-flows/build-custom-selectors?WT.mc_id=M365-MVP-4029057
• https://www.youtube.com/watch?v=BIu9ONdMGGg
• https://accessibilityinsights.io/docs/windows/getstarted/inspect/
• https://asahi-robo.jp/2022/04/12/pad-accessibility-insights/

プレゼンに使用したツール 1. ZoomIt 2. Kokomite 3. Open Broadcaster Software（OBS） 4. VTube Studio • モデル：よく動くペンギン 千鳥もなかさん( @ChestnutMonaca )作 2022/6/7 #RPALT 50

• https://docs.microsoft.com/ja-jp/sysinternals/downloads/zoomit
• http://www.orangemaker.sakura.ne.jp/product/Kokomite/
• https://store.steampowered.com/app/1325860/VTube_Studio/
• https://nizima.com/Item/DetailItem/40527
• https://twitter.com/ChestnutMonaca