Power Automate for desktopでUI要素の追加・編集方法

Power Automate for desktopのUI要素とは？

UI要素とは？

上のイラストのWebページの例では、「グラフ」や「ファイルダウンロードボタン」や「menu1というテキスト」など、ページ上に存在する部品のすべてがUI要素です。UI要素は「ページを構成する部品」と言えるかと思います。

UI要素とは、Webページやアプリケーションウィンドウを構成する部品です。

「UI要素の登録」作業とは？

Power Automate for desktopで自動化を行うとき、Power Automate for desktopはUI要素をターゲットにして操作を行います。

そして、UI要素に操作を行うには、我々人間が事前に「UI要素の登録」という作業を行わないといけません。

たとえば、わたしが、上のイラストのWebページにおいて「一番左のExcelのダウンロードボタンをクリックしたい」とします。

この時、Power Automate for desktopにダウンロードボタンをクリックしてもらうために、「一番左のExcelのダウンロードボタン」をUI要素として登録するわけです。

「UI要素の登録」の方法は？

UI要素の登録は、「CSSセレクター」と呼ばれるWebの世界でよく用いられる特殊な表記方法を使って表現します。

まずは、CSSセレクターの例を下に記しますので見てみましょう。

Power Automate for desktopでは、CSSセレクターのことを「セレクター」と呼ぶようです。

・・・いかがでしょうか？

Web系のプログラミングを経験されたことがある方なら読むことができるかもしれません。しかし、多くの方が「なんじゃこりゃ・・」って、引いてしまったのではないでしょうか（笑）。

でも、ちょっとむずかしいけどCSSセレクタってきちんと書かないといけないのですよ。だって、さっきの例でいうと「ダウンロードボタンをクリックしたい」といいましたが、イラストをみてみるとボタンが3つありますから、Power Automate for desktopが間違ったボタンをクリックしないようにしなければいけない。

きちんと区別できるようにUI要素

CSSセレクターは、いわば「UI要素の住所」のようなものなのです。

ただ、安心してください！

Power Automate for desktopでは、CSSセレクターを知らない人でも自動化ができるように、クリック操作だけでCSSセレクターを自動生成してくれる機能が備わっています。

ぽこがみさま

それなら誰でも作れそうだにゃ～（ホッ）。

じょじお

次の項から、UI要素を実際に登録する方法について解説していきます！

UI要素の登録方法！

先の項で、「UI要素」と「UI要素の登録作業の必要性」について紹介しました。

ここからは、実際にUI要素を登録する方法について図を使いながら解説したいと思います。

じょじお

PADにUI要素を登録する方法には2つの方法があります。どちらかの方法で行います。

①「UI要素ピッカー」を使ってUI要素を登録する方法は？

UI要素ピッカーとは？

▲UI要素ピッカーとはUI要素の追加操作を行う時に使用するウィンドウです（上図）。起動方法とUI追加方法は後述します。（UI要素ピッカーは、昔は追跡セッションウィンドウという名前でした。）

「UI要素ピッカー」を使ってUI要素を追加する手順

STEP

Power Automate for desktopを起動します。

STEP

フローデザイナーを開きます。

STEP

フローデザイナーの右側にある「UI要素」アイコンをクリックします。

▲フローデザイナーの画面右側の「UI要素アイコン」をクリックします。（ひし形が積み重なったアイコン）

STEP

UI要素ペインに切り替わります。

▲フローデザイナーを起ち上げるとデフォルトでは右側の領域は変数ペインになっているかと思いますが、UI要素アイコンをクリックすることでUI要素ペインに切り替わります。

STEP

「UI要素の追加」をクリックします。

▲UI要素ペインに切り替わりましたらUI要素ペインの中の「UI要素の追加」をクリックします。

STEP

「UI要素ピッカー」が開きます。

▲「UI要素ピッカー」が開きました。（上の画像は旧バージョンで取得したため追跡セッションという古い名前が表示されています。）

STEP

操作対象ウィンドウを表示させて、取得したいUI要素をCtrlキーを押しながら左クリックします。

▲「UI要素ピッカー」を開いた状態でブラウザでターゲットとなるWebページを開きましょう。（あるいはアプリケーションウィンドウ）

「UI要素ピッカー」を開いた状態でマウス操作を行うとカーソルを合わせた箇所が赤い枠線で囲われます。ターゲットのUIにカーソルを合わせたら「Ctrlを押しながら左クリック」を押しましょう。

赤い枠線が表示されない時は、ターゲットウィンドウをいったん閉じてから開いてみてください。

