56.4K Views
June 07, 22
スライド概要
「Power Automate for desktop 最新情報&ライブデモを堪能!」(RPACommunity主催)の登壇資料です。
(2022年6月7日オンライン開催)
知っているとちょっと便利な セレクター の基礎知識 @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
セレクターとは? 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
Accessibility Insightsのインストール(1) https://accessibilityinsights.io/downloads/ 2022/6/7 #RPALT 23
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
セレクターの基礎知識④
電卓の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/make-editing-ui2022/6/7 #RPALT 48 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
プレゼンに使用したツール 1. ZoomIt 2. Kokomite 3. Open Broadcaster Software(OBS) 4. VTube Studio • モデル:よく動くペンギン 千鳥もなかさん( @ChestnutMonaca )作 2022/6/7 #RPALT 50