基本から学ぶ「セレクター」

RPACommunity 基本から学ぶ「セレクター」 2025.7.29

登壇者紹介 ◼ 中小企業の情シス担当 ◼ ブ ロ グ や S N S で V B A や P o we r A u t o m a t e f o r d e s k t o p の 情報を発信 Power Automate for desktop 支部主催 きぬあさ ➢ https://note.com/kinuasa/ ➢ https://www.ka-net.org/blog/ ➢ https://x.com/kinuasa ◼ RPALT等のコミュニティで登壇経験多数あり ◼ Q&Aフォーラムでの回答経験多数あり ◼ ちいかわで好きなキャラクターはハチワレ

• https://note.com/kinuasa/
• https://www.ka-net.org/blog/
• https://x.com/kinuasa

注意事項 1. 本セッションではPower Automate for desktopのことをPADと略します。 2. 本セッションの資料はPAD バージョン 2.58 に基づいて作成しています。今後のバージョンアップによって 画面等が変更される可能性があります。 3. 本セッションの資料は「Power Fx が有効」オプションがオフ前提になっています。 4. 本日の資料はセッション終了後に公開予定です。イベントページから資料一覧をご確認ください。 3

• https://rpacommunity.connpass.com/event/362960/
• https://rpacommunity.connpass.com/event/362960/presentation/

セレクターの基礎知識

セレクターの基礎知識：UI 要素とは？ • PADにおける「UI 要素」(ユーザーインターフェース要素)とは、アプリケーショ ンやWebページ内の操作対象となる部品のこと。 ➢ ボタン、テキストボックス、チェックボックスなど。 • 【参考】カスタム セレクターを作成 https://learn.microsoft.com/ja-jp/power-automate/desktop-flows/build- custom-selectors?WT.mc_id=M365-MVP-4029057 5

• https://learn.microsoft.com/ja-jp/power-automate/desktop-flows/build-custom-selectors?WT.mc_id=M365-MVP-4029057

セレクターの基礎知識：デスクトップ UI 要素とWeb UI 要素の違い • PADでは、ローカルで動作するデスクトップアプリケーション(電卓やメモ 帳など)のUI 要素を対象とした「デスクトップ UI 要素」とChromeやEdge といったブラウザー上で表示されるWebページのUI 要素を対象とする 「Web UI 要素」の2種類をサポートする。 • 【参考】 UI 要素を使用して自動化する https://learn.microsoft.com/ja-jp/power-automate/desktop-flows/uielements?WT.mc_id=M365-MVP-4029057 6

• https://learn.microsoft.com/ja-jp/power-automate/desktop-flows/ui-elements?WT.mc_id=M365-MVP-4029057

セレクターの基礎知識：セレクターとは？ • PADにおける「セレクター」とは、特定のUI 要素を識別するための情報のこと。 • アプリケーションやWebページ上の要素を操作する際に、どの要素に対してアク ションを実行するかを正確に指定するために使用される。 セレクターはUI 要素を正確に識別するための 「住所」のようなものです。 7

セレクターの基礎知識：デスクトップ セレクターとWeb セレクターの違い • PADでは、デスクトップUI 要素を取得・操作するための「デスクトップ セ レクター」とWeb UI 要素を取得・操作するための「Web セレクター」の2 種類をサポートする。 • それぞれ異なる仕組み(UIAとDOM)を使ってUI 要素を識別する。 • 目的や基本構文は類似しているが、使用可能な属性等の違いがある。 8

セレクターの基礎知識：UI 要素とセレクターはどこで確認できる？(1) 9

セレクターの基礎知識： UI 要素とセレクターはどこで確認できる？(2) 10

セレクターの基礎知識： UI 要素とセレクターはどこで確認できる？(3) セレクターを視覚的に 確認・編集できる。 ＜セレクター ビルダー・ビジュアル エディター＞ 11

セレクターの基礎知識： UI 要素とセレクターはどこで確認できる？(4) セレクターをテキストベースで 確認・編集できる。 ＜セレクター ビルダー・テキスト エディター＞ 12

セレクターの基礎知識： UI 要素とセレクターはどこで確認できる？(5) > window[Class="Windows.UI.Core.CoreWindow"][Name="電卓"] > … > button[Class="Button"][Id="num5Button"] セレクターはUI 要素を識別するための情報と 説明しましたが、より詳しく言うと特定のUI 要素を識別するための「条件式」がセレクター となります。 13

セレクターを学ぶために

セレクターを学ぶために：きぬあさ的オススメの学習環境 • 電卓、メモ帳アプリ(Windows標準)＆UI 要素ピッカー(PAD組み込み) 15

セレクターを学ぶために：電卓の「5」ボタンをUI 要素として追加 • 電卓起動 → UI 要素の追加 → UI 要素ピッカー → Ctrlキーを押しながら 「5」ボタンをクリック 16

