DOMとは | IE操作の自動化

DOM(Document Object Model)

まず「エレメントの基本操作」の前にWebページを操作する上でかかせないDOM(Document Object Model)について解説します。こちらはHTMLを操作する仕組みになりますので、しっかり理解しましょう。

DOM(Document Object Model)とは

DOMとは「Document Object Model」の略称で、html・head・body・p・aなどのHTMLドキュメント要素にアクセスして取得や操作ができる仕組みのことです。

以下はHTMLドキュメントをツリー構造に表したものでDOMツリーと呼ばれます。階層状のツリー構造でHTMLドキュメントを表現します。

HTML(HyperText Markup Language)とは

HTMLとは「HyperText Markup Language」の略称で、Webページを作成するために開発された言語です。世の中に公開されているWebページのほとんどがHTMLで作成されています。こちらのサイトもHTMLで作成されています。

HTMLは基本的に以下のような構成でできており「<タグ名>★テキスト★</タグ名>」が1つの要素(エレメント)になります。この中の特定の要素に対してデータの取得や操作を行っていきます。


<html>

 <head>

  <title>VBAのIE制御</title>

 </head>

 <body>

  <p>こちらはpタグのテキストです。</p>
  <a href="★リンクURL★">リンクのアンカーテキストです。</a>

 </body>

</html>

タグと要素(エレメント)の違い

HTML言語では、「タグ」と呼ばれる仕組みを利用して構築していきます。以下のイメージを確認すると分かりやすいと思いますが、タグとは「<」と「>」で構成されており、開始タグと終了タグまでの括りで1つの要素を形成します。

具体例で説明するとWebページのタイトルを表す「titleタグ」を利用して開始タグの「<title>」と終了タグの「</title>」で括り、タグの中の文字列が「要素内容」となります。こちらでは「VBAのIE制御入門」の文字列が要素内容となります。

そして、こちらの「開始タグ+要素内容+終了タグ」の全体を「要素」と呼びます。また、別名では「エレメント」と呼ばれますので、どちらも同じ意味であることを理解してください。

エクセルVBAでのIE操作の概要

ここまでDOMとHTMLについては理解できたかと思います。これからエクセルVBAで具体的にIE操作を解説していきますが、どのような形で取得や操作を行うのかについて一度感覚で理解しておきましょう。処理の流れを理解すればVBAの記述方法が分かってきます。

今回は、以下のHTMLドキュメントを利用して解説していきます。


<html>

 <head>

  <title>VBAのIE制御入門</title>

 </head>

 <body>

 <h1>本サイトについて</h1>

  <p>こちらは、VBAによるIE制御やデータ取得など基本的なものから
　実践向けの内容まで幅広くカバーしている入門サイトです。</p>

  <p id="text">とても便利ですので、是非挑戦してみてください。</p>

  <a href="http://www.vba-ie.net/">VBAのIE制御サイト</a>

 </body>

</html>

タイトルを取得する

こちらではタイトルを取得するまでの流れを説明します。HTMLのタイトルは「<title>VBAのIE制御入門</title>」の部分になりますので、以下の流れで取得していきます。

①HTMLドキュメントのすべての情報を取得します。
②その情報の中からtitle要素のテキストを取得します。


objIE.document.title

Documentオブジェクトのプロパティの中には要素の値そのものを取得するプロパティがあります。こちらはその一例ですが、タイトルの取得は以下の方法でも取得できます。

①InternetExplorerオブジェクトのLocationNameプロパティからtitle要素のテキストを取得します。


objIE.LocationName

こちらはInternetExplorerオブジェクトのプロパティを利用してタイトルを取得した例です。オブジェクトによって利用できるプロパティは異なりますが、取得する方法はいくつも存在します。

VBAでのIE制御で、エラーが発生したり取得や操作ができないという相談をよく受けますが、ほとんどの方がオブジェクト・コレクション・プロパティ・メソッドといったプログラムの基本的な部分を理解していません。

