MENU
  • TOP
  • サービス紹介
    • ITツール導入
      • RPA導入支援
      • BIツール導入支援
      • アプリ開発支援
      • Microsoft 365導入・活用支援
      • お手軽クラウドフォルダ
    • DX/IT人材育成​
    • AI導入支援
      • Azure OpenAI Service導入支援
      • 生成AI研修サービス
      • AI ロボット
    • 組織改革・DX推進
    • デジタル業務支援
  • 事例紹介
  • コラム
  • 支援ツール一覧
  • セミナー
  • 会社概要
    • 会社概要
    • 役員・マネジャー紹介
  • 採用情報
  • ロボフィスのDX戦略
  • お問い合わせ
  • 資料請求
ロボフィス株式会社
  • サービス紹介
    • ITツール導入
      • RPA導入支援
      • BIツール導入支援
      • アプリ開発支援
      • Microsoft 365導入・活用支援
      • お手軽クラウドフォルダ
    • DX/IT人材育成​
    • AI導入支援
      • Azure OpenAI Service導入支援
      • 生成AI研修サービス
      • AI ロボット
    • 組織改革・DX推進
    • デジタル業務支援
  • 事例紹介
  • コラム
  • 支援ツール
  • セミナー
  • 会社概要
  • お問い合わせ
  • 採用サイト
  • 資料請求
資料ダウンロード
ロボフィス株式会社
  • サービス紹介
    • ITツール導入
      • RPA導入支援
      • BIツール導入支援
      • アプリ開発支援
      • Microsoft 365導入・活用支援
      • お手軽クラウドフォルダ
    • DX/IT人材育成​
    • AI導入支援
      • Azure OpenAI Service導入支援
      • 生成AI研修サービス
      • AI ロボット
    • 組織改革・DX推進
    • デジタル業務支援
  • 事例紹介
  • コラム
  • 支援ツール
  • セミナー
  • 会社概要
  • お問い合わせ
  • 採用サイト

【WinActorの使い方】Xpathの使い方を習得して、ブラウザ操作を安定稼働させよう

2024 6/14
RPA技術tips​ コラム
2023-05-30
  1. コラム
  2. RPA技術tips​
  3. 【WinActorの使い方】Xpathの使い方を習得して、ブラウザ操作を安定稼働させよう

WinActorでブラウザ操作を自動化する際、Xpathは必須知識です。
Xpath <XML Path Language>とは、HTMLドキュメントの中から、ボタンやインプットボックスなどの要素を見つけるための住所のようなものです。

過去コラム、「【WinActorを活用しよう!】残業ゼロも夢じゃない? 「ブラウザ操作」をマスターして交通費精算業務を自動化!」ではWinActorを使った基本的なブラウザ操作について説明しました。本コラムでは、WinActorでWebブラウザを操作する応用編として、より高度なXpathの指定方法について解説します。

【無料公開資料】WinActorの使い方

大好評連載中のコラム「WinActorの使い方」に掲載した、「Excelの請求書作成業務の自動化」「システム転記作業の自動化」「交通費精算業務の自動化」3本をまとめた、教科書的資料です。
シナリオづくりで迷った際に手元に一部あると便利です! また、社内教育にもお役立てください。

資料ダウンロードはこちら
目次

WinActorでXpathを自分で書くメリット

前回のコラムでは、WinActorでWebブラウザを操作する際、Xpathの取得を 「デベロッパーツール※を開く」⇒「ページ内の要素を選択」⇒「Xpathのコピー」 で行いました。
※開発者用の検証ツール(デバッグツール)のこと。WebサイトのHTMLやCSSを仮編集したり、ページのパフォーマンスやエラーを調べたり、スマートフォン表示をシミュレートしたりすることができる。各ウェブブラウザの機能に含まれている。開発者ツールとも。

【WinActorの使い方】残業ゼロも夢じゃない? 「ブラウザ操作」をマスターして交通費精算業務を自動化!

技術tips05 ブラウザ操作

この方法でもWinActorのシナリオは動くのですが、1点、課題があります。

上記方法でWinActorによる自動化を行っても「コントロールが動的に変化した場合、同じXpathで操作が効かなくなる」ことがあるという点です。

つまり、Webページの改修や環境の変化によって、急にWinActorのシナリオにエラーが起きる、といったケースが発生するということです。

具体的な例を挙げて説明していきましょう。

例えば、下記の弊社ホームページにて「NHK World Japanにロボフィスの記事が掲載されました」の「お知らせ」をクリックさせるシナリオをWinActorで作成したい場合、「Xpathのコピー」で取得できるXpathは以下です。

//*[@id=”main_content”]/div/div/div[10]/div/div[2]/dl[1]/a

『dl[1]』に当たる箇所は、『お知らせの中の「1」つ目』という意味。

上記のXpathを指定すると「お知らせ」(1行目)に飛びます。

仮に「お知らせ」が更新されて、一番上の行に新たな情報が加わった場合、本来クリックしたい情報「NHK World Japanにロボフィスの記事が掲載されました」は2行目にずれ込むため、上記のXpathではほしい情報に飛ぶことができなくなります。