セレクターを学ぶために：UI 要素の動作確認 • 「ウィンドウの UI 要素の上にマウス ポインターを移動する」アクションを 使って追加したUI 要素に問題がないことを確認。 17

セレクターを学ぶために：「5」ボタンのセレクターを確認する • 「UI 要素」から「5」ボタンをダブルクリック →セレクター ビルダー (ビジュアル エディター)実行 → 「セレクターをプレビューする」 ※ セレクターはOSのバージョンやアプリケーションのバージョンといった環境の違いによって異なる 可能性があります。 18

セレクターを学ぶために：UI 要素ピッカーによるUI 要素の調査(1) • 「ツール」メニュー → UI 要素を調査する → UI 要素ピッカー → 「5」ボタ ン上で右クリック → UI 要素を調査する 19

セレクターを学ぶために： UI 要素ピッカーによるUI 要素の調査(2) UI 要素ピッカーに「5」ボタンのUI 要素が表示され、UI 要素が階層構造 になっていることが確認できます。 20

セレクターを学ぶために：UI 要素とセレクターを見比べる(1) 21 「属性」と「値」に注目

セレクターを学ぶために：UI 要素とセレクターを見比べる(2) 22

セレクターを学ぶために：UI 要素とセレクターを見比べる(3) 23

セレクターを学ぶために：UI 要素とセレクターを見比べる(4) 24

セレクターを学ぶために：UI 要素とセレクターを見比べる(5) 25

セレクターを学ぶために：UI 要素とセレクターを見比べる(6) ①「Windows.UI.Core.CoreWindow」が値である 「Class」属性と②「電卓」が値である「Name」属性を 持つ、「window」要素であることが分かります。 26

セレクターを学ぶために：UI 要素とセレクターを見比べる(7) 要素 属性 27 属性値 window[Class="Windows.UI.Core.CoreWindow"][Name="電卓"] > custom[Id="NavView"] > … 要素 属性 属性値 1. window[...] • 「ウィンドウ」要素(アプリケーションのウィンドウ) 2. [Class="Windows.UI.Core.CoreWindow"] • Class属性の値が「Windows.UI.Core.CoreWindow」であることを示す。 複数の属性を組み合わせる ことでUI 要素を特定している。 3. [Name="電卓"] • Name属性の値が「電卓」であることを示す。 4. > • 親子関係(直下の階層)を示す構文 • この場合window要素の下にcustom要素があることを示す。

セレクターで使える演算子

セレクターで使える演算子：メモ帳のウィンドウをUI 要素として追加 • メモ帳起動 → 「Test.txt」を開く → UI 要素の追加 → UI 要素ピッカー → Ctrlキーを押しながらメモ帳のウィンドウをクリック 29

セレクターで使える演算子：UI 要素の動作確認 • 「ウィンドウの UI 要素の上にマウス ポインターを移動する」アクションを 使って追加したUI 要素に問題がないことを確認。 30

セレクターで使える演算子：メモ帳のウィンドウのセレクターを確認する 1. :desktop • 最上位の親となる要素(ルート要素) • デスクトップ UI 要素の場合はデスクトップがルート要素となる。 2. window[...] • 「ウィンドウ」要素(アプリケーションのウィンドウ) • ここでは“デスクトップの直下にある window 要素”を指す。 3. [Name="Test.txt - メモ帳"] • Name属性の値が「Test.txt - メモ帳」であることを示す。 → ウィンドウ上部のタイトルバーに表示されるタイトルが「Test.txt - メモ帳」と一致するウィンドウ 4. [Process="Notepad"] • Process属性の値が「Notepad」であることを示す → このウィンドウの実行プロセス名は Notepad.exe (メモ帳)である。 31

セレクターで使える演算子：文字入力後にUI 要素の動作確認(1) • テキストファイルに適当に1文字入力した後、再度「ウィンドウの UI 要素の 上にマウス ポインターを移動する」アクションを実行。 32

セレクターで使える演算子：文字入力後にUI 要素の動作確認(2) • 「要素をポイントできません (ウィンドウが見つかりません)」エラーが発生 してアクションの実行に失敗する。 33

セレクターで使える演算子：文字入力後にUI 要素の動作確認(3) • 「UI 要素を調査する」(UI 要素ピッカー)でエラーになった原因を調査する。 34

セレクターで使える演算子：文字入力後にUI 要素の動作確認(4) • 文字入力前のUI 要素と文字入力後のUI 要素を比較すると原因が分かる。 ＜文字入力前のwindow要素＞ ＜文字入力後のwindow要素＞ 35

セレクターで使える演算子：文字入力後にUI 要素の動作確認(5) Name属性の値が異なっている。 ＜文字入力前のwindow要素＞ ＜文字入力後のwindow要素＞ 36

