Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Power Automate Desktop のUI 要素とセレクタービルダーっていいよね
Search
maekawa
March 30, 2021
Technology
0
7.7k
Power Automate Desktop のUI 要素とセレクタービルダーっていいよね
2021年3月28日に開催されたPower Automate Desktop 勉強会 Vol.2 の登壇資料です。
maekawa
March 30, 2021
Tweet
Share
More Decks by maekawa
See All by maekawa
B11-SharePoint サイトのストレージ管理を考えよう
maekawa123
0
220
SharePoint 監査ログ勉強会
maekawa123
1
1.1k
Viva Connections の新しいエクスペリエンス
maekawa123
0
180
Power Automate と Power Automate for desktop の使い分けを考える
maekawa123
0
4.3k
Power Automate for desktop 初のクラウドアクション SharePoint アクションを解説
maekawa123
0
150
Power Automate for desktop の利用や管理にまつわるギモンへの1問3答
maekawa123
1
1.5k
Power Automate Desktopの社内展開において押さえておきたい管理機能 3選 + α
maekawa123
0
3.9k
Power Automate Desktop を野良化させないためのアプローチを考えてみた
maekawa123
1
3.2k
Power Automate Desktop 勉強会 - はじまりの会とPADとは
maekawa123
0
2.6k
Other Decks in Technology
See All in Technology
それでも私が品質保証プロセスを作り続ける理由 #テストラジオ / Why I still continue to create QA process
pineapplecandy
0
130
セキュアな認可付きリモートMCPサーバーをAWSマネージドサービスでつくろう! / Let's build an OAuth protected remote MCP server based on AWS managed services
kaminashi
3
350
Zephyr(RTOS)にEdge AIを組み込んでみた話
iotengineer22
0
170
大規模サーバーレスAPIの堅牢性・信頼性設計 〜AWSのベストプラクティスから始まる現実的制約との向き合い方〜
maimyyym
10
5k
これがLambdaレス時代のChatOpsだ!実例で学ぶAmazon Q Developerカスタムアクション活用法
iwamot
PRO
8
1.1k
OpenTelemetry が拡げる Gemini CLI の可観測性
phaya72
1
230
AI時代こそ求められる設計力- AWSクラウドデザインパターン3選で信頼性と拡張性を高める-
kenichirokimura
3
350
現場データから見える、開発生産性の変化コード生成AI導入・運用のリアル〜 / Changes in Development Productivity and Operational Challenges Following the Introduction of Code Generation AI
nttcom
0
260
Codexとも仲良く。CodeRabbit CLIの紹介
moongift
PRO
1
250
Geospatialの世界最前線を探る [2025年版]
dayjournal
1
240
組織改革から開発効率向上まで! - 成功事例から見えたAI活用のポイント - / 20251016 Tetsuharu Kokaki
shift_evolve
PRO
1
110
業務効率化をさらに加速させる、ノーコードツールとStep Functionsのハイブリッド化
smt7174
2
150
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
Building an army of robots
kneath
306
46k
A better future with KSS
kneath
239
18k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
For a Future-Friendly Web
brad_frost
180
10k
How STYLIGHT went responsive
nonsquared
100
5.8k
How to Ace a Technical Interview
jacobian
280
24k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Side Projects
sachag
455
43k
Transcript
Power Automate Desktop の UI要素とセレクタービルダーって良いよね
自己紹介 2 Maekawa • コミュニティ: Power Automate Desktop 勉強会 •
Twitter: @HiMaekawaSan • Qiita: maekawawawa
このセッションについて 「UI 要素とセレクタービルダーって良いよね…」 というお話をします。
このセッションについて 自動化についての話の中で、それが本当に自動化して良 いものかどうか各自でご確認とご判断ください。 特に自動化を禁止しているサイトや サービスは数多くあります。
目次 • UI 要素はいつも近くに • UI 要素の実態に迫る • セレクター ビルダーを使った自動化処理の安定化
• 自動化の対象を考える
UI 要素はいつも近くに 6
UI 要素とは 7 ここ… フローデザイナーの右側のひし餅みたいなアイコンをクリックすると…
UI 要素とは 8 ここに表示される のがUI 要素! 右側のペインに表示されるのがUI 要素!
UI 要素はどんなときに追加されるか 9 レコーディング UI 要素の追加 アクション この2つの機能からUI 要素を追加できます。
10 レコーディングによる追加方法 マウスをポチポチしていくとレコーディングが進み、要素が追加される。
11 レコーディング後、UI 要素が自動的に追加される レコーディング時に操作したコントロールが自動的に要素として追加されます。 ここでは、「div」と「span」と「span 2」の3つが追加されています。 3つの要素が追加 キャプチャも 追加される (ずれてるけど)
12 UI 要素はレコーディングで作られたアクションで使用される 特に設定しなくてもレコーディングで保存されたアクションの中で自動的に使用されます。 どのUI 要素を選択 しているかわかる アクションの詳細画面では より詳しい情報がわかる
13 UI 要素の追加による追加方法 左矢印 左CRTL キーを押しながら、左クリックで追加します。
14 取得した要素はアクションから必要に応じて選び直すことができる 複数のアクションで同じ要素を選ぶことも可能です。使いまわしができるのは嬉しいですね。
15 UI 要素の名前は変更できる 名前を変更したほうがあとでフローをメンテナンスするときにわかりやすくなって便利 わかりやすい名前に 変更 フローのアクション にも自動的に反映さ れます。
UI 要素の実態に迫る 16
17 UI 要素って何なのか “UI” とは「User Interface」 の略語です。GUIなら、操作対象の画面でしょうか。 UI 要素とは、操作対象とする画面上のWebページやアプリケーションの中にあるコント ロール(要素)のこと指しています。
Webページ上の ボタンやリンク、 テキスト デスクトップアプリ のボタンやテキスト も対象
18 UI 要素って何なのか つまり、画面上のコントロールをPower Automate Desktop が解析して、 操作対象を“一意”に特定したもの、または、これからするためのものがUI 要素です。 一位!
ではなくて、一意。
19 例えば以下のようなページがあります。 ボタンがあったり、一覧があったり、ページングがあったりするWeb ページ
20 この中で「Submit」ボタンを一意に特定するにはどうするか。 複数のコントロール があるなかで、こち らを一意とする
21 ボタンの画像?ボタンの配置してある座標?はどうか 同じ画像のボタンがあったらどうするか…。ボタンの画像や位置が変わったら…。 同じものが2個 色が変わる 位置が変わる
22 一意に特定するために必要なことは構造を解析すること Web ページに構造は、html が主に担うので、html を解析する必要があります。 サイトページ サイトページのソース(html)
23 レコーディングやUI要素の取得では解析をPADが自動で行う PAD が、html を解析して、要素を一意に判断します。または、ユーザー自身が行います。 操作対象の html の中にある Submit ボタンはどれだ
探した結果がこちら(セレクター)
24 セレクターと解析元のhtml を対比する まずは、セレクターの中身を詳しくみてます。 html > body > div >
form > fieldset > div:eq(2) > button セレクターの中身を見てみると こんな構造になっています
25 セレクターと解析元のhtml を対比する html とセレクターの中身を対比するとこんな感じになります。 html > body > div
> form > fieldset > div:eq(2) > button
26 ポイント:UI要素 はページやアプリの構造解析した結果が入る 要素の取得時にPAD が構造を解析して、これが一意だ!という属性を選んでくれます。 そのまま使えるのは嬉しいですね。
27 Web ページに限らずアプリケーションも解析する。 ただし、html と違ってこちらは大本の構造を確認する術がないものことがあります。
28 セレクタービルダーで中身を確認することができる。 何を持って一意と判断しているか
セレクター ビルダーを使った 自動化処理の安定化 29
30 セレクタービルダーは、UI 要素の内容を確認・編集できる機能 メンテナンスするときに便利、一意のコントロールの定義を修正することができます。 ビジュアル ビルダー エディター
31 セレクタービルダーはUI の構造を見やすくしてくれる html をPAD的に解釈したらこんなんになりました、みたいな感じと思っています。
32 セレクタービルダーの起動方法 UI 要素をダブルクリック→セレクターをダブルクリック→セレクタービルダーが起動。
33 ビジュアルビルダーは、GUI ベースの機能です。 GUI で構造解析された結果の確認と編集を行えます。
34 ビジュアルビルダーの見方 ☑を入れた属性掴んで(セレクトして)、演算子と値で要素を特定しています。 この場合だと、 Class 属性が”btn”で Name 属性が”Submit” をセレクトしています。
35 一致する条件を変えたり、別の値に変更することも可能。 比較する演算子を変えたり、値を変更することもできます。 例えば、操作対象のName 属性が”Submit” から変 更されたときに修正できて 便利。
36 Tips 構造的に一意を特定できる項目は下に来ることが多い。 基本的にセレクターの最下層の項目で一意性を特定できるケースが多いです。 ここはhtml の知識があるとよりわかりやすくなると思っています。 ここでは、”Submit”ボ タンが操作対象となるのそ れを確認するのがいいと思 います。
37 エディターではテキストベースでセレクターを編集できます。 ボタンがあったり、一覧があったり、ページングがあったり
38 エディターの大きな利点は、変数が指定できること 変数の入力ができる絵
39 ポイント 変数が指定できると便利なこと 動的に取得したい要素を変えられる テーブルがあった場合1行1行要素をとるのではなくて、変数を指定してループで要素にアクセスできる
40 Tips テーブルの取得についてはスクレイピングが便利です スクレイピングの動画
自動化の対象を考える 41
42 ここではUI の自動化の対象を考えてみます 以下の3つの考えでアプローチしてみます UI 構造に変化が少ないもの UI 構造に変化が多いもの UI 以外の操作や取得のアプローチが提供されているもの
43 UI 構造に変化が少ないもの 安定的に自動化できる 更新の少ないアプリケーション レガシーなアプリケーション