基本的な部分が理解できていない方は、まずは「初心者向けExcel VBA入門」を学習してからこちらを確認すると解説を見なくても処理内容を感覚で理解できるようになります。

一番最初のpタグの要素情報を取得する

こちらでは一番最初のpタグの要素情報を取得するまでの流れを説明します。HTMLの最初のpタグの要素は「こちらは、VBAによるIE制御やデータ取得など基本的なものから実践向けの内容まで幅広くカバーしている入門サイトです。」の部分になりますで、以下の流れで取得していきます。

①HTMLドキュメントのすべての情報を取得します。
②その情報の中からすべてのpタグの要素情報を取得します。
③すべてのpタグの要素情報から一番最初のpタグの要素情報を取得します。
④一番最初のpタグの要素情報からタグ部分を含めた要素情報を取得します。


objIE.document.getElementsByTagName("p")(0).outerHTML

③と④の違いがわからない方もいらっしゃると思いますが、③は一番最初のpタグのオブジェクトを取得する処理で、④はそのオブジェクトのどの情報を取得するかの処理になります。

こちらを実行した結果は「こちらは、VBAによるIE制御やデータ取得など基本的なものから実践向けの内容まで幅広くカバーしている入門サイトです。」になります。今回はタグも含めた要素を取得しました。

要素の中の情報を取得する場合は、ほぼこの流れで取得していきます。HTMLドキュメントはツリー構造ですので、特定の要素まで段階的に情報を取得していきます。

id属性が「text」の要素から要素内容だけを取得する

こちらではid属性が「text」の要素から要素内容だけを取得するまでの流れを説明します。id属性とは、HTMLドキュメント内で特定の一要素に対して与えた固有名のことで要素内容にスタイル(文字の色や大きさなど)を設定するCSSなどに利用されます。今回はタグ指定ではなくid属性を指定して取得する流れになります。

id属性が「text」の要素は「とても便利ですので、是非挑戦してみてください。」の部分になりますで、以下の流れで取得していきます。

①HTMLドキュメントのすべての情報を取得します。
②すべての情報の中からid属性が「text」の要素情報を取得します。
③id属性が「text」の要素から要素内容のみを取得します。


objIE.document.getElementById("text").innerText

こちらを実行した結果は「とても便利ですので、是非挑戦してみてください。」になります。先ほどよりは、より特定した方法で取得していますので工程が1つ減りました。先ほども説明しましたが、「取得」は色々な方法から操作できますので、対象となるWebページのHTMLドキュメントを確認してより効率がよい方法を選択するようにしましょう。

アンカーテキストが「VBAのIE制御サイト」のリンク要素をクリックする

こちらではアンカーテキストが「VBAのIE制御サイト」のリンク要素をクリックするまでの流れを説明します。アンカーテキストとは、リンクされている部分のテキストになります。

アンカーテキストが「VBAのIE制御サイト」のリンク要素は「<a href="http://www.vba-ie.net/">VBAのIE制御サイト</a>」の部分になりますで以下の流れで取得していきます。

①HTMLドキュメントのすべての情報を取得します。
②すべての情報の中からすべてのaタグの要素情報を取得します。
③すべてのaタグの要素からアンカーテキストが「VBAのIE制御サイト」のaタグの要素情報を取得します。
④アンカーテキストが「VBAのIE制御サイト」のaタグの要素をクリックします。


  For Each objtag In objIE.document.getElementsByTagName("a")
                                                             
    If InStr(objtag.outerHTML, "VBAのIE制御サイト") > 0 Then

      objtag.Click

      Exit For

    End If

  Next

この処理の流れでアンカーテキストが「VBAのIE制御サイト」のaタグの要素をクリックします。VBAコードだけ見ると複雑な処理に思えますが、ほとんど「取得」と同じ流れですのでそこまで難しくはありません。VBAのIE制御はパターンがほぼ決まっていますので、それをうまく組み合わせることで複雑な処理を行います。