RPA経験をもとにお役立ち情報発信中!

【上級者向け】RPA開発に役立つ!HTMLの読み解き方をご紹介

RPAネコ
RPAネコ

RPAネコ(@PRAneko)です!

あまりRPAやHTMLに詳しくない場合、以下の記事を読んでから当記事を読むことをオススメします。

RPAは様々な方法でwebサイトの操作を行えます。クリック操作する場合を例にすると、以下の方法があげられます。

  1. クリック対象の画像が見つかったときにクリックする(画像認識
  2. 事前に指定した座標をクリックする(座標指定
  3. HTMLコードを読み込んでクリック対象を探し、見つかったときにクリックする(オブジェクト認識

この中であれば3つ目のHTMLコードを読む方法(オブジェクト認識)がもっとも正確な処理が可能です。そのため、安定性のあるツールをつくるためにオブジェクト認識を利用することが多いです。

しかし、画像認識などを使わざる負えない場合も結構多いのではないでしょうか?そんな時HTMLコードを読み解けるスキルがあれば、画像認識に頼らずに実装出来る機会が多くなります。この記事ではその方法をご紹介します。

HTMLってどうやったら見れるの

HTMLコードはWebページで以下のいずれかの操作を行えば見れます

  • F12キーを押す
  • fn+F12キーを押す
  • 右クリックして「ソースの表示(V)」をクリックする

例えば下記のようなサイトでF12キーを押すと…

このように画面下にHTMLコードが表示されます。

でもこんな膨大なコードから処理対象部分を見つけるのはキツイよ~

RPAネコ
RPAネコ

大丈夫!カンタンに見つける方法を後で紹介するよ!

覚えておくと便利なHTMLタグ

RPAネコ
RPAネコ

実際にHTMLコードを読み解く前に、RPA開発で覚えておくと便利なHTMLタグを紹介するよ

inputタグ

inputタグは、入力フォームや入力内容の送信ボタンなどをつくるのに用いられるタグです。inputタグに付与されるtype属性によって機能が変わります。

type属性web上での見た目説明
type=”text”テキスト入力フォームをつくります
type=”checkbox”りんごバナナチェックボックスをつくります
type=”radio”りんごバナナラジオボタンをつくります。
type=”button”ボタンを作ります。

aタグ

このようなリンクを指定するためのタグです。

imgタグ

画像を表示するためのタグです。

table, tr, th, tdタグ

表を作成するためのタグです。

RPAネコ
RPAネコ

暗記する必要は全くありませんが、軽く頭に入れておくと便利です。
分からなければ、「HTML タグ名」で検索すればすぐ出てきます。

対象のHTMLコードを見つける方法

処理対象のHTMLコードを探す方法はいろいろありますが、今回は「検索で探す」、「要素の協調表示で探す」の2つをご紹介します。

検索で探す

RPAネコ
RPAネコ

「ファイル比較開始」ボタンをクリックするために、このボタンのHTMLコードを探してみましょう

探し方
  1. Ctrl+Fを押して検索バーを表示させ、「ファイル比較」を入力
  2. エンターキーを押してHTMLコードを探していきます。

今回の場合は以下のHTMLコードがファイル比較開始ボタンに対応するコードのようです。

 <input type="submit" id="btnSubmit" class="btn-ToolRun" value="ファイル比較開始" />

WinActorでこのボタンをクリックしたい場合、クリック(IE)ライブラリの詳細設定を以下のようにすれば出来るはずです。

要素の協調表示

今回は「ファイル比較開始」というテキスト情報がHTMLコード内にあったため、検索でボタンのHTMLコードを見つけることが出来ました。しかし、このボタンが画像で出来ていたりすると検索で見つけることはできません。こんな時に便利なのが「要素の協調表示」です。

「要素の協調表示」ボタンを押して有効にすると…

RPAネコ
RPAネコ

マウスカーソルを合わせたHTMLコードに対応する要素を強調表示してくれます!!

すごい!!
これなら、HTMLコードがあまり読めなくても対象部分がすぐわかるね!

まとめ

いかがでしたでしょうか。

この記事を読むことで、HTMLコードを読み解く力が身についたのではないでしょうか。オブジェクト認識をベースにRPAツールを作ると正確で安定性の高いツールになります。

今まで画像認識や座標指定で実装していた部分が、オブジェクト認識で実装できないかHTMLコードを読み解いてトライしてみてください。

この記事のまとめ
  1. HTMLコードを見る方法
  2. RPA開発で覚えておくと便利なHTMLタグ
    1. inputタグ
    2. aタグ
    3. imgタグ
    4. table, tr, th, tdタグ
  3. 対象のHTMLコードを見つける方法
    1. 検索(Ctrl+F)で探す
    2. 要素の協調表示で探す

私自身HTMLを勉強することで、画像マッチングでしか実装できなかった処理を自動記録アクションで実装できました。

なので、書籍でしっかりHTMLを勉強するのもオススメです。こちらは超初心者にもかなり分かりやすいHTML本なのでぜひ手に取ってみてください。

▼本気でRPAをマスターしたいならこちらをチェック

Digiprove sealCopyright secured by Digiprove © 2019
RPA開発
スポンサーリンク
スポンサーリンク
RPAネコをフォローする
スポンサーリンク
RPAネコの知恵袋
タイトルとURLをコピーしました