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