Excel・VBA デキる解る！IE操作編 【Webサイトのテキストボックスへデータを入力する方法】

どうも、マサヤです！

この記事は、VBAでのIE操作が初めて or 慣れていない方向けに『Webサイト・システムの情報を取得・設定する方法』をお伝えしていく連載記事となってます！

 

前回は、Webサイトの全ページから情報を一括取得する方法を紹介しました！

 

IE操作編 4回目～7回目に渡って、Webサイト・システムへデータを入力・選択する方法をお伝えします！

今回は、検索バーやフォーム等のテキストBOXに対して、データを入力する方法をご紹介しますよ！

もし、あなたがVBAでのIE操作が初めてなら、IE操作編の1回目から順に読んでくださいね。

 

では、張り切っていきましょう！

 

【動画】Webサイトへデータを入力

 

最初に動画で動きを確認しましょう！

 

あいもかわらず当ブログを使用しています）笑

処理としては、当ブログの右側にある検索バーにパスタと入力・検索し、結果で表示されたページデータを取得（各記事のカテゴリ・タイトル・URL）の上、Excelへ出力しています。

動きを確認したところで、次はコードを見ていきましょう！

 

【コード】Webサイトへデータを入力・選択するコード

 

コードはこちら！

Private Declare PtrSafe Sub Sleep Lib "kernel32" (ByVal ms As Long)
Sub IeSiteSetTextData() '検索バーにテキストを入力する

'IEオブジェクトを作成
Dim ie As InternetExplorer
Set ie = CreateObject("InternetExplorer.Application")

'開きたいURLを変数に代入
Dim strUrl As String
strUrl = "https://mmm-program.com/"

'IEを表示（見えるようにする）
ie.Visible = True

'指定したURLをIEで開く
ie.Navigate strUrl

'サイトの読み込みが完了するまで待つ
Do While ie.Busy = True Or ie.readyState <> READYSTATE_COMPLETE
    DoEvents
Loop

'文章が長くなるためHTMLコレクションを変数へ格納
Set ieDoc = ie.document

'検索バーにC2セルにある検索ワードを入力
ieDoc.getElementsByClassName("search-edit")(0).Value = Range("C2")

'虫メガネアイコンをクリックする
ieDoc.getElementsByClassName("search-submit")(0).Click

'待機：クリック後2秒待つ処理。
Sleep 2000

'サイトの読み込みが完了するまで待つ
Do While ie.Busy = True Or ie.readyState <> READYSTATE_COMPLETE
    DoEvents
Loop

'Excelの行カウント変数
rowCnt = 7

'ページ内の記事数のコレクションを取得
Set posts = ieDoc.getElementById("main").getElementsByClassName("entry-card-wrap")

'全要素を確認するので、今回はEachで繰り返し処理。
For Each post In posts

    '記事カテゴリを取得してExcelへ出力
    Cells(rowCnt, 2) = post.getElementsByClassName("cat-label")(0).innerText
    '記事タイトルを取得してExcelへ出力
    Cells(rowCnt, 3) = post.getElementsByClassName("entry-card-title card-title e-card-title")(0).innerText
    '記事URLを取得してExcelへ出力
    Cells(rowCnt, 4) = post.getAttribute("href")
    
    'Excelへ出力行を次の行へ
    rowCnt = rowCnt + 1

Next

'オブジェクトを閉じる
ie.Quit

'メモリからオブジェクトを破棄
Set ie = Nothing
 
End Sub

 

長いコードに見えますが、実際は26行目～30行目部分が主な追加です。

あとは、前回までのコードを流用しています。

では、変更箇所を見ていきましょう！・・・・・・その前に、IE操作編 2回目にもやりましたが、入力・取得したい箇所の使える要素名の探し方を復習しましょう。

 

デベロッパーツールで取得・入力したい要素を探す方法

 

今更ですが、ネット情報を取得するためにWebサイトの要素名を調べる必要があります。

その際、便利なのがデベロッパーツールで、HTML知識があまり無くとも取得したい要素名を探すことができます。

 

【動画】デベロッパーツールの起動・要素の探し方

まずは、動画で一連の流れを確認してみましょう。

 

では、手順を見ていきましょう。

 

手順１：デベロッパーツールを起動する

Chomeを使ってますが、IIEでも同様のことが可能です。

 

手順２：矢印で入力・取得したい箇所を選択

ツール内の左上に四角を矢印で指したようなマークをクリックします。

この状態でWebサイト内を入力・取得したい箇所をクリックすることで、選択したHTML部分のコードがハイライト（背景が青くなる）されます。

 

手順３：使える要素名を探す

ハイライトされたコードを確認して使える要素名を探しましょう。

当ブログの検索BOXのHTMLを例にして、探し方を確認してみましょう。

<input type="text" placeholder="サイト内を検索" name="s" class="search-edit" aria-label="input" value="">

 

使えそうなのはname=”s”とclass=”search-edit”の2つですね。

今回紹介しているコードではclassのseach-editを、getElementsByClassNameメソッド使いコレクションを取得しています。

別の方法として、classではなく、name=”s”でも取得できます。

その際は、getElementByNameメソッドを使って下記のように書きます。

'classの代わりにnameを使用したコード
ieDoc.getElementsByName("s")(0).Value = Range("C2")

 

さて、HTML要素の探し方を説明したところで、コードの説明に入っていきましょう！

 

Valueで検索バーにテキストを入力する

 

Valueプロパティを使うことで、テキストボックスへデータを入力することができます。

下記コードでは、エクセルのC2に入っているパスタというワードを、検索バーに入力しています。

'検索バーにC2セルにある検索ワードを入力
ieDoc.getElementsByClassName("search-edit")(0).Value = Range("C2")

'虫メガネアイコンをクリックする
ieDoc.getElementsByClassName("search-submit")(0).Click

 

Clickメソッドに関しては前回で説明したように、リンクやボタンなどクリック出来る箇所に対して、文字通りクリック出来るメソッドです。

 

For Eachで取得した要素を全て取得する

 

結果的に動きとしては同じことですが、使う制御文をFor Eachに変更しました。

前回まではFor Nextを使ってましたが、取得した要素に対して順番に関係なく全て確認したい場合などはFor Eachで記述するとスッキリします。

'全要素を確認するので、今回はEachで繰り返し処理。
For Each post In posts
'・・・ここは省略
next

'上記で取得した記事数分処理を繰り返す ※カウントは0から始まるため-1する
For i = 0 To postCnt - 1
'・・・ここは省略
next

 

逆に要素に対して逆順で繰り返したい、指定した要素番号（添え字）から開始させたいといった場合はFor Eachでは対応できないので、For Nextを使いましょう。

 

まとめ

 

4回目のIE操作編はテキストの入力方法をお伝えしました！

今回のコードを流れをまとめると下記になりすね。

 

今回で、取得だけでなくWebサイトに対して、データを入力できるようになりました。

ここまで来ると、結構自由にIE操作出来てるようになっています。

 

さて、次回はラジオボタンをチェック・判別する方法についてお伝えしていきます！