Slide 1
Slide 1 text
Power Automate Desktop の
UI要素とセレクタービルダーって良いよね
Slide 2
Slide 2 text
自己紹介
2
Maekawa
• コミュニティ: Power Automate Desktop 勉強会
• Twitter: @HiMaekawaSan
• Qiita: maekawawawa
Slide 3
Slide 3 text
このセッションについて
「UI 要素とセレクタービルダーって良いよね…」
というお話をします。
Slide 4
Slide 4 text
このセッションについて
自動化についての話の中で、それが本当に自動化して良
いものかどうか各自でご確認とご判断ください。
特に自動化を禁止しているサイトや
サービスは数多くあります。
Slide 5
Slide 5 text
目次
• UI 要素はいつも近くに
• UI 要素の実態に迫る
• セレクター ビルダーを使った自動化処理の安定化
• 自動化の対象を考える
Slide 6
Slide 6 text
UI 要素はいつも近くに
6
Slide 7
Slide 7 text
UI 要素とは
7
ここ…
フローデザイナーの右側のひし餅みたいなアイコンをクリックすると…
Slide 8
Slide 8 text
UI 要素とは
8
ここに表示される
のがUI 要素！
右側のペインに表示されるのがUI 要素！
Slide 9
Slide 9 text
UI 要素はどんなときに追加されるか
9
レコーディング UI 要素の追加 アクション
この２つの機能からUI 要素を追加できます。
Slide 10
Slide 10 text
10
レコーディングによる追加方法
マウスをポチポチしていくとレコーディングが進み、要素が追加される。
Slide 11
Slide 11 text
11
レコーディング後、UI 要素が自動的に追加される
レコーディング時に操作したコントロールが自動的に要素として追加されます。
ここでは、「div」と「span」と「span 2」の３つが追加されています。
３つの要素が追加
キャプチャも
追加される
（ずれてるけど）
Slide 12
Slide 12 text
12
UI 要素はレコーディングで作られたアクションで使用される
特に設定しなくてもレコーディングで保存されたアクションの中で自動的に使用されます。
どのUI 要素を選択
しているかわかる
アクションの詳細画面では
より詳しい情報がわかる
Slide 13
Slide 13 text
13
UI 要素の追加による追加方法
左矢印 左CRTL キーを押しながら、左クリックで追加します。
Slide 14
Slide 14 text
14
取得した要素はアクションから必要に応じて選び直すことができる
複数のアクションで同じ要素を選ぶことも可能です。使いまわしができるのは嬉しいですね。
Slide 15
Slide 15 text
15
UI 要素の名前は変更できる
名前を変更したほうがあとでフローをメンテナンスするときにわかりやすくなって便利
わかりやすい名前に
変更
フローのアクション
にも自動的に反映さ
れます。
Slide 16
Slide 16 text
UI 要素の実態に迫る
16
Slide 17
Slide 17 text
17
UI 要素って何なのか
“UI” とは「User Interface」 の略語です。GUIなら、操作対象の画面でしょうか。
UI 要素とは、操作対象とする画面上のWebページやアプリケーションの中にあるコント
ロール(要素)のこと指しています。
Webページ上の
ボタンやリンク、
テキスト
デスクトップアプリ
のボタンやテキスト
も対象
Slide 18
Slide 18 text
18
UI 要素って何なのか
つまり、画面上のコントロールをPower Automate Desktop が解析して、
操作対象を“一意”に特定したもの、または、これからするためのものがUI 要素です。
一位！ ではなくて、一意。
Slide 19
Slide 19 text
19
例えば以下のようなページがあります。
ボタンがあったり、一覧があったり、ページングがあったりするWeb ページ
Slide 20
Slide 20 text
20
この中で「Submit」ボタンを一意に特定するにはどうするか。
複数のコントロール
があるなかで、こち
らを一意とする
Slide 21
Slide 21 text
21
ボタンの画像？ボタンの配置してある座標？はどうか
同じ画像のボタンがあったらどうするか…。ボタンの画像や位置が変わったら…。
同じものが2個
色が変わる
位置が変わる
Slide 22
Slide 22 text
22
一意に特定するために必要なことは構造を解析すること
Web ページに構造は、html が主に担うので、html を解析する必要があります。
サイトページ サイトページのソース(html)
Slide 23
Slide 23 text
23
レコーディングやUI要素の取得では解析をPADが自動で行う
PAD が、html を解析して、要素を一意に判断します。または、ユーザー自身が行います。
操作対象の html の中にある Submit ボタンはどれだ 探した結果がこちら(セレクター)
Slide 24
Slide 24 text
24
セレクターと解析元のhtml を対比する
まずは、セレクターの中身を詳しくみてます。
html
> body
> div
> form
> fieldset
> div:eq(2)
> button
セレクターの中身を見てみると こんな構造になっています
Slide 25
Slide 25 text
25
セレクターと解析元のhtml を対比する
html とセレクターの中身を対比するとこんな感じになります。
html
> body
> div
> form
> fieldset
> div:eq(2)
> button
Slide 26
Slide 26 text
26
ポイント：UI要素 はページやアプリの構造解析した結果が入る
要素の取得時にPAD が構造を解析して、これが一意だ！という属性を選んでくれます。
そのまま使えるのは嬉しいですね。
Slide 27
Slide 27 text
27
Web ページに限らずアプリケーションも解析する。
ただし、html と違ってこちらは大本の構造を確認する術がないものことがあります。
Slide 28
Slide 28 text
28
セレクタービルダーで中身を確認することができる。
何を持って一意と判断しているか
Slide 29
Slide 29 text
セレクター ビルダーを使った
自動化処理の安定化
29
Slide 30
Slide 30 text
30
セレクタービルダーは、UI 要素の内容を確認・編集できる機能
メンテナンスするときに便利、一意のコントロールの定義を修正することができます。
ビジュアル ビルダー エディター
Slide 31
Slide 31 text
31
セレクタービルダーはUI の構造を見やすくしてくれる
html をPAD的に解釈したらこんなんになりました、みたいな感じと思っています。
Slide 32
Slide 32 text
32
セレクタービルダーの起動方法
UI 要素をダブルクリック→セレクターをダブルクリック→セレクタービルダーが起動。
Slide 33
Slide 33 text
33
ビジュアルビルダーは、GUI ベースの機能です。
GUI で構造解析された結果の確認と編集を行えます。
Slide 34
Slide 34 text
34
ビジュアルビルダーの見方
☑を入れた属性掴んで(セレクトして)、演算子と値で要素を特定しています。
この場合だと、
Class 属性が”btn”で
Name 属性が”Submit”
をセレクトしています。
Slide 35
Slide 35 text
35
一致する条件を変えたり、別の値に変更することも可能。
比較する演算子を変えたり、値を変更することもできます。
例えば、操作対象のName
属性が”Submit” から変
更されたときに修正できて
便利。
Slide 36
Slide 36 text
36
Tips 構造的に一意を特定できる項目は下に来ることが多い。
基本的にセレクターの最下層の項目で一意性を特定できるケースが多いです。
ここはhtml の知識があるとよりわかりやすくなると思っています。
ここでは、”Submit”ボ
タンが操作対象となるのそ
れを確認するのがいいと思
います。
Slide 37
Slide 37 text
37
エディターではテキストベースでセレクターを編集できます。
ボタンがあったり、一覧があったり、ページングがあったり
Slide 38
Slide 38 text
38
エディターの大きな利点は、変数が指定できること
変数の入力ができる絵
Slide 39
Slide 39 text
39
ポイント 変数が指定できると便利なこと
動的に取得したい要素を変えられる
テーブルがあった場合1行1行要素をとるのではなくて、変数を指定してループで要素にアクセスできる
Slide 40
Slide 40 text
40
Tips テーブルの取得についてはスクレイピングが便利です
スクレイピングの動画
Slide 41
Slide 41 text
自動化の対象を考える
41
Slide 42
Slide 42 text
42
ここではUI の自動化の対象を考えてみます
以下の３つの考えでアプローチしてみます
UI 構造に変化が少ないもの
UI 構造に変化が多いもの
UI 以外の操作や取得のアプローチが提供されているもの
Slide 43
Slide 43 text
43
UI 構造に変化が少ないもの
安定的に自動化できる
更新の少ないアプリケーション
レガシーなアプリケーション