目次 Show
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セレクターのことを「セレクター」と呼ぶようです。 CSSセレクターを用いて表現されたUI要素
・・・いかがでしょうか? Web系のプログラミングを経験されたことがある方なら読むことができるかもしれません。しかし、多くの方が「なんじゃこりゃ・・」って、引いてしまったのではないでしょうか(笑)。 でも、ちょっとむずかしいけどCSSセレクタってきちんと書かないといけないのですよ。だって、さっきの例でいうと「ダウンロードボタンをクリックしたい」といいましたが、イラストをみてみるとボタンが3つありますから、Power Automate for desktopが間違ったボタンをクリックしないようにしなければいけない。 きちんと区別できるようにUI要素 CSSセレクターは、いわば「UI要素の住所」のようなものなのです。 ただ、安心してください! Power Automate for desktopでは、CSSセレクターを知らない人でも自動化ができるように、クリック操作だけでCSSセレクターを自動生成してくれる機能が備わっています。 ぽこがみさまじょじお次の項から、UI要素を実際に登録する方法について解説していきます!
先の項で、「UI要素」と「UI要素の登録作業の必要性」について紹介しました。 ここからは、実際にUI要素を登録する方法について図を使いながら解説したいと思います。 じょじおPADにUI要素を登録する方法には2つの方法があります。どちらかの方法で行います。 UI要素の2つの登録方法
①「UI要素ピッカー」を使ってUI要素を登録する方法は?UI要素ピッカーとは?UI要素ピッカー▲UI要素ピッカーとはUI要素の追加操作を行う時に使用するウィンドウです(上図)。起動方法とUI追加方法は後述します。(UI要素ピッカーは、昔は追跡セッションウィンドウという名前でした。) 「UI要素ピッカー」を使ってUI要素を追加する手順STEP Power Automate for desktopを起動します。 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要素を特定するための住所のようなものです。 セレクターの例
なんでUI要素(セレクター)を編集する必要があるの?「セレクタ〇〇を含む要素が見つかりません。」エラーへの対応のためUI要素をUI要素ピッカーで自動取得する方法をお伝えしました。 しかしこれらは完璧なものではありません。 これらを使って登録したUI要素ではUI要素を特定できずにフローが正常にできないことがあります。このような時は手動でUI要素を編集しなければいけない時があります。 UI要素を特定できないエラー「セレクタ〇〇を含む要素が見つかりません。」 クラス名やID名がコロコロ変わるWebページに対応するためHTMLのID名やクラス名がコロコロ変わるWebサイトは多く存在します。 そのようなWebサイトをターゲットにする場合はUI要素を手動で編集しなければならない場合があります。プログラムが動的に作成するWebサイトに多いです。 セレクターの書式じょじおセレクターはUI要素の住所を示す条件式のようなものとお伝えしました。ここでは条件式で使える書式について解説します。 セレクターの基本の書き方HTMLのUI要素のセレクターの基本の書き方は、HTMLタグを使って下記のように書きます。属性=値はオプションですのでなくてもOKです。階層構造を表現するために「>」を使います。 HTMLタグ1[属性=’値’] > HTMLタグ2[属性=’値’] > HTMLタグ3[属性=’値’] 例:html > body > nav > a[class=’wp-block-file__button’] 上の例は、「bodyタグの中のnavタグの中のクラス名が’wp-block-file__button’にマッチするaタグ」を表現しています。 セレクターの階層構造は省略して書ける。階層構造を表現する「>」は下記のように省略できる場合があります。たとえば滅多にない例ではありますがWebページ内にaタグがひとつしかない状況でaタグをUI要素に登録する場合は「a」と書くだけでUI要素の住所として成立します。 ターゲットのUI要素がid属性を持っている場合も階層構造を省略できます。 HTMLタグ HTMLタグ[属性=’値’] 例:a 例:a[id=’button’] サブ階層(子供の子供)を表現するには半角スペースを使う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において、
添え字(インデックス)を使って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要素を編集しよう。(実践編)じょじおここまでセクレターの基礎知識について解説しました。ここからは実際にセレクターを編集する方法について手順を解説します。セレクターを編集する方法には2つの方法があります。 セレクターを編集する2つの方法
ここからは架空のミッションを想定してUI要素を編集する例を紹介します。 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> 上記のHTMLにおいて、「UI要素ピッカー」でUI要素 ビジュアルセレクタービルダーを使用したセレクターの編集方法じょじおビジュアルセレクタービルダーを使う方法は、ほぼマウスクリックだけでセレクターを編集する方法です。 ぽこがみさまセレクターの入力補助が強力なので、簡単に作成できるしタイプミスによるエラーの可能性を減らすことができるよ。 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要素の登録・セレクター編集のコツじょじお
ターゲットの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で学びたい方はコチラ
¥2,200 (2022/11/22 08:56時点 | Amazon調べ) ポチップ▲Kindleと紙媒体両方提供されています。デスクトップフロー、クラウドフロー両方の解説がある書籍です。解説の割合としてはデスクトップフロー7割・クラウドフロー3割程度の比率となっています。両者の概要をざっくり理解するのにオススメです。
¥2,508 (2022/11/22 08:56時点 | Amazon調べ) ポチップ▲Power Automate for Desktopの基本をしっかり学習するのにオススメです。この本の一番のメリットはデモWebシステム・デモ業務アプリを実際に使ってハンズオン形式で学習できる点です。本と同じシステム・アプリを使って学習できるので、本と自分の環境の違いによる「よく分からないエラー」で無駄に躓いて挫折してしまう可能性が低いです。この点でPower Automate for desktopの一冊目のテキストとしてオススメします。著者は日本屈指のRPAエンジニア集団である『ロボ研』さんです。
¥2,750 (2022/11/22 08:56時点 | Amazon調べ) ポチップ▲Power Automate クラウドフローの入門書です。初心者の方には図解も多く一番わかりやすいかと個人的に思っています。 Microsoft 365/ Power Automate / Power Platform / Google Apps Script… Power Automateを動画で学びたい方はコチラ ▲Udemyで数少ないPower Automateクラウドフローを主題にした講座です。セール時は90%OFF(1200円~2000円弱)の価格になります。頻繁にセールを実施しているので絶対にセール時に購入してくださいね。満足がいかなければ返金保証制度がありますので安心してご購入いただけます。 |