マウスカーソルを合わせる場所によって取得できるUI要素が変わります。微妙なカーソル位置のズレで目的でないUI要素が取れてしまうこともあるので調整しながら取得しましょう。失敗してしまった場合は何度かトライして不要なUI要素はあとから削除すればいいかなと思います。

STEP

「UI要素ピッカー」にUI要素が取得されます。

▲UI要素を取得できると「UI要素ピッカー」にUI要素が表示されます。追加できましたら完了ボタンをクリックします。

STEP

フローデザイナーに登録済みUI要素が表示されます。

▲追加したUI要素はフローデザイナーの右側のUI要素ペインに一覧されます。

図のように先ほど取得した「＜a＞’ダウンロード’」という名前のUI要素を追加することができました。

それとは別に、誤って＜body＞や＜span＞のUI要素を追加してしました。

このように、特定の箇所をクリックできなくて不要なUIを追加してしまった場合は、UI要素を削除しましょう。次の項で不要なUIの削除方法を解説します。

じょじお

余分なUI要素が追加されてしまったら削除しましょう！

②レコーダー機能を使ってUI要素を登録する方法とは？

じょじお

レコーダー機能を使ってUI要素を登録する方法は下記の記事を参考になさってください。

あわせて読みたい

Power Automate Desktopでブラウザを自動操作しサイトにログインする。 【ノンプログラマーでも簡単にブラウザ自動操作ができる「レコーダー」とは？】 Power Automate Desktopの「レコーダー」とは、ユーザのブラウザ操作を記録して再現して…

UI要素を削除する方法！

ぽこがみさま

「UI要素ピッカー」で不要なUI要素を登録してしまったときはUI要素を削除しましょう。下記が削除方法です！

STEP

削除したいUI要素を選択してDeleteキーを押します。

▲UI要素ペインにて、削除したいUI要素をクリックして選択します。選択しましたらDeleteキーを押します。

STEP

確認画面が表示されるので「削除」をクリックします。

▲確認画面が表示されますので、削除ボタンをクリックします。

STEP

UI要素が削除できます。

UI要素ペインから不要なUI要素が削除されたことを確認してください。

UI要素の名前の変更方法！

ぽこがみさま

UI要素には名前をつけよう！

UI要素の名前はUI要素を登録した際に自動的に付与されます。

そのままの名前で使ってもよいのですが、わかりやすい名前をつけておくと管理上便利です。

UI要素は「○○のページの●●というUI要素」というかたちで保存されるのですが、ページ、UI要素のどちらにも名前をつけることができます。

（名前変更方法①）Web Pageの名前を変更する

STEP

UI要素のWeb Pageの三点リーダーをクリックします。

STEP

名前の変更をクリックします。

STEP

変更後の名前を入力します。

▲名前を入力してエンターキーを押します。

STEP

Web Pageの名前が変更できました。

（名前変更方法②）UI要素の名前を変更する。

STEP

UI要素の三点リーダーをクリックします。

STEP

「名前の変更」をクリックします。

STEP

名前を入力します。

▲名前を入力してエンターキーを押します。名前が変更できます。

UI要素を編集しよう。（セレクターの基礎知識編）

セレクターってなに？

じょじお

UI要素を編集する前にセレクターについて学習しましょう！

Power Automate for desktopに登録したUI要素は書式の決まった条件式で保存されています。この条件式をセレクターと呼びます。

例えばWebページ内のとあるリンクをUI要素に登録したいとしましょう。

リンクはHTMLでは<a>タグを使って表現しますが、Webページ内には<a>タグを使ったリンクが複数あるとします。この時に、複数のaタグの中から狙い通りに目的のaタグをターゲットできるように条件式で表現するのがセレクターの役割です。

いってみればセレクターとはUI要素を特定するための住所のようなものです。

セレクターの例

main[Id="main_content"] > div[Class="l-mainContent__inner"] > div[Class="post_content"] > div[Class="wp-block-file"]:eq(1) > a[Class="wp-block-file__button"]

なんでUI要素（セレクター）を編集する必要があるの？

「セレクタ〇〇を含む要素が見つかりません。」エラーへの対応のため

UI要素をUI要素ピッカーで自動取得する方法をお伝えしました。

しかしこれらは完璧なものではありません。

これらを使って登録したUI要素ではUI要素を特定できずにフローが正常にできないことがあります。このような時は手動でUI要素を編集しなければいけない時があります。

「セレクタ〇〇を含む要素が見つかりません。」

