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

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

Power Automate for desktopでブラウザー操作・スクレイピングで困っている方に絶対に見てほしい！！UI要素を追加・編集する方法について解説しました。

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

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

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

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

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

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

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

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

名前 住所 電話番号

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

UI要素編集のミッション

上記のHTMLにおいて、「UI要素ピッカー」でUI要素 a[id='f-list3'] を登録しました。しかしid=’f-list3’はWebページを開くたびにid属性の値が変更されてしまいます。このためPADのアクションが初回は正常に動作したものの2回目の実行以降動作しません。id属性を使用せずに同一のUI要素を特定できるようにセレクターを編集しなさい。

ビジュアルセレクタービルダーを使用したセレクターの編集方法 UI要素ペインの中の編集するUI要素にマウスカーソルを合わせダブルクリックします。 小さいウィンドウが表示されるのでセレクターを選択してダブルクリックします。 ビジュアルセレクタービルダーが起動します。
  • 要素を操作するペイン
    • 要素をオフオンすることができます。
    • 要素に属性の条件文をオフオンすることができます。
    • 上の２つのペインの操作結果によってリアルタイムでセレクターが変化します。ビジュアルセレクタービルダーではここを直接編集することはできません。
    セレクターのペインの一番下をクリックして選択します。 ID属性のチェックを外します。 ID属性を外したことにより自動的にセレクターが更新されたことを確認します。 liタグにチェックを入れます。 1階層上のli要素にチェックを入れます。

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

    セレクターが完成しました。 カスタムセレクタービルダーを使用したセレクターの編集方法 UI要素ペインの中の編集するUI要素にマウスカーソルを合わせダブルクリックします。 小さいウィンドウが表示されるのでセレクターを選択してダブルクリックします。 セクレタービルダーの「カスタム」のチェックをオフにします。 カスタムセレクタービルダーが起動します。

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

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

    a:contains(‘melon’)

    UI要素の登録・セレクター編集のコツ
    • 目的のUI要素にID属性が付いている場合はID属性を一発指定で簡単に書ける。この場合階層を含めて書く必要はない（例：a[id=’button’]）
    • 目的のUI要素にID属性が無い場合はある程度階層構造を含めて書く（例：div[id=’value-section’] > a）
    • セクレターはUI要素を一意に特定できれば良いので「html > body > div[class=’main’] > （以下省略）」のようにトップレベルのhtmlから書く必要はない。書いても良いけどカッチリ書き過ぎるとWebサイトのちょっとしたデザイン変更があったときに動作しなくなりやすいのでむしろカッチリ書かない方がいい。
    • WebページによってHTMLのID属性やクラス名がころころかわるページがある。そんなサイトをターゲットにするときは、変わらない部分を見つけて変更の影響を受けないように書く方法を探そう。（例：このクラス名はコロコロ変わるけどこっちのクラス名は固定だからこっちを使って書こう！みたいな。）
    • セレクターを1から書く時は「html > body …」とトップダウンでたどるよりもターゲットとなるUI要素からボトムアップでたどっていく方が効率的に書けるかなと思います。

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

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

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

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

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

    ブラウザー自動化系のアクションが動かない 昨日まで動いていたけど動かない

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

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

    まとめ

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

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

    Power Automate学習教材 Power AutomateをKindleで学びたい方はコチラ ＼最大10%ポイントアップ！／ ＼最大10%ポイントアップ！／

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

    ＼最大10%ポイントアップ！／

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

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

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

    ▲Udemyで数少ないPower Automateクラウドフローを主題にした講座です。 セール時は90%OFF（1200円～2000円弱）の価格になります。頻繁にセールを実施しているので絶対にセール時に購入してくださいね 。満足がいかなければ返金保証制度がありますので安心してご購入いただけます。

    お役に立てたらシェアお願いします！ URLをコピーしました！ URLをコピーしました！ 定時に帰りたい人 | RPAer リライブシャツすごすぎワロタｗｗｗｗｗｗ ライフハック 61411 Power AutomateでTeamsにメンションを付けて投稿する方法を解説します！ Microsoft Teams 39004 Power Automate for desktop 活用事例集！ Power Automate Desktop 37867 Teamsユーザは絶対に使い方を覚えるべきMicrosoftリストとは？ SharePoint 35084 Teamsのライブキャプション・トランスクリプション・レコーディング Microsoft Teams 25810 テレワークの業務効率化・時短におすすめの厳選ツール6選を紹介！ 無料で使えるマインドマップツールEdrawmind（エドラマインド）！ 【超初心者向け】Microsoft PublisherをVBAで操作する！ 【初心者向け】Excel VBAでPublisherを操作する！ Excelアドインをショートカットと右クリックメニューから呼び出す。 Power Automateのイチオシ記事
    • Power Automate レシピ集！
    • Power Automate Desktop レシピ集！
    • > Power Automateのその他の記事を見る！
    Teamsのイチオシ記事
    • Teamsでよくある質問やトラブルの対処方まとめ
    • Teamsのメンションのまとめ
    • Teamsの３つの会議機能の使い方まとめ（文字起こし・録画・字幕）
    • > Teamsのその他の記事を見る！
    VBAのイチオシ記事
    • Outlook VBA 超絶初心者向け解説！
    • Excel VBA コピペで使えるコード集！
    • Excel VBAでテーブル操作のコード集！
    • ＞ VBAの全部の記事を見る！
    Pythonのイチオシ記事
    • Python独学なら 圧倒的に デイトラ をおすすめする理由
    • Pythonでデータクレンジング！
    • 出会って5秒でパイソン（Google Colab）
    • Pythonでスプレッドシート操作する

    ▲Power Automate for desktop関連書籍を全部読んだ管理人が、初心者の方の最初の一冊にオススメする本です。