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

53.1K Views

June 07, 22

スライド概要

「Power Automate for desktop 最新情報&ライブデモを堪能!」(RPACommunity主催)の登壇資料です。
(2022年6月7日オンライン開催)

profile-image

きぬあさと申します。 VBAやOffice スクリプト、Power Automate for desktop等について情報発信しております。

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

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

2.

セレクターの基礎知識①

3.

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

4.

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

5.

2022/6/7 #RPALT 5

6.

2022/6/7 #RPALT 6

7.

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

8.

• 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

9.

セレクターの基礎知識②

10.

DEMO 2022/6/7 #RPALT 10

11.

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

12.

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

13.

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

14.

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

15.

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

16.

2022/6/7 #RPALT 16

17.

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

18.

セレクターの基礎知識③

19.

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

20.

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

21.

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

22.

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

23.

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

24.

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

25.

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

26.

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

27.

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

28.

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

29.

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

30.

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

31.

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

32.

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

33.

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

34.

セレクターの基礎知識④

35.

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

36.

DEMO 2022/6/7 #RPALT 36

37.

2022/6/7 #RPALT 37

38.

2022/6/7 #RPALT 38

39.

2022/6/7 #RPALT 39

40.

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

41.

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

42.

> 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

43.

2022/6/7 #RPALT 43

44.

まとめ

45.

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

46.

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

47.

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 より

48.

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 より

49.

参考資料 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

50.

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