同様に、ページが改修されたり、ログインするアカウントが異なったりする場合も、「Xpathのコピー」の手法ではエラーとなる可能性があります。

そういった環境の変化に耐えうる、安定性の高いシナリオをWinActorで作成するために、「Xpathのコピー」ではなく「Xpathを自分で書く」ことが有効になります。

Xpathの理解に必要なHTML

Webアプリケーションのボタンや入力ボックスは、HTMLと呼ばれる言語で構成されています。

HTML<”HyperText Markup Language>とは、Webページの記述言語のことです。Xpathを記述する際にはディベロッパーツールを起動させ、Webページの骨組みや構造をある程度理解することが求められます。そのため、Webブラウザを操作するためにXpathを記述するのなら、HTMLの基本的な考え方を理解しておく必要があります。

① 基本構造

HTMLは要素を階層(ツリー構造)で表記することで構成されます。フォルダ・ファイル構成と同様と考えるとイメージしやすいでしょう。
※文書やデータの意味や構造を記述するためのマークアップ言語の一つ。データ記述用の言語であり、Webを装飾するための言語であるHTMLとは似ているが用途が異なる。

② HTMLの名称に関して

デベロッパーツールでHTMLのソースコードを確認すると、以下のような要素の集合で構成されているのが分かります。それぞれの部分の名前について覚えていきましょう。

Xpathを手書きする際は、これから学習する内容を使用して、対象となる要素を特定します。

<div class=”p-postSlider_title“>お知らせ</div>

要素:<>~<>までの一塊のこと
タグ:それぞれの要素の種類
属性:各要素に持たせる設定(の種類)
属性値:各要素に持たせる設定(の内容)
テキスト:画面上に表示される文字列

③ 代表的なタグに関して

それぞれの要素はタグによって役割が異なります。
例えば、別のURLに飛ぶためのリンクの多くは<a>タグで始まる要素で構成されています。

以下が、特に自動化で使用する代表的なタグです。

構造系コントロール系テーブル系
<p>:段落を表す<a>:リンクを設定する<table>:表を作る
<div>:特定の範囲をグループ化する(改行あり)<button>:ボタンを作成する<th>:表の見出し(ヘッダ)
<span>:特定の範囲をグループ化する(改行なし)<input>:入力欄を作成する<tr>:表の行
<li>:リストの項目を表す<select>:セレクトボックスを作成する<td>:表の列
<iframe>:インラインフレームを作成する<img>:画像を表示する<h●>:見出し

Xpathの記法

以上を踏まえて、Xpathの記法に関して学んできます。

例として、以下の弊社コーポレートサイトのトップページにある『DX・RPA初心者』の表記をクリックさせる方法を考えてみましょう。

ロボフィストップページとディベロッパーツール

該当のコントロールの要素(HTMLソース上の1区分)はデベロッパーツールで以下の通りです。

<span class=”swl-fz u-fz-l”>DX・RPA初心者</span>

先ほどの「HTMLの名称に関して」を参照すると以下の事が言えると思います。

①タグは『span』

②属性『class』の属性値は『swl-fz u-fz-l』

③テキストは『DX・RPA初心者』

以上を踏まえて、Xpathの記法を確認していきましょう。

①ルート要素から全ての要素を指定
※「完全なXpathのコピー」で得られる方法

【Xpath】
/html/body/div[1]/div[5]/main/div/div/div[5]/ul/li[2]/button/span

【説明】
「完全なXpathのコピー」では、HTMLの先頭から、1つずつ要素を選択して対象の要素までの道順を全て記載します。

例えば上記のXpathは何を記しているかと言うと、「html」フォルダ内の、「body」フォルダ内の、「div」フォルダ内の、…「button」フォルダ内の、「span」ファイルを指定している、といったイメージです。ファイルパスの考え方と同様と考えれば分かりやすいでしょう。

ただしWinActorをはじめとするRPAでこれを使うメリットはありません。「コピー」をする場合は②の方法を選んでください。

②最短の[属性idを持つ要素]からの相対位置での指定
※「Xpathのコピー」で得られる方法

【Xpath】
//*[@id=”main_content”]/div/div/div[5]/ul/li[2]/button/span

【説明】
これが最も基本的なXpathの取得方法となります。
①の方法と比較すると、以下の塗り部分が差し変わっています。

1) /html/body/div[1]/div[5]/main/div/div/div[5]/ul/li[2]/button/span
2) //*[@id=”main_content”]/div/div/div[5]/ul/li[2]/button/span

//*[@id=”main_content”]の意味は、「属性idの値が”main_content”の要素」であるということです。

[属性id]は原則として、ページ内で一意(重複しない)な値が与えられます。そのため、[属性id]で要素を指定すると、必ず一つの要素に絞り込むことができます。また、頭に”//”を置く事で、そこまでの階層の記述を省略することができます。

