【チュートリアル】VBAでIE自動化ツールを作る(その３)　要素の調べ方

2020年3月14日 19:52

こんにちは、自動化エンジニアをしています。kozuです。

エクセルVBAによりWebページの要素(テキストボックス、ボタンなど)を操作したり、表示されている情報を取得する自動化ツールの開発方法を紹介します。実際のWebサイトを自動操作し情報を取得するマクロの開発を通して、自動化ツールの開発について学ぶことができます。

本連載では、チュートリアルということでVBAの開発手順から始め、IEの操作についてどのようなページでも共通で使用できるコード(共通部品)を作成します。最初に共通部品を作成しておくことで、自分でIEの自動化ツールを作成する際に少量の実装で効率よく開発できるようになります。

この章では、ページに表示されている要素(ボタンやテキストボックス)に対して操作するために、HTMLの要素の調べ方について解説します。

１．対象者

ブラウザで定期的に手作業で行っているデータ入力やデータ収集等の作業から開放されたい、楽したいと考えている方を対象に、エクセルVBAで自動化するツールの開発ができるようになることを目指しています。プログラミングの経験がない方でも、コードをコピーすれば開発できるようになっています。

２．開発環境

以下の環境を使用します。
バージョンは異なっていても問題ないと思います。
・OS：Windows10
・エクセル：Microsoft Excel2007
・ブラウザ：InternetExploer11

３．要素のCSSセレクタを調べる

IEを自動操作するためにはページに表示されている操作対象の要素を特定する必要があります。要素を特定するための方法はいくつかありますが、今回はCSSセレクタ(以降セレクタと呼ぶ)を使用します。セレクタとは、HTMLで記述されたページからHTMLの要素を特定するためのパス情報になります。

セレクタを調べるためにChromeを使用します。本当は実行環境であるIEで確認すべきですが、IEは操作性がよくないためChromeを使用します。Chromeで指定したURLのページを表示し、「F12」キーを押下してください。以下の画像のように、右側から開発者ツールが表示されます。開発者ツールの左上に配置されているマウスカーソルのようなボタンをクリックし、検索のテキストボックスをクリックします。

セレクタ1

テキストボックスをクリックすると、開発者ツールの表示が「Elements」タブに切り替わります。背景色が水色になっている箇所が、テキストボックスに対応するHTMLの要素になります。背景色が水色になっているところで右クリックし、「Copy」→「Copy selector」をクリックしてください。

セレクタ2

クリップボードにテキストがコピーされるので、内容を確認すると以下の通りになります。※記事執筆時点(2020/3/14)のものであり、ページの仕様変更で変わる可能性があります。

#tsf > div:nth-child(2) > div.A8SBwf > div.RNNXgb > div > div.a4bIc > input

少し長いですが、１つずつ見ると以下のように要素を特定しています。
　①#tsf
　　　→HTML全体から「id="tsf"」の要素(「#」でidを指定)
　②div:nth-child(2)
　　　→①の中にある2つ目のdiv要素(「:nth-child()」で兄弟要素を指定)
　③div.A8SBwf
　　　→②の中にある「class="A8SBwf"」のdiv要素(「.」でclassを指定)
　④div.RNNXgb
　　　→③の中にある「class="RNNXgb"」のdiv要素
　⑤div
　　　→④の中にあるdiv要素
　⑥div.a4bIc
　　　→⑤の中にある「class="a4bIc"」のdiv要素
　⑦input
　　　→⑥の中にあるinput要素

片方のみの場合もありますが、[要素のタグ]+[id/class]のように指定しています。開発者ツールの「Elements」タブに表示されているHTMLを上記①～⑦の順番でたどると、検索のテキストボックス(⑦のinput要素)に行き着くことを確認できます。

４．セレクタで要素を取得できることを確認する

先程調べたセレクタのテキストを指定して要素を取得できることを確認します。開発者ツールのタブを「Console」に切り替えてください。背景色が黄色で警告が表示されていますが、気にしないでください。邪魔になるので右クリックで「Clear console」をクリックしメッセージを削除してください。

コンソール2

「>」の後に以下のテキストを入力し、Enterを押下してください。先程の検索のテキストボックスのHTML要素が表示されました。「document.querySelector('セレクタ')」を実行することで指定したセレクタの要素が存在すること(取得できること)を確認できます。

document.querySelector('#tsf > div:nth-child(2) > div.A8SBwf > div.RNNXgb > div > div.a4bIc > input')

コンソール3

５．セレクタを指定して要素を取得する

「IEControl」に以下のコードを追加してください。処理の内容については以降の章で解説します。

' ************************************************
'  関数名：InputText
'  概要：テキスト入力
'  引数：objIE(IEオブジェクト)
'       selector (要素のセレクタ)
'       text (入力テキスト)
'  戻り値：なし
' ************************************************
Public Sub InputText(ByVal objIE As InternetExplorer, ByVal selector As String, ByVal text As String)
   '要素を取得
   Dim objInput As HTMLInputElement
   Set objInput = objIE.document.querySelector(selector)
   
   '値を設定
   objInput.Value = text
End Sub

次に、「Sheet1」の「IE自動操作」プロシージャを以下の通りに編集してください。結果を確認するため「CloseIE」の処理はコメントにし画面を閉じないようにします。

Sub IE自動操作()
   Dim objIE As New InternetExplorer
   
   Dim url As String
   url = "https://www.google.com/"
   
   'IEでURLのページを表示
   Call IEControl.OpenUrl(objIE, url)
   
   Dim selector As String
   Dim text As String
   selector = "#tsf > div:nth-child(2) > div.A8SBwf > div.RNNXgb > div > div.a4bIc > input"
   text = "VBA"
   Call IEControl.InputText(objIE, selector, text)
   
   'IEを終了する
   'Call IEControl.CloseIE(objIE)
End Sub

修正ができましたら「IE自動操作」を実行し、以下のように値が設定されることを確認してください。テキストボックスの要素を特定し、その要素に対して操作することができました。

テキストボックス値設定

ここまでで、開発者ツールで取得したセレクタで要素を取得できることを確認しました。次回は要素を取得する方法のパターンを紹介します。

この記事が気に入ったらサポートをしてみませんか？

【チュートリアル】VBAでIE自動化ツールを作る(その３) 要素の調べ方