OpenIAPカテゴリー: 3.6. Recorder and Selectors

OpenRPAでワークフローを作成する場合、レコーディングを行うことをお勧めします。デザイナーにアクティビティを延々とドラッグするのではなく、ユーザーがレコーダーを使用してステップを記録することが望ましいです。

レコーダーの使用方法は非常に簡単で、ユーザーはレコーダー・ボタンをクリックして、自動化されるタスクを実行するだけです。記録中に、入力フィールドに特定の変数の内容を入力することが面白いと感じた場合、ユーザーはダミーテキストを使用し、レコーダーを閉じた後、アクティビティを使用してこれらのダミーテキストを変数に変更することができます。

セレクタは、レコーダと密接に関係しています。Recorderは、基本的に、クリックされたものがあれば、ユーザーのためにセレクタを構築する。セレクタは基準のセットであり、それを使ってOpenRPAは明確に要素を見つけることができると期待されています。

ユーザがゼロからセレクタを作成することも可能ですが、これは推奨されません。

レコーダーを使った自動化の徹底的な例は、「Windowsオートメーション」のセクションで紹介しています。

OpenRPAでは、Recorderに関連する設定をカスタマイズすることができます。例えば、録画中に要素をハイライトしたり、RecorderがDesignerにアクティビティを追加する方法を変更したりできます。詳しくはParameters、特にrecording_add_to_designerと record_overlayをご覧ください。

まず、録画中に何らかの要素をクリックすると、Recorderはクリックされた要素が Windows UI 要素に属すると仮定します。次に、いくつかのロジックを処理し、ユーザーが記録しようとしているアクションに適合する、より良いテクノロジがあるかどうかを確認します。見つかった場合、Recorderは自動的に「Windows」から最も適切な技術に置き換えられ、WebElementのクリック、SAPの入力フィールドへの入力、Excelシートへのデータ書き込みなど、自動化をよりよく処理するアクティビティが提案されます。別の技術を探すロジックが失敗した場合、つまり、より有用なものが見つからない場合、Recorderは Windows UI Element用のセレクタを構築します。

つまり、Recorderを使用してExcelのセルをクリックすると、Recorderはまずその要素がWindows UI 要素であると仮定しますが、その後それがExcel 要素であることに気づき、そのタスクにより適しているため、Windows.GetElementから Office.Activity.WriteCellに自動的にアクティビティを置き換えるのです。

SAP、IE、Java、Image、NM（NativeMessaging：Chrome、Firefox、Edge）など、すでに実装されている技術も多く、今後さらに増えていく予定です。

時には、単一の要素ではなく、複数の要素を取得する必要がありますが、これはセレクタを調整することで実現できます。例．Googleで検索した後、多くの結果が表示され、ユーザーは最初の1つだけでなく、すべての結果を操作したいとします。

ここでは、その方法を簡単に説明します。Google検索の例と同じように、レコーダーを使って、検索結果の中からエントリーを選択します。

レコーダーは、あなたがその特定の項目だけを望んでいると仮定し、セレクターはそれを考慮して作られていることに注目してください。

1つだけでなく複数の要素を返すようにするには、まずMaxResultsプロパティを1より大きい数値に変更します（上限はありません）。

ここで、セレクタの基準を変更し、単一の要素ではなく、要素の配列を返すようにする必要があります。WebElements を扱う場合は、xpathパラメータを変更して、より広範な結果を返すようにすることで実現できます。

さて、この広い配列の各要素をループさせるために、Recorderが最初に作成した配列の中に、別のGetElementActivityを組み込みます。

新しく作成したGetElementの セレクタを開くと、左側にエレメント ツリーがあり、操作するものをさらに選択することができます。ハイライトボタンを使ってデバッグし、正しい要素が選択されているかどうかを確認します。

ここで、特定のエントリごとにさらなる自動化が必要な場合、それらのアクティビティを内側のGetElement内に追加します。