その仕組みを利用して、「Xpathのコピー」では、取得する要素に最も近い階層の[属性idを持つ要素] を基準として、そこからの相対的な位置を記述することで、対象を指定します。
※上の階層に[属性idを持つ要素]が存在しない場合は、①)と同様、ルート要素からの指定となります。

③ タグと属性(と属性値)で指定

【Xpath】
//a[@class=”swl-fz u-fz-l “]

【内容】
属性[class]の属性値が[swl-fz u-fz-l]のタグ[a]

【説明】
Xpathではタグ(今回の場合は”a”)の後に[ ]を置く事で、指定するタグの条件をより細かく設定することが出来ます。

また、[ ]内で、属性およびその値を指定する場合は、[@属性=”属性値”]という書き方になります。

④ タグとテキストで指定

【Xpath】
//a[text()=”DX・RPA初心者”]

【内容】
テキスト(画面上に表示される文字列)が[DX・RPA初心者]のタグ[a]

【説明】
③と似ていますが、今回は属性ではなく、テキストを用いて指定しています。テキストで指定する場合は[text()=”テキスト”]という書き方になります。

⑤ 含む一致で指定 ★ステップアップ

【Xpath】
//a[contains(@class,”fz”)]

【内容】
属性[class]の属性値が[fz]を含むのタグ[a]

【説明】
もう一歩上級者向けの指定方法です。

③④では属性値およびテキストが指定の値と完全に一致していることを条件としていましたが、[contains]という関数を指定することで、指定の値が“含まれている”という指定方法にできます。

その場合、[contains(@属性,”属性値”)]あるいは[contains(text(),”テキスト”)]という書き方になります。

まとめ

このようにWinActorでWebブラウザ操作を自動化する際、Xpathを手書きすることで属性やテキストなど、システム改修による変更の可能性が低い情報を使用して、クリック操作をコントロールすることができます。

なお、今回のコラムでは比較的簡単、かつ使用頻度の高い記法に絞りましたが、これ以外にも子・孫要素を基準に親要素を指定したり、Xpath内で四則演算をしたりする等方法があります。Xpathは実はとても奥が深いのです。

その分、使いこなせると自動化の幅がグンと広がると思いますので、皆様もぜひ学びを深めて、WinActorを使ったさらなる業務効率化を目指してみてください。

もしWinActorの学習中、わからない点やつまずいた場合は、外部の研修を受けるのもいいでしょう。
ロボフィスでは、WinActorをはじめとするRPAツールやデジタルツールを社内で内製化していただくため、社内研修の実施やサポート、教材作成なども行っています。ヒアリングは無料で行っていますので、WinActorでお困りの際はぜひお気軽にご相談ください。

ロボフィスのRPA導入支援なら

▶業務フローの整理からお手伝い

▶投資対効果を提示

▶内製化できるよう人材育成

詳細はこちら
お問合せはこちら
RPA技術tips​ コラム
WinActor
よかったらシェアしてね!
  • URLをコピーしました!
  • DXの進め方 第10回「クラウドとは? DXの基礎知識③」
  • ChatGPTだけじゃない! AIチャットサービスの特徴を比較

関連記事

  • 技術tips15
    RPAの失敗事例から学ぼう RPAエンジニアが語る挫折を乗り越えるためのヒント
    2023-04-27
  • 技術tips14 変数の使い方
    【WinActoの使い方】変数の使い方を初心者向けにわかりやすく解説
    2023-04-18
  • 技術tips13 運用ガイドライン
    【WinActorの使い方】RPA導入成功のカギ。組織としてRPAの運用ルールを作成しよう【運用ガイドライン編】
    2023-04-06
  • 技術tips11 運用ルール編
    【WinActorの使い方】RPA導入成功のカギ。組織としてRPAの運用ルールを作成しよう【シナリオ編】
    2023-03-01
  • 技術tips09 ウェブブラウザの使い方
    【WinActorの使い方】便利技!ウェブブラウザ上でスクロールして必要な画像を見つけよう
    2023-01-04
  • 技術tips08 メール添付内容の転記
    【WinActorの使い方】メールに添付された発注書の内容を自動転記する方法
    2022-12-07
  • 技術tips07 電帳法に沿ったデータ整理
    【WinActorの使い方】改正電帳法に沿ってスキャナ保存した書類をリネームする作業を自動化
    2022-11-16
  • 技術tips06 フォルダ分別
    【WinActorの使い方】ファイル整理できていますか? 大量の請求書ファイルを指定フォルダに分別する方法
    2022-10-05
お問い合わせ

【東京本社】
東京都港区芝1-6-10 芝SIAビル3F
e-mail:info@rpa-roboffice.jp
メール受付時間:平日 9:00~17:00

  • サービス紹介
    • ITツール導入
    • DX/IT人材育成​
    • AI導入支援
    • 組織改革・DX推進
    • デジタル業務支援
  • イベント情報
  • コラム
  • 会社概要
    • 役員・マネジャー紹介
  • 採用情報
  • ロボフィスのDX戦略
  • プライバシーポリシー
  • 情報セキュリティ方針

© Copyright © ロボフィス株式会社

目次
閉じる