（この記事は、2022/01/03に執筆しました）
この記事の前提条件。
- HTMLが何か知っている
- CSSが何か知っている
- Power Automate for desktopでWebページからデータを抽出したことがある
※参考: サンプルで使用したWebページは、以下のアドレスになります。
https://fukuyori.github.io/RPALT20220117/
01.CSSセレクターとは
CSSでデザイン定義を行う際、定義する場所を指定する記述方法です。Automation AnywhereではXPathを使ってWeb上の場所を指定しますが、Power Automate for desktopでは、CSSセレクタを使います。CSSを自分で書ける人は、以下のドキュメントを確認してください。
また、jQueryのセレクタ機能も使っています。
CSSセレクタの取得
GUIでWeb上のデータを取得する場合、以下のようにHTMLタグが連なって表示されます。
html > body > div:eq(0) > div > div:eq(1) > div:eq(0) > p:eq(0)
Power Automate for desktopのGUIではなく、ブラウザ(Microsoft Edge)の機能を使ってセレクタを取得することもできます。
取得したい箇所を右クリックし、「開発者ツールで調査する」を選択。HTMLのコードが表示され、該当の個所がハイライトしていますので、その箇所で右クリックして、「コピー」⇒「selectorをコピー」とします。
Chromeを使用している場合は、「開発者ツールで調査する」は「検証」になります。
#FirstLetter > p:nth-child(1)
Power Automate for desktopで取得した場合より、すっきりしています。CSSセレクターについて、少しわかるようになると、簡潔で、より柔軟性の高いCSSセレクターを記述できるようになります。
**※注意：**抽出プレビューでは、子要素のデータが表示されないことがあります。一度実行した後、変数の中を見て確認してください。
02.「Webページからデータを抽出する」
Power Automate for desktopの「Webページからデータを抽出する」のアクションで、以下の詳細設定ができます。
抽出形式
| 名称 | 説明 |
|---|---|
| 未定義 | データを取得しません |
| 単一の値 | 1つの値を取得します |
| 選択した値 | セレクタを複数指定して取得 |
| リスト | リスト形式で取得 |
| テーブル | テーブル形式で取得 |
| HTMLテーブル全体 | tableタグの内容をテーブル形式で取得 |
「選択した値」で取得
[リスト」で取得
「テーブル」で取得
テーブルや、リストで抽出するとき、基本CSSセレクターの指定する場所は、繰り返しが発生する場所です。そのあと、CSSセレクターで各項目の内容を指定してやります。
「HTMLテーブル全体」で取得
属性と正規表現
属性は、タグで囲まれた中の文字列は Own Text で取得できます。タグの中に書かれた属性の値を取得する場合は、その属性の名前を書きます。
取得する値は、正規表現を使って整形することができます。「100円」となっている場合は「\d+」と指定すれば、「100」と、数字だけの値を取得することができます。
正規表現の書き方は、以下を参照してください。
03.セレクター、結合子、フィルター
セレクター
自分で作成したWebページであれば、必要な場所に自分でタグを設定できますが、公開されているWebページは、利用しやすい形になっていません。目的の項目を見つけるには、HTMLタグを手繰って探るということをやります。その時使うのは、セレクターと結合子です。
| 名称 | 説明 | 例 |
|---|---|---|
| 全称セレクター | すべての要素 | * |
| 要素型セレクター | 要素名を指定 | input |
| クラスセレクター | class属性を指定 | .classname |
| IDセレクター | id属性を指定 | #idname |
| 属性セレクター | 属性を指定 | [attr] [attr=value] |
使用する優先度は、IDセレクター、要素型セレクター、クラスセレクター、属性セレクターの順番です。
IDセレクターは、原則として１ページ上でユニークになっています。原則に従っているページなら、IDが設定されている場所へ間違いなく飛ぶことができます。ただし、あくまで原則なので、IDが重複しているページもあります。その場合は、前後のタグの構造を確認する必要があります。
クラスセレクターが項目の内容を示す書き方（例えば、class="MemberList"のような意味のある単語が使われている）になっている場合、比較的安心して使用できます。しかし、大抵のページでクラスはデザインのために使われており、多数のクラス名が並んでいることが多い（例えば、class="css-1dbjc4n r-hvic4v r-1d2f490 r-1xcajam r-zchlnj r-1ykxob0"）ので、その場合は使用しない方がいいでしょう。
属性セレクターは、IDセレクターやクラスセレクターの選択に条件を付けたり、それ以外の属性を指定する場場合に使います。指定方法の詳細は以下のようになります。
| 構文 | 説明 | 例 |
|---|---|---|
| [attr] | その属性を持つ要素 | [name] |
| [attr=value] | 指定された属性の値が完全一致 [class="a b c"]は class="a b c"と一致 |
[class="bold-01"] |
| [attr~=value] | [class="b"]は class="a b c"と一致 |
[class~="red-02"] |
| [attr|=value] | [id|="pre"]は preとpre-viewと一致 |
[class|="red"] |
| [attr^=value] | 要素の最初の値に一致 | [class^="bold-02"] |
| [attr$=value] | 要素の最後の値に一致 | [class$="red-02"] |
| [attr*=value] | [id*="re"]はpreとrenと一致 | [class*="old"] |
| [attr operator value i] | 値の大文字と小文字を区別しません | [class$="LISTITEM1" i] |
| [attr operator value s] | 値の大文字と小文字を区別します | [id="ListItem1" s] |
^= は、属性の値の先頭からの一部分で一致します。a[href="https"] では、リンク先のURLがhttpsのものを選択することができます。しかし、$= は、値の末尾の部分一致はできないようです。a[href$=".com"] は動作しません。代わりにa[href*=".com"] で部分一致をさせることができます。
結合子
目的のデータを取り出すには、セレクタ、結合子、フィルターを使っていきます。出来るだけ、曖昧さのない、Webページの変更の影響を受けにくい組み合わせを見つけることがキモになります。
| 名称 | 構文 | 説明 | 例 |
|---|---|---|---|
| 子孫結合子 | A B | 子孫にあたるノード | #MainContent p |
| 子結合子 | A > B | 直接の子のノード | #MainContent > div > p |
| 一般兄弟結合子 | A ~ B | Aの後にあるBの要素 | p ~ p |
| 隣接兄弟結合子 | A + B | Aの直後のBの要素 | span + p |
jQueryのフィルター
| 構文 | 説明 | 例 |
|---|---|---|
| :first | 最初の要素 | h3:first |
| :last | 最後の要素 | h3:last |
| :even | 偶数番目の要素 | |
| :odd | 奇数番目の要素 | |
| :eq() | 指定したインデックス番号の要素 | h3:eq(0) |
| :lt() | 指定したインデックスより小さい番号の要素 | h3:lt(1) |
| :gt() | 指定したインデックスより大きい番号の要素 | h3:gt(1) |
| :not() | 動作未確認 |
even
偶数番目の要素ですが、0から始まるので、選択されるのは、１と３です。
odd
奇数番目の要素ですが、0から始まるので、選択されるのは、２と４です。
eq()
番号は、０から始まります。
lt
jQueryの子要素フィルタ
| 構文 | 説明 | 例 |
|---|---|---|
| :first-child | 最初の子要素 | #Table-1 > tbody > tr > :first-child |
| :first-of-type | セレクタで指定された 最初の子要素 |
#Table-1 > tbody td:first-of-type |
| :last-child | 最後の子要素 | #Table-1 > tbody > tr > :last-child |
| :last-of-type | セレクタで指定された 最後の子要素 |
#Table-1 > tbody td:first-of-type |
| :only-child | 子要素が １つだけのときに取得 |
|
| :only-of-type | セレクタで指定された要素が １つだけのときに取得 |
|
| :nth-child() | 親要素内にあるセレクタで 引数で指定した要素 |
#FirstLetter > span:nth-child(2) |
| :nth-of-type() | セレクタと引数で指定された要素 | #FirstLetter > p:nth-of-type(2) |
| :nth-last-child() | nth-childを最後から数える | #FirstLetter > :nth-last-child(2) |
| :nth-last-of-type() | nth-of-typeを最後から数える | #FirstLetter > span:nth-last-of-type(2) |
first-child
最初の子要素を取得。セレクタを指定した場合、１番目の子要素に一致しない場合は取得できません。
first-of-type
first-childと異なり、最初の子要素でなくても取得できます。
nth-child, nth-of-type
最初のセレクタを１として数えます。【注意】:eqの場合は、0から始まります。
nth-last-child, nth-last-of-type
最後のセレクタを１として数えます。※図ではnth-child, nth-of-typeになってますが、nth-last-child, nth-last-of-typeの誤りです。
jQueryのコンテンツフィルタ
| 構文 | 説明 | 例 |
|---|---|---|
| :contains() | 引数で指定した文字列を含む要素 | #rsltlst > li:contains("ルート") |
| :has() | 指定したセレクタを「子孫要素」に持つ要素 | li:has(span) |
| :empty | Own Textが何もない要素 | div:empty |
| :parent | 動作未確認 |
contains
empty
