---
title: 知っているとちょっと便利なセレクターの基礎知識
tags:  #power automate for desktop #pad #pa4d  
author: [きぬあさ](https://www.docswell.com/user/kinuasa)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/4L7322M2E5.jpg?width=480
description: 「Power Automate for desktop 最新情報＆ライブデモを堪能！」(RPACommunity主催)の登壇資料です。 (2022年6月7日オンライン開催)
published: June 07, 22
canonical: https://www.docswell.com/s/kinuasa/KYQ4N5-20220607-RPALT
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/4L7322M2E5.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/V87DZZ66JG.jpg)

セレクターの基礎知識①


# Page. 3

![Page Image](https://bcdn.docswell.com/page/4VJPDYZZJ8.jpg)

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


# Page. 4

![Page Image](https://bcdn.docswell.com/page/L2EV1GWMJQ.jpg)

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


# Page. 5

![Page Image](https://bcdn.docswell.com/page/Z57G28DX7L.jpg)

2022/6/7
#RPALT
5


# Page. 6

![Page Image](https://bcdn.docswell.com/page/V4EQP915JP.jpg)

2022/6/7
#RPALT
6


# Page. 7

![Page Image](https://bcdn.docswell.com/page/DKJ4YXRVE1.jpg)

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


# Page. 8

![Page Image](https://bcdn.docswell.com/page/PLE16NQ4JG.jpg)

• 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


# Page. 9

![Page Image](https://bcdn.docswell.com/page/8GEWW4MZE2.jpg)

セレクターの基礎知識②


# Page. 10

![Page Image](https://bcdn.docswell.com/page/W47Z52QLE3.jpg)

DEMO
2022/6/7
#RPALT
10


# Page. 11

![Page Image](https://bcdn.docswell.com/page/KYJ69V6MJV.jpg)

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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/5GJ5ND6QE4.jpg)

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


# Page. 13

![Page Image](https://bcdn.docswell.com/page/V9E258MWER.jpg)

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


# Page. 14

![Page Image](https://bcdn.docswell.com/page/5D7YK6X9JM.jpg)

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


# Page. 15

![Page Image](https://bcdn.docswell.com/page/2VENRZ1D78.jpg)

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


# Page. 16

![Page Image](https://bcdn.docswell.com/page/GY79MZ58E3.jpg)

2022/6/7
#RPALT
16


# Page. 17

![Page Image](https://bcdn.docswell.com/page/5G78L1YZED.jpg)

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


# Page. 18

![Page Image](https://bcdn.docswell.com/page/ML7LLQ417R.jpg)

セレクターの基礎知識③


# Page. 19

![Page Image](https://bcdn.docswell.com/page/54EMM1K5EW.jpg)

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


# Page. 20

![Page Image](https://bcdn.docswell.com/page/ZPERVLXZ79.jpg)

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


# Page. 21

![Page Image](https://bcdn.docswell.com/page/NP7XZW61EX.jpg)

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


# Page. 22

![Page Image](https://bcdn.docswell.com/page/637K8V1MED.jpg)

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


# Page. 23

![Page Image](https://bcdn.docswell.com/page/4LJ32MQ275.jpg)

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


# Page. 24

![Page Image](https://bcdn.docswell.com/page/V8JDZ696EG.jpg)

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


# Page. 25

![Page Image](https://bcdn.docswell.com/page/4VEPDY9ZE8.jpg)

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


# Page. 26

![Page Image](https://bcdn.docswell.com/page/L27V1GMMEQ.jpg)

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


# Page. 27

![Page Image](https://bcdn.docswell.com/page/Z5JG28GXJL.jpg)

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


# Page. 28

![Page Image](https://bcdn.docswell.com/page/V47QP9X5EP.jpg)

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


# Page. 29

![Page Image](https://bcdn.docswell.com/page/DKE4YX6V71.jpg)

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


# Page. 30

![Page Image](https://bcdn.docswell.com/page/PL716NV4EG.jpg)

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


# Page. 31

![Page Image](https://bcdn.docswell.com/page/8G7WW4LZ72.jpg)

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


# Page. 32

![Page Image](https://bcdn.docswell.com/page/W4JZ52ML73.jpg)

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


# Page. 33

![Page Image](https://bcdn.docswell.com/page/KYE69VNMEV.jpg)

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


# Page. 34

![Page Image](https://bcdn.docswell.com/page/5GE5ND5Q74.jpg)

セレクターの基礎知識④


# Page. 35

![Page Image](https://bcdn.docswell.com/page/V97258NW7R.jpg)

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


# Page. 36

![Page Image](https://bcdn.docswell.com/page/5DJYK6P9EM.jpg)

DEMO
2022/6/7
#RPALT
36


# Page. 37

![Page Image](https://bcdn.docswell.com/page/2V7NRZ5DJ8.jpg)

2022/6/7
#RPALT
37


# Page. 38

![Page Image](https://bcdn.docswell.com/page/GYJ9MZY873.jpg)

2022/6/7
#RPALT
38


# Page. 39

![Page Image](https://bcdn.docswell.com/page/5GJ8L16Z7D.jpg)

2022/6/7
#RPALT
39


# Page. 40

![Page Image](https://bcdn.docswell.com/page/MLJLLQ91JR.jpg)

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


# Page. 41

![Page Image](https://bcdn.docswell.com/page/547MM1Z57W.jpg)

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


# Page. 42

![Page Image](https://bcdn.docswell.com/page/ZP7RVL6ZJ9.jpg)

> 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


# Page. 43

![Page Image](https://bcdn.docswell.com/page/NPJXZWM17X.jpg)

2022/6/7
#RPALT
43


# Page. 44

![Page Image](https://bcdn.docswell.com/page/63JK8VGM7D.jpg)

まとめ


# Page. 45

![Page Image](https://bcdn.docswell.com/page/4LE32MN2J5.jpg)

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


# Page. 46

![Page Image](https://bcdn.docswell.com/page/V8EDZ6W67G.jpg)

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


# Page. 47

![Page Image](https://bcdn.docswell.com/page/4V7PDYXZ78.jpg)

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


# Page. 48

![Page Image](https://bcdn.docswell.com/page/L2JV1GLM7Q.jpg)

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


# Page. 49

![Page Image](https://bcdn.docswell.com/page/Z5EG28XXEL.jpg)

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


# Page. 50

![Page Image](https://bcdn.docswell.com/page/V4JQP9857P.jpg)

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