セレクターで使える演算子：エラーになった原因はセレクター 文字入力後はテキストの内容に変更があったことでウィンドウの タイトル(Name属性の値)が「*Test.txt - メモ帳」となり、 元のセレクターで指定されている値「Test.txt - メモ帳」とは異なる 値であったため、UI 要素を特定できずにエラーとなりました。 ＜文字入力後のwindow要素＞ 37

セレクターで使える演算子：フローが動くようにセレクターを修正する(1) • セレクター ビルダー(ビジュアル エディター)でメモ帳(window要素)のセレ クターを表示する。 「演算子」に注目 38

セレクターで使える演算子：フローが動くようにセレクターを修正する(2) • 演算子は「と等しい」以外にも用意されており、状況に応じて使い分ける ことができる。 今回の場合は「含む」が使えそう。 39

セレクターで使える演算子：フローが動くようにセレクターを修正する(3) • 演算子を「含む」に変更し、値を「Test.txt」に変更すると、セレクターの内容も 変更される。 ＜元のセレクター＞ ＜演算子を変更した後のセレクター＞ 40

セレクターで使える演算子：文字入力後にUI 要素の動作確認(4) • セレクター変更後、再度「ウィンドウの UI 要素の上にマウス ポインターを 移動する」アクションを実行 → 問題なく実行される。 41

セレクターで使える演算子 42 と等しい window[Name="メモ帳"] と等しくない window[Name!="メモ帳"] 含む window[Name*="メモ帳"] 次の値で開始 window[Name^="メモ帳"] 次の値で終わる window[Name$="メモ帳"] 正規表現一致 window[Name@="メモ帳"]

セレクター内で変数を使用する

セレクター内で変数を使用する：変数を使用した動的セレクター • セレクター内で変数を使用することもできる。 %WindowName%(値：Test.txt - メモ帳) 44

セレクター内で変数を使用する：ビジュアル エディターの注意点(1) • ビジュアル エディターの場合は「と等しい」演算子のみサポート 「と等しい」以外の演算子を指定するとエラー発生 【参考】カスタム セレクターでの変数の使用 https://learn.microsoft.com/ja-jp/power-automate/desktop-flows/build-customselectors?WT.mc_id=M365-MVP-4029057#use-variables-in-a-custom-selector 45

• https://learn.microsoft.com/ja-jp/power-automate/desktop-flows/build-custom-selectors?WT.mc_id=M365-MVP-4029057#use-variables-in-a-custom-selector

セレクター内で変数を使用する：ビジュアル エディターの注意点(2) • 「テキスト エディター」に切り替えればエラーが発生しなくなる。 「%WindowName%(値：Test.txt)を “含む” Name属性」 といった指定が可能 46

セレクター内で変数を使用する：変数を活用して電卓の1～9ボタンをクリックする(1) 数字ボタン Id属性の値 1 num1Button 2 num2Button 3 num3Button 4 num4Button 5 num5Button 6 num6Button 7 num7Button 8 num8Button 9 num9Button 47 Id属性の値が 数字以外の部分は共通 変数が使えそう！

セレクター内で変数を使用する：変数を活用して電卓の1～9ボタンをクリックする(2) 1. 「Loop」アクションで変数%LoopIndex%の値を1から9まで1ずつ増やす。 2. 「button[Id=“num%LoopIndex%Button”]」のように、セレクターの数字 部分を変数に置き換える。 3. 「ウィンドウ内のボタンを押す」アクションでボタンをクリックする。 48

セレクター内で変数を使用する：変数を活用して電卓の1～9ボタンをクリックする(3) 49

その他

UI 要素のテスト • セレクター ビルダーにはUI 要素のテストができる「テスト」機能も搭載 「ウィンドウの UI 要素の上にマウス ポインター を移動する」等のアクションで動作確認しなくて も大丈夫！ 51

Copilot による修復(Repair with Copilot)機能(1) ※プレビュー段階の機能 52 • UI 要素が見つからずにフローの実行が失敗した際、Copilotによって必要な UI 要素のセレクターを検索して修正する機能。 Copilotにより修正 されたセレクターが 表示 クラウド フローからデスクトップ フローを実行

Copilot による修復(Repair with Copilot)機能(2) ※プレビュー段階の機能 • 動画： https://www.youtube.com/watch?v=XCuO1cqL0Js • 資料： https://note.com/kinuasa/n/n3888aa2814cb 53

• https://www.youtube.com/watch?v=XCuO1cqL0Js
• https://note.com/kinuasa/n/n3888aa2814cb

本日のまとめ

本日のまとめ 1. UI 要素はアプリケーションやWebページ内の操作対象となる部品、階層構造になっている。 2. セレクターはUI 要素を識別するための条件式 3. 「演算子」を活用して柔軟に条件を指定することが可能 4. セレクター内で変数を使用することも可能 5. きぬあさ的オススメの学習環境は電卓、メモ帳アプリ＆UI 要素ピッカー ➢ UI 要素ピッカーはUI 要素の取得だけでなく調査も可能 55