クラス名やID名がコロコロ変わるWebページに対応するため

HTMLのID名やクラス名がコロコロ変わるWebサイトは多く存在します。

そのようなWebサイトをターゲットにする場合はUI要素を手動で編集しなければならない場合があります。プログラムが動的に作成するWebサイトに多いです。

セレクターの書式

じょじお

セレクターはUI要素の住所を示す条件式のようなものとお伝えしました。ここでは条件式で使える書式について解説します。

セレクターの階層構造は省略して書ける。

サブ階層（子供の子供）を表現するには半角スペースを使う

HTMLタグ1[属性=’値’] HTMLタグ2[属性=’値’]

例:div[id=’first-section’] li

階層構造を表現する方法として子供を表現するときは「>」を使い、子供の子供以上の深さを表現するには「半角スペース」を使います。

<html>
<body>
    <div class="main-content">
        <div id="first-section">
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>

            <div id="sub-section">
                <li>item4</li>
                <li>item5</li>
                <li>item6</li>
            </div><!-- section -->

        </div><!-- section -->
    </div><!-- main-content -->
</body>
</html>

▲例えば上記のHTMLにおいて、

• 「div[id=’first-section’] > li」というように>で区切って書くとitem1～item3までのliタグがマッチします。
• 「div[id=’first-section’] li」というように半角スペースで区切って書くとサブ階層も含むのでitem1～item6のliタグがマッチします。

添え字（インデックス）を使ってUI要素を特定する方法

「n個目の要素」を表現するには「:eq(インデックス番号)」と書きます。上の例は「bodyタグの中のnavタグの中の1個目のdivタグの中の2個目のliタグの中のaタグ」という意味になります。インデックスは0からカウントしますので「:eq(0)」は1個目の要素、「:eq(1)」は2個目の要素となります。

HTMLタグ[属性=’値’]:eq(インデックス番号)

例えば上の図のWebページにおいてnavタグの中の3つのliタグのうち、2個目の「menu2」という値を取り出したい時、「body > nav > li」とセレクタを書いてもうまく取り出すことはできません。なぜならliタグが3つあるため住所として成立していないからです。ちなみにこの場合、PADの仕様上1個目のUI要素が対象となるので取得できる値は「menu1」となります。この場合「menu2」を取り出すには下記のように書く方法があります。

例：body > nav > li:eq(1)

上の例は「bodyの中のnavの中の二個目liタグ」という意味です。インデックス番号は0からカウントするため、2個目のUI要素を指定する場合は「:eq(1)」となる点に注意してください。

:eq(インデックス番号)のインデックス番号は0からカウントする。

負の数字を指定すると下からカウントします。「:eq(-1)」は一番最後の要素を表します。

:eq(-1)は一番最後の要素を表す。

コンテンツに特定の文字列を含む要素

コンテンツを使ってUI要素を特定するには下記のようにcontainsを使います。コンテンツとはHTML開始タグと終了タグに挟まれた部分の文字列です。下の図の例の場合「こんにちは」という文字列がコンテンツです。

HTMLタグ[属性=’値’]:contains(‘コンテンツに含まれるキーワード’)

<div>名前
    <input id="name">
</div>
<div>住所
    <input id="addreess">
</div>
<div>電話番号
    <input id="phone-number">
</div>

上記のHTML構成のWebページにおいて、3番目のinputタグをcontainsを使って表現すると下記のように書くことができます。

例：div:contains(‘電話番号’) > input

UI要素を編集しよう。（実践編）

じょじお

UI要素の編集方法について解説します。

ここまでセクレターの基礎知識について解説しました。ここからは実際にセレクターを編集する方法について手順を解説します。セレクターを編集する方法には2つの方法があります。

じょじお

ここからは架空のミッションを想定してUI要素を編集する例を紹介します。

<html>
<body>
<div class="content">
    <div class="flex">
        <div class="sidebar">
            <p>sidebar</p>
            <li class="left-list">menu1</li>
            <li class="left-list">menu2</li>
            <li class="left-list">menu3</li>
        </div><!-- sidebar -->

        <div class="main-content">
            <div class="section" id="first-section">
                <p>main contents</p>
                <p>fruits</p>
                <li class="section1-list"><a href="https://www.google.com/search?q=apple" id="f-list1" target="_blank">apple</a></li>
                <li class="section1-list"><a href="https://www.google.com/search?q=orange" id="f-list2" target="_blank">orange</a></li>
                <li class="section1-list"><a href="https://www.google.com/search?q=melon" id="f-list3" target="_blank">melon</a></li>
            </div><!-- section1 -->

            <div class="section" id="second-section">
                <p>vegetable</p>
                <li class="section2-list"><a href="https://www.google.com/search?q=carrot" target="_blank">carrot</a></li>
                <li class="section2-list"><a href="https://www.google.com/search?q=onion" target="_blank">onion</a></li>
                <li class="section2-list"><a href="https://www.google.com/search?q=radish" target="_blank">radish</a></li>
            </div><!-- section2 -->
        </div><!-- main-content -->
    </div><!-- flex -->