セレクタを自分のニーズに合わせて調整する方法はたくさんあります。このセクションでは、セレクタに変数を渡す方法、ワイルドカード(https://ryanstutorials.net/linuxtutorial/wildcards.php) を使って要素をループさせる方法、セレクタの中でネストさせる方法、その他いくつかのトリックを学びます!

セレクタに変数を渡すのはとても簡単です。ユーザはMustache(https://mustache.github.io/mustache.5.html) 構文を使って既存のパラメータに値を追加するか、セレクタの内部でカスタムパラメータを使用することができます。

この例では、Recorder を使って Google Search ページ内の要素をキャプチャし、既存のSelectorパラメータに追加する変数を渡します。

ユーザーは、Google（https://www.google.com/）のメインページで検索したい検索入力を自由に入力することができます。この場合、作者はrabbitmqを選択しました。

ここで、ユーザーはOpenRPAを開き、新しいワークフローを作成する必要があります。筆者は「Manually Adjusting Selectors」と名付けました。

Sequenceの中をクリックし、OpenRPAのリボン内にあるRecorderボタンをクリックします。次に、ページ内の要素内をクリックします。

ユーザーがInternet Explorerを使用している場合は、新しいOpenRPA.IE.GetElementActivityが表示されます。一方、ユーザーがEdge、Chrome、Firefoxを使用している場合、新しいOpenRPA.NM.GetElementアクティビティが表示されます。

ここで、ユーザーは「セレクタを開く」ボタンをクリックする必要があり、セレクタ デザイナーが表示されます。

現在、ユーザーはxpathパラメータの一部のみを置き換えることになります。xpathパラメーターのdiv/span/span[2]部分を取り除き、取り除いた値を代入する変数名を含むMustache 式 を 追加します。著者はその変数の名前をselectorValueにしたので、Mustache 式は {{selectorValue}} になる。

この後、ユーザーはOkボタンをクリックしてセレクタ デザイナーを閉じることができます。

ここでユーザーはこの変数に値を代入する必要があります。値はxpathパラメータから取り除かれた値ですが、何でもかまいません。

操作の可能性は無限大。CSS セレクタを使うこともできます。詳しくは「CSSセレクタの使い方」をご覧ください。

Assignアクティビティをメインシーケンスにドラッグし、GetElementアクティビティのすぐ上に置きます。selectorValueという名前を付けて、前に取り除かれた値、つまり「div/span/span[2]」を代入してください。Ctrl+Kキーを押して、変数を作成します。

ここで、GetElementアクティビティのSequence内のClick Elementアクティビティを削除し、その中にAssignアクティビティをドラッグして、値が本当にキャプチャされたかどうかをテストできるようにします。

selectorTextという変数に名前を付ける – これは完全に任意の値で、ユーザーは実際に好きな名前を付けることができます。

この変数にitem.Textを代入します。

最後に、「通知を表示」アクティビティをメインシーケンスにドラッグし、その「メッセージ」入力フィールドにセレクタテキストを挿入します。

今、ワークフローを実行すると、取得したメッセージを含む通知が表示されます。

XPath セレクタ(https://www.w3schools.com/xml/xpath_syntax.asp) と同様に、CSS セレクタ(https://www.w3schools.com/cssref/css_selectors.asp) も使用することができます。このセクションでは、CSS セレクタを使用して、前のセクションで選択したspan要素のクラスに関連するすべての項目を、cssselectorパラメータ内に属するCSSセレクタを渡すだけで選択する方法を学びます。

まず、span要素の クラスに 属するCSSクラスを特定する必要があります。

F12キーまたはCtrl+Shift+Iキーで操作できます。

すると、「コンソール」ウィンドウが表示されます。Elementsタブをクリックします。

ここで、Ctrl+Shift+Cを押して、span要素を選択します。

選択された要素が継承する 最初の ``div`` の CSS クラス名をコピーします。この例では、.IsZvecというクラスがそれにあたります。このクラスの名前はどこかに保存しておいてください。

ここで、OpenRPAを開き、Recorderボタンをクリックします。そして、ページ内の要素をクリックします。

新しいGetElementActivityの中のSequenceから Click ElementActivityを削除する。

ここで、ユーザーは「セレクタを開く」ボタンをクリックする必要があり、セレクタ デザイナーが表示されます。

下の画像に示すように、xpathパラメータを削除し、値".IsZvec" を持つ新しいcssselectorパラメータを追加します。最後に、Okボタンをクリックして、変更を保存します。

ここで、ユーザーはMaxResultsパラメータを適切な数値に変更する必要があります。この例では、Googles Search Engineは1ページに10件の結果しか表示しないので、作者はMaxResultsを10に設定しました。

OpenRPAが事前に設定したcssselectorを含む要素を見つけられない場合に備えて、ユーザーはMinResultsも 0に変更する必要があります。

最後に、Timeoutパラメータを00:00:00またはTimeSpan.FromSeconds(0)に設定することが推奨されます。

これで、NM/IE.GetElementActivity内のSequenceに入れられたActivityは、.IsZvecクラスを含むすべての要素に対してループされることになります。

このSequenceの最後にWriteLineアクティビティをドラッグして、そのText入力にitem.Textの値を代入することで、上記をテストすることができます。

これでワークフローを実行すると、以前設定したクラスを含むすべての要素についてテキストが表示されます。

以上です。これで、OpenRPAでCSS セレクタを設定する方法がわかりました。

このセクションでは、CSS セレクタを使用する方法と同様に、XPath セレクタを使用して、指定されたHTML DOM Element Object(https://www.w3schools.com/jsref/dom_obj_all.asp) 内の複数の要素をキャプチャする方法を学びます(https://www.w3schools.com/xml/xpath_syntax.asp) 。

OpenRPAを開き、Recorderボタンをクリックします。次に、ページ内の要素をクリックします。

新しいGetElementActivityの中のSequenceから Click ElementActivityを削除する。

ここで、ユーザーは「セレクタを開く」ボタンをクリックする必要があり、セレクタ デザイナーが表示されます。

これで、ユーザーはxpathパラメーターの一部だけを切り取ることができます。xpathパラメーターのdiv[3]/div/div[2]/div/span の部分文字列をdiv[*]/div/div[2]/div/span に置き換えるのです。これにより、OpenRPAは10個の検索要素をすべて捕捉することができます。

この後、ユーザーはOkボタンをクリックしてSelector Designerを終了することができます。

Recorderで生成されたIE/NM.GetElementActivity内のSequenceに WriteLineActivityをドラッグして、そのText入力フィールドにitem.Textの値を代入することで動作確認ができるようになりました。

ワークフローを実行すると、検出された10個のスパン要素が正常に取り込まれたことが確認できます。