【お手軽カンタン自動化！エクセルVBA × IEで身代わりロボットを作る最短８ステップ】～その７～ DOM操作その一

みなさんこんにちは。taka.(@teihen_escape)です。

前回はIF処理（条件分岐）について紹介しました。
これによりかなり複雑な処理もコードの中に盛り込むことができるようになりましたね。

そしていよいよこの講座も佳境へと入っていきますが、今回はこれまで説明を避けてきた（笑）、データを操作するにあたって必ず覚えなければならない概念について学びます。

まず前回までで作ってきたコードを改めて下記します。

Sub yahoo検索()

Dim objIE As InternetExplorer
Dim i As Long

Set objIE = CreateObject("InternetExplorer.Application")
objIE.Visible = True
   
i = 1
Do Until Cells(i, 1) = ""
   
   objIE.navigate "https://search.yahoo.co.jp/"
   
   Do While objIE.Busy = True Or objIE.readyState < READYSTATE_COMPLETE
       DoEvents
   Loop

   '検索窓に入力後、検索ボタンをクリック
   objIE.Document.getElementById("yschsp").Value = Cells(i, 1)
   objIE.Document.getElementsByClassName("b")(0).Click

   Application.Wait Now + TimeValue("00:00:03")
   
   Cells(i, 2) = objIE.Document.getElementsByClassName("util-Text--bold")(0).innerText
   
   If Cells(i, 2) >= 100000000 Then
   
       Cells(i, 3) = "検索結果一億以上"
   
   End If
   
i = i + 1
Loop

objIE.Quit
Set objIE = Nothing

MsgBox "完了しました"

End Sub

上記の中で、今までに説明をしていない部分が下記の三行ですね。

objIE.Document.getElementById("yschsp").Value = Cells(i, 1)
objIE.Document.getElementsByClassName("b")(0).Click

Cells(i, 2) = objIE.Document.getElementsByClassName("util-Text--bold")(0).innerText

これらが何をしている箇所かというと、シンプルに言えば以下二点です。
①目的のデータの場所を指定する
②そのデータの値を取ってきたり、ボタンであればクリックしたりする

難しい言葉でいうとこれって「DOM（Document Object Model）」を理解する、という話なんですが、例によってここではそういうややこしいことは省きますｗ
単純に、「操作する場所を特定し処理するために、特別な記述方式があるんだな」くらいで覚えていれば問題ありません。

では、一行目から順番に解説していきます。

objIE.Document.getElementById("yschsp").Value = Cells(i, 1)

右辺であるCells(i, 1)は、A列の任意のセルを表しますので、この一行で、左辺であるobjIE.Document.getElementById("yschsp").ValueにCells(i, 1)の値を入れる、ということを意味します。

ではobjIE.Document.getElementById("yschsp").Valueとは一体何なのか、
なんですが話を分かりやすくするためこれを
・前　objIE.Document.
・中　getElementById("yschsp")
・後　.Value
の三つのパートに分解して解説します。

まず前部ですが、ここは固定で暗記で構いません。全てにおいて問答無用でくっつくと思って大丈夫です。

次に中部をとばして後部ですが、.Valueとは「値」という意味で、今回はCells(i, 1)の「値」を入力したいのでこうなっています。
他になにがあるかというと、後述する「.Click」などがあります。

さて、最後に中部の説明ですが、その前にこの一行でやりたい処理を念のため確認すると「検索窓に検索ワードを入れる」ということなので、
そもそもobjIE.Document.getElementById("yschsp").Value全体で、「検索窓の場所を特定し、そこに値を入れようとしている」箇所ということを意味します。

そこで注目してもらいたいのが、「yschsp」の部分です。
結論からいうと、ヤフーの検索ページ（https://search.yahoo.co.jp/）のHTMLソースの中を見て、検索窓について記述している部分を特定し、取ってきています。
HTMLソースで特定してそこから取ってくる、という作業自体は、そういうものだと思って覚えてしまってください。

具体的なやり方

ではどうやって取ってくるかの具体的なやり方を説明します。

１、まずIEでヤフーの検索ページ（https://search.yahoo.co.jp/）を開きます。

２、そして検索窓の上にカーソルを持っていき、右クリックして、要素の検査（L）を選択。

すると、下記のような画面が出てきます。ここがHTMLソース的に検索窓を記述している箇所になります。

注目すべきは「id="yschsp"」の部分で、ここから値を取ってきて「getElementById("yschsp")」としているんですね。

少し雑な説明になってしまいますが、ソースを調べた結果が「id="●●"」となっている場合は、結論、中部に関しては「getElementById("●●")」という表記でOKです。

話を整理します。

・前部は「objIE.Document.」で固定でOK
・中部は今回は「id」が「yschsp」だったので「getElementById("yschsp")」でOK
・後部は今回は値を扱うので「.Value」でOK

というわけで結果的にobjIE.Document.getElementById("yschsp").Valueができあがる、という仕組みですね。

ちょっと長くなってしまったので、後編に続きます、次回、ほんとに最後の最後ですね。

それでは、本日も最後まで読んで頂き有難うございました^^/

【お手軽カンタン自動化！エクセルVBA × IEで身代わりロボットを作る最短８ステップ】

0、 なぜVBA×IEなのか
1、 参照設定
2、最小限の型を覚えよう
3、型を使いやすく改良しよう
4、 IEの表示待ち
5、 ループ処理
6、 IF分岐
7、 DOM操作その一　←←←←←←←←←← イマココ
8、 DOM操作その二