</div><!-- content -->
</body>
</html>

ビジュアルセレクタービルダーを使用したセレクターの編集方法

じょじお

ビジュアルセレクタービルダーを使う方法は、ほぼマウスクリックだけでセレクターを編集する方法です。

ぽこがみさま

セレクターの入力補助が強力なので、簡単に作成できるしタイプミスによるエラーの可能性を減らすことができるよ。

STEP

UI要素ペインの中の編集するUI要素にマウスカーソルを合わせダブルクリックします。

▲編集対象のUI要素の上でダブルクリックします。

STEP

小さいウィンドウが表示されるのでセレクターを選択してダブルクリックします。

▲UI要素のセレクターが表示された小さいウィンドウが表示されます。セレクターを選択してダブルクリックします。

STEP

ビジュアルセレクタービルダーが起動します。

▲ビジュアルセレクタービルダーが起動します。図のような画面構成になっています。

• 要素を操作するペイン
  • 要素をオフオンすることができます。
• 属性を操作するペイン
  • 要素に属性の条件文をオフオンすることができます。
• セレクターペイン
  • 上の２つのペインの操作結果によってリアルタイムでセレクターが変化します。ビジュアルセレクタービルダーではここを直接編集することはできません。

STEP

セレクターのペインの一番下をクリックして選択します。

▲セレクターのペインの一番下をクリックして選択します。

STEP

ID属性のチェックを外します。

▲左側で選択した要素に対する属性の条件文が右側の要素ペインに表示されます。今回の要件は「WebページのID属性が都度変化してしまうためID属性を使用してはならない」ということだったのでセレクターからID属性を外しましょう。セレクターからID属性を外すにはID属性のチェックを外します。

STEP

ID属性を外したことにより自動的にセレクターが更新されたことを確認します。

▲ID属性のチェックを外したことによりセレクターがリアルタイムで変化しました。

STEP

liタグにチェックを入れます。

▲現在のセレクター「a」だけでは住所として適切ではありません。なぜならHTML内にaタグが6つあるため特定しきれません。

▲このためもう少しセレクターの精度を上げます。1階層上のタグを見てみるとliタグに囲まれていることがわかりますのでliタグをセレクターに含めましょう。そしてliタグは同じ階層に3個あるので「3個目のliタグ」という条件文にします。

▲aタグの一個上の階層のliタグにチェックを入れます。

STEP

1階層上のli要素にチェックを入れます。

「li[Class=”section1-list”]:eq(2) > a」

▲「3個目の」という条件文を付けようと思いましたが自動的についていることがわかりました（eq:(2)）。また、クラス名も付いています。

▲セレクター「li[Class=”section1-list”]:eq(2) > a」でターゲットを特定できるか確認してみます。liタグが6個あることが心配ですがクラス名とOrdinal属性を使って特定できていることがわかります。Ordinal属性は0から数え始めるため「3個目の要素」は、「:eq(2)」となる点に注意してください。

STEP

セレクターが完成しました。

▲セレクターが完成しましたので「更新」ボタンをクリックします。これでビジュアルセレクタービルダーによるセレクターの編集は完了です。

カスタムセレクタービルダーを使用したセレクターの編集方法

じょじお

カスタムセレクタービルダーを使う方法は、セレクターを手入力する方法です。

ぽこがみさま

ビジュアルセレクタービルダーでは作ることができないセレクターを柔軟に作ることができるよ。

STEP

UI要素ペインの中の編集するUI要素にマウスカーソルを合わせダブルクリックします。

▲編集対象のUI要素の上でダブルクリックします。

STEP

小さいウィンドウが表示されるのでセレクターを選択してダブルクリックします。

▲UI要素のセレクターが表示された小さいウィンドウが表示されます。セレクターを選択してダブルクリックします。

STEP

セクレタービルダーの「カスタム」のチェックをオフにします。

STEP

カスタムセレクタービルダーが起動します。

