Power Automate Desktop｜セレクターに変数を組み込む

ループの中で、セレクターを動的に変更したい！

できますよ。それを実現するセレクターに変数を組み込む方法について解説します。

フローを作成しながら解説しています。

では、実際にフローを作ってみましょう！

この記事を書いた人

この記事を書いた人

こさい

（株）完全自動化研究所代表のこさいです。

1) エンジニア歴25年超。RPA支援8年超。
2) RPA関連の書籍を6冊出版。
3)ご質問・お仕事のご依頼はこちら！

セレクターに変数を組み込む

こさい

まずは準備から始めよう！
サンプルWebサイトを操作してね

よし、やってみるね

めーたん

以下の操作を手作業で行ってください。

準備しよう

STEP1　サンプルWebサイトを表示する

Microsoft Edgeを起動して、サンプルWebサイトを開いてください。

サンプルWebサイトのURL：https://marukentokyo.jp/sample_website/?prm=1

【図1】サンプルWebサイトの表示

STEP2　ログイン操作を行う

［ユーザーID］に「login@marukentokyo.jp」と入力してください（図2❶）。［パスワード］に「password」と入力してください（図2❷）。［ログイン］をクリックしてください（図2❸）。

【図2】サンプルWebサイトのログイン操作

STEP3　［読みました］をクリックする

ログインに成功すると［お知らせ］画面に遷移するので、下にスクロールして（図4❶）、［読みました］をクリックしてください（図4❷）。

【図4】［読みました］をクリック

STEP4　［商品マスタ］をクリックする

［メニュー］画面に遷移するので、［商品マスタ登録］をクリックしてください（図5❶）。

【図5】［商品マスタ登録］をクリック

商品マスタ登録画面が表示されます（図6）。

【図6】商品マスタ登録画面

商品マスタ登録画面が開いたよ

めーたん

こさい

OK。これで準備は完了！
この画面は開いたままにしておいてね。

フローを作成しよう

準備が完了したのでフローを作成しましょう。

こさい

ここからは実際にフローを作成していくよ！

ちょっと待って。
どんな動きをするをするフローなの？

めーたん

これから作成するフローを実行すると、図７のように商品マスタ登録画面に値が入力されます。

【図7】フローの実行結果

商品マスタ登録の全部の項目に
値が入力されるフローね♪

めーたん

こさい

そういうこと！
じゃ、作ってみよう。

STEP1　フロー［高度なUI認識テクニック］を作成する

新しいフロー［高度なUI認識テクニック］を作成してください（図8）。

【図8】フロー［高度なUI認識テクニック］のフローデザイナー

STEP2　［変数の設定］アクションを追加する

［変数］アクショングループを開いて（図9❶）、［変数の設定］アクションを追加してください（図9❷）。

【図9】［変数の設定］アクションの追加

［変数の設定］ダイアログが開くので、［変数］を［ary1］に変更し（図10❶）、［値］に

%['A001', 'Item01', 'MK01', '10000', 'test']%

と入力してください（図10❷）。

設定が完了したら［保存］をクリックしてください（図10❸）。

【図10】［変数の設定］アクションの設定

このアクションを実行することにより、リスト型の変数［ary1］が生成されます（図11）。リスト型の変数の作り方については「リストの作成方法」をお読みください。

【図11】リスト［ary1］の値

STEP3　［新しいMicrosoft Edgeを起動］アクションを追加する

［ブラウザー自動化］アクショングループを開いて（図12❶）、［新しいMicrosoft Edgeを起動］アクションを［変数の設定］アクションの後に追加してください（図12❷）。

【図12】［新しいMicrosoft Edgeを起動］アクションの追加

［新しいMicrosoft Edgeを起動］ダイアログが開くので、［起動モード］のドロップダウンリストから［実行中のインスタンスに接続する］を選択してください（図13❶）。［Microsoft Edgeタブに接続する］のドロップダウンリストから［タイトルを使用］を選択してください（図13❷）。［タブのタイトル］には自動的に図13❸のようにタイトルが入力されます。設定が完了したら［保存］をクリックしてください（図13❹）。

【図13】［新しいMicrosoft Edgeを起動］アクションの設定

STEP4　［変数の設定］アクションを追加する

［変数］アクショングループを開いて（図14❶）、［変数の設定］アクションを［新しいMicrosoft Edgeを起動］アクションの後に追加してください（図14❷）。

【図14】［変数の設定］アクションの追加

［変数の設定］ダイアログが開くので、［変数］を［LoopIndex］に変更し（図15❶）、［値］に「0」と入力してください（図15❷）。設定が完了したら［保存］をクリックしてください（図15❸）。

【図15】［変数の設定］アクションの設定

STEP5　［For each］アクションを追加する

［ループ］アクショングループを開いて（図16❶）、［For each］アクションを［変数の設定］アクションの後に追加してください（図16❷）。

【図16】［For each］アクションの追加

［For each］ダイアログが開くので、［反復処理を行う値］に「%ary1%」と入力し（図17❶）、［保存］をクリックしてください（図17❷）。「%ary1%」の入力は｛X｝（変数の選択）を使うと入力間違いを防ぐことができます。

【図17】［For each］アクションの設定

For eachについては「For eachの使い方」の記事で詳しく解説しているので、併せてお読みください。ここまでのフローを確認してください（図18）。

【図18】ここまでのフロー

STEP6　［Webページ内のテキストフィールドに入力する］アクションを追加する

［ブラウザー自動化⇒Webフォーム入力］アクショングループを開いて（図19❶❷）、［Webページ内のテキストフィールドに入力する］アクションを［For each］アクションと［End］アクションの間に追加してください（図19❸）。

