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

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

前回に続き今回も「DOM（Document Object Model）」について説明します。

といってもこの言葉自体は覚える必要はなく、
IEで表示されたページの任意の場所を指定し、そこに対して何らかの操作を行うための方法、ですね。

それでは早速いってみましょう。
前回は　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

objIE.Document.getElementsByClassName("b")(0).Click

この一行は「検索ボタンをクリックする」ということを意味しています。
そして前回同様に三つのパートにわけますと、
・前　objIE.Document.
・中　getElementsByClassName("b")(0)
・後　.Click
となります。

例によって前部はこれで固定、後部は.Clickで「クリックする」ということを意味しますので、以下に中部についてメインに解説していきますね。

まずはおさらいで以下の二つの手順を済ませてください。
手順１：ＩＥでヤフーの検索ページ（https://search.yahoo.co.jp/）を開く
手順２：検索ボタンの上にカーソルを持っていき、右クリックで「要素の検査（L）」を選択

そうすると今回は以下のようになりました。

おや、今回はid="●●"というものは見当たりませんね。
かわりにclass="b"というものがあるのが分かります。

もうおわかりかと思いますが、この場合は前回の
「getElementById("●●")」
ではなく、
「getElementsByClassName("●●")(0)」
を使うんです。
しかし今回のは前回と違って謎に「(0)」というものが最後にくっついていますね。

これは「添え字」と呼ばれるもので、
そのclassがHTMLソースの先頭から数えて何番目のものかを特定するために必要なんですが、idのときは不要でclassのときには必須となります。

難しい説明はおいておいて、下記に簡単にまとめるので、これ覚えてしまってください。

id　　  ⇒　ひとつのHTMLソースの中に同じ名前ではひとつしか定義しないものなので、何番目かと考える必要なし
class 　⇒　ひとつのHTMLソース内で同じクラスを何度も使う前提のものなので、何番目かの特定が必須

このあたりはHTMLコーディングした経験のある人であれば当然だよねといった感じのことかと思いますが、そういった知識のない人でも、上記を理解しておけばいったん問題はありません。

話を戻して、では、今回のclass="b"が(0)だという判断はどうやってやればよいのでしょう。
ちなみに添え字は1ではなく0から数え始めるというルールなので、0の今回が意味するのは、「複数のclass="b"の中から、一番目のことを指しているよ」ということになります。

いくつかやり方はありますが、要素の検査（L）を選択して既に開いているウインドウを利用するのが分かりやすいでしょう。

１、デバッガータブを選択
２、Ctrl + Fでclass="b"を検索
３、左側のウインドウでclass="b"が特定されるので、目的のものが何個目かを数える

今回に関してはclass="b"は結果的にはひとつしかないことがわかるので、添え字は(0)にして、完了です。

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

まず、今回は右辺と左辺が、前回説明したものとは逆になっていることに注意してください。
前回はセルの値を検索ボックスに入れたかったわけですが、今回は逆に、ＩＥで表示させた情報をセルに入力したいので、Cells(i, 2) が左辺となっています。

あと念のため確認しておくと、ここで取ってきたい情報は、実際のページでいうと下記部分になります。

説明を続けます。
が、といっても一点を除き全て同じなので省略しますが、
.innerText
について初なので解説しますね。

要素の検査（L）を選択して該当部分のソースを調べると、今回は

となっており、検索結果数が<span>タグで挟まれているのが分かります。

この状態で「.innerText」を使うと、<span>タグで挟まれたもの、すなわち検索結果数をピンポイントで取ってくることができるんです。
これは今後かなり使うことになると思いますので、是非覚えておいてください。

以上を整理すると、Cells(i, 2) = objIE.Document.getElementsByClassName("util-Text--bold")(0).innerText
で、A列の任意の値を検索して表示されたぺージの検索結果数を、B列の任意のセルに入力する、ということが実現できるわけです。

と、いうわけで、これで二回に分けたDOMについての説明は終わりになります。お疲れ様でした。

終わりに

如何でしたでしょうか。
長いようで短かったこの講座も今回で終了です。

0を1にするということに重きを置いているので、途中かなりざっくりとした説明になっているところもあったかと思いますが、
まずは最後までやりきるということを念頭に、全ての回をしっかりと理解し、実践してみてくださいね。

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

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

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