▲カスタムセレクタービルダーが起動します。カスタムセレクタービルダーは、図の赤枠の部分にセレクターを直接手入力しながらセレクターを作成することができます。

カスタムセレクタービルダーでは変数を使うこともできます。

STEP

セレクターを手入力して「更新」を押します。

▲セレクターを手入力して「更新」ボタンをクリックします。今回はせっかくなのでビジュアルセレクタービルダーでは使うことができない「contains」文を使ったセレクターにしました。

a:contains(‘melon’)

UI要素の登録・セレクター編集のコツ

じょじお

個人的「UI要素取得のコツ」をまとめます。

ターゲットのWebサイトのHTMLを分析するコツ

ブラウザーの開発者ツールでHTMLを分析しよう！

Webページの分析にはブラウザーの開発者ツールが必須です。開発者ツールは高機能なツールなので、初心者の方には分かりづらいところもあります。

下記の記事では、Power Automate for desktopの自動化において、必要最低限な使い方について解説してみました。

あわせて読みたい

ブラウザ開発者ツールの使い方！ 【スクレイピングする時はHTML構造を確認しよう。】 Power Automate for desktopを使えばWebサイトのHTML構成を全く理解していなくてもスクレイピング目的のフローを簡…

UI要素・ブラウザー操作に関するエラー

ブラウザー自動化系のアクションが動かない

「（ブラウザー操作関連のフローが）動かないんだけど。」というエラーの原因のほとんとが、UI要素をうまく特定できていないことが原因です。UI要素を追加し直してみてください。また、UI要素ピッカーによって自動で生成されるUI要素のセレクターは完璧ではありません。セレクターをチューニングしないと掴みきれないシーンはよくあります。UI要素のセレクターの構文を確認してみてください。

昨日まで動いていたけど動かない

WebページのHTML構造が変わると、以前まで使えていたフローが動作しなくなることがあります。UI要素を再取得してみてください。一見Webページの見た目が全然変わっていないのにHTMLのクラス名やID名が変わっていることもあるのでWebページの目で見える部分だけではHTML構造の変更は判断できません。

「Webページのリンクをクリックします」アクションのエラー

HTMLでリンクの役割をするのはaタグです。セレクタの末尾がaタグになっているか確認してください。aタグになっていない場合UI要素の登録を何度かやり直ししてみてください。

まとめ

じょじお

以上、Power Automate for desktopのUI要素の登録とセレクターの書き方について学習しました。

あわせて読みたい

【初心者向け】VSCodeにWebページのHTMLを張り付ける方法 Power Automate for desktopでWeb操作・スクレイピングをするフローを作成する場合にはHTMLのソースコードを解析しなければいけないケースがあります。 そんなときはブ…

Power Automate学習教材

Power AutomateをKindleで学びたい方はコチラ

Microsoft Power Automate かんたん活用ガイド

¥2,200 （2024/04/21 05:47時点 | Amazon調べ）

Amazon

＼ポイント最大9倍！／

楽天市場

Yahooショッピング

ポチップ

▲Kindleと紙媒体両方提供されています。デスクトップフロー、クラウドフロー両方の解説がある書籍です。解説の割合としてはデスクトップフロー7割・クラウドフロー3割程度の比率となっています。両者の概要をざっくり理解するのにオススメです。

はじめてのPower Automate Desktop―無料&ノーコードRPAではじめる業務自動化

¥2,508 （2024/04/18 07:46時点 | Amazon調べ）

Amazon

＼ポイント最大9倍！／

楽天市場

Yahooショッピング

ポチップ

▲Power Automate for Desktopの基本をしっかり学習するのにオススメです。この本の一番のメリットはデモWebシステム・デモ業務アプリを実際に使ってハンズオン形式で学習できる点です。本と同じシステム・アプリを使って学習できるので、本と自分の環境の違いによる「よく分からないエラー」で無駄に躓いて挫折してしまう可能性が低いです。この点でPower Automate for desktopの一冊目のテキストとしてオススメします。著者は日本屈指のRPAエンジニア集団である『ロボ研』さんです。

Power Automateではじめる ノーコードiPaaS開発入門

¥2,750 （2024/04/24 17:20時点 | Amazon調べ）

Amazon

＼ポイント最大9倍！／

楽天市場

Yahooショッピング

ポチップ

▲Power Automate クラウドフローの入門書です。初心者の方には図解も多く一番わかりやすいかと個人的に思っています。

Microsoft 365/ Power Automate / Power Platform / Google Apps Script…