【図19】［Webページ内のテキストフィールドに入力する］アクションの追加

［Webページ内のテキストフィールドに入力する］ダイアログが開くので、［Webブラウザーインスタンス］に［%Browser%］が設定されていることを確認してください（図20❶）。［UI要素］のドロップダウンリストをクリックし（図20❷）、表示されたメニューの［UI要素の追加］をクリックしてください（図20❸）。

【図20】［Webページ内のテキストフィールドに入力する］アクションの設定

フローデザイナーが最小化され、UI要素ピッカーが表示されます（図21❶）。サンプルWebサイトの［商品コード］の入力ボックスを［Ctrl］キーを押しながらクリックしてください（図21❷）。

【図21】UI要素ピッカーとサンプルWebサイト

UI要素ピッカーが最小化され、フローデザイナーが表示されます。［Webページ内のテキストフィールドに入力する］ダイアログの［UI要素］に［商品コード］の入力ボックスのセレクターが入力されていることを確認してください（図22❶）。

［テキスト］に「％CurrentItem％」と入力してください（図22❷）。「％CurrentItem％」の入力は｛X｝（変数の選択）を使うと入力間違いを防ぐことができます。設定が完了したら［保存］をクリックしてください（図22❸）。

【図22】［Webページ内のテキストフィールドに入力する］アクションの設定

STEP7　［変数を大きくする］アクションを追加する

［変数］アクショングループを開いて（図23❶）、［変数を大きくする］アクションを［Webページ内のテキストフィールドに入力する］アクションの後に追加してください（図23❷）。

【図23】［変数を大きくする］アクションの追加

［変数を大きくする］ダイアログが開くので、［変数名］に「%LoopIndex%」と入力し（図24❶）、［大きくする数値］に「1」と入力してください（図24❷）。設定が完了したら［保存］をクリックしてください（図24❸）。「% LoopIndex %」の入力は｛X｝（変数の選択）を使うと入力間違いを防ぐことができます。

【図24】［変数を大きくする］アクションの設定

フローが完成しました。フローを確認してください（図25）。

【図25】完成したフロー

商品コードに入力するところまでできたね。

めーたん

こさい

そう。第一段階は完成だね。
でも、このままじゃ、商品コードにしか値が入らないから
セレクターを編集して全項目に値が入るようにするよ！

セレクターを編集しよう

こさい

いよいよセレクターを編集しましょう。

がんばるわ！

めーたん

［Webページ内のテキストフィールドに入力する］アクションの［UI要素］にサンプルWebサイトの［商品コード］入力ボックスを指定しました。このUI要素をループ処理の中で動的に変更しながら、［商品名］入力ボックス、［メーカーコード］入力ボックス…と、［備考］までのすべての入力ボックスを指定できるように変更します。

少し難しいですが、次の手順通りに設定してください。

STEP1　UI要素ペインを開く

フローデザイナーの［UI要素］をクリックしてください（図26❶）。UI要素ペインが開きます（図26❷）。

【図26】UI要素ペイン

STEP2　カスタムセレクタービルダーを開く

UI要素［Input text ‘itemcd’］の右側の3点アイコンをクリックしてください（図27❶）。メニューが表示されるので［編集］をクリックしてください（図27❷）。

【図27】編集をクリック

カスタムセレクタービルダーが表示されます（図28）。カスタムセレクタービルダーではセレクター（UI要素を特定する文字列のこと）を編集することができます。

【図28】カスタムセレクタービルダー

STEP3　セレクターを編集する

［要素］を一番下までスクロールする（図29❶）。12番目の要素をクリックし（図29❷）、［id］のチェックを外してください（図29❸）。［セレクターをプレビューする］に「input」と表示されます。

【図29】セレクターの編集-1

10番目と11番目の要素にチェックを付けてください（図30❶❷）。［セレクターをプレビューする］に「tr:eq(0) > td:eq(1) > input」と表示されます。

【図30】セレクターの編集-2

［テキストエディター］を［有効］にしてください（図31❶）。テキストエディタ―に表示が切り替わります。

【図31】セレクターの編集-3

STEP4　テキストエディターを操作する

「tr:eq(0)」の「0」を消してください（図32❶）。[｛X｝変数の選択]をクリックしてください（図32❷）。

【図32】テキストエディターの操作-1

選択可能な変数の一覧が表示されるので、［LoopIndex］をダブルクリックしてください（図33❶）。

【図33】テキストエディターの操作-2

「tr:eq(%LoopIndex%) > td:eq(1) > input」と表示されていることを確認して、［保存］をクリックしてください（図34❶）。

【図34】テキストエディターの操作-3

こさい

これですべてのフロー作成作業は完了だよ！

初めて触る画面だったから緊張したわ！
でも、できた、、と思う。

めーたん

実行しよう

こさい

フローを実行してください。

サンプルWebサイトが選択されます。商品マスタ登録画面の［商品名］入力ボックス、［メーカーコード］入力ボックス…と、［備考］までのすべての入力ボックスにリスト［ary1］の値が入力されます。

図35の画面になったところでフローが終了します。

【図35】フローの実行結果

めーたん

うまく行った！！

うまく行かなったら、どこか間違っていないか
よく確認してみてね。

こさい

まとめ

カスタムセレクタービルダーを使ってセレクター内に変数を組み込む方法を解説しました。フローを実際に作ってみると、意味がより理解できたと思います。

動的にセレクターを変動させることで、1つのアクションで複数のＵＩ要素をコントロールできました。柔軟なオートメーションが実現できましたね。利用する場面も多いので、活用してください。