画像要素を取得するImages | IE操作の自動化

Imagesプロパティ

前回はAnchorsプロパティについて解説しました。Anchorsオブジェクトには様々なプロパティやメソッドが用意されていました。全てを利用することはありませんが、それぞれの役割について理解するようにしましょう。今回は、Imagesプロパティについて解説していきます。

こちらはWeb上で公開されている画像情報を取得したい場合などに利用され、画像URL・画像ファイル名・alt属性・幅・高さを取得することができます。

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制御入門」の文字列が要素内容となります。

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

指定した画像要素オブジェクトの値を取得する処理の流れ

以下が今回の処理の流れになります。

①変数宣言
②ieViewサブルーチンを利用して指定したURLをIEで起動
③HTMLドキュメントのオブジェクトを取得
④HTMLドキュメント内のアンカー要素コレクションを取得
⑤コレクションの中から特定のアンカー要素オブジェクトを取得
⑥特定のアンカー要素オブジェクトの要素タグとその中に含まれるHTMLコードを取得
⑦メッセージボックスに取得したHTMLコードを表示

利用するサブルーチン・プロパティ・VBA関数について

今回利用するサブルーチン・プロパティ・VBA関数は以下になります。

ieViewサブルーチン
ieCheckサブルーチン
Documentプロパティとは
Imagesプロパティとは
outerHTMLプロパティとは
srcプロパティとは
namePropプロパティとは
altプロパティとは
Widthプロパティとは
Heightプロパティとは
MsgBox関数プロパティとは

ieViewサブルーチンとは

ieViewサブルーチンは指定したURLをInternetExplorerで起動させ、Webページが完全に読み込まれるまで待機処理をするマクロです。

ieView("IEオブジェクト","表示させたいURLの文字列","IE表示・非表示の値[省略可]","Y位置の値[省略可]","X位置の値[省略可]","幅の値[省略可]","高さの値[省略可]")

ieView

ieCheckサブルーチンとは

ieCheckサブルーチンは指定したInternetExplorerオブジェクトのWebページが完全に読み込まれるまで待機処理をするマクロです。

ieCheck("IEオブジェクト")

ieCheck

Documentプロパティとは

InternetExplorerオブジェクトのDocumentプロパティはHTMLドキュメントのオブジェクトを返すプロパティです。これによりHTMLドキュメントを操作することができます。

objIE.document.プロパティ/メソッド

Documentプロパティ

Imagesプロパティとは

DocumentオブジェクトのImagesプロパティはHTMLドキュメント内の画像要素オブジェクトのコレクションを返すメソッドです。

objIE.document.images(添え字).プロパティ/メソッド

outerHTMLプロパティとは

要素オブジェクトのouterHTMLプロパティは指定した要素オブジェクトの要素タグとその中に含まれるHTMLコードを取得するプロパティです。

変数 = objIE.document.images(添え字).outerHTML

赤文字がpタグのouterHTMLの取得範囲になります。

<p>pタグの<span class="colorRed">outerHTML</span>の取得範囲</p>

srcプロパティとは

Imagesメソッドのsrcプロパティは指定した画像要素の画像URLを取得するプロパティです。

変数 = objIE.document.images(添え字).src
objIE.document.images(添え字).src = "設定する画像URL"

namePropプロパティとは

ImagesメソッドのnamePropプロパティは指定した画像要素の画像ファイル名を取得するプロパティです。

変数 = objIE.document.images(添え字).nameProp

altプロパティとは

Imagesメソッドのaltプロパティは指定した画像要素のalt属性の値を取得するプロパティです。

変数 = objIE.document.images(添え字).alt
objIE.document.images(添え字).alt = "設定するalt属性の値"

Widthプロパティとは

ImagesメソッドのWidthプロパティは指定した画像要素の幅の値を取得するプロパティです。

変数 = objIE.document.images(添え字).Width
objIE.document.images(添え字).Width = "設定する画像の幅"

Heightプロパティとは

ImagesメソッドのHeightプロパティは指定したた画像要素の高さの値を取得するプロパティです。

変数 = objIE.document.images(添え字).Height
objIE.document.images(添え字).Height = "設定する画像の高さ"

MsgBox関数とは

MsgBox関数はダイアログボックスにメッセージとボタンを表示し、どのボタンが押されたかを示す整数型の数値を返します。

MsgBox "表示させる文字列"

MsgBox関数

指定した画像要素オブジェクトのデータを取得するサンプルコード

こちらのVBAコードは、IE(InternetExplorer)の指定した画像要素オブジェクトのデータを取得するマクロです。

Sub sample()

  Dim objIE  As InternetExplorer

  '本サイトをIE(InternetExplorer)で起動
  Call ieView(objIE, "http://www.vba-ie.net/library/index.html")
  
  '①img要素(画像)で1番目のデータを抽出する
  MsgBox objIE.document.images(0).outerHTML
  
  '②画像URLを抽出する
  MsgBox objIE.document.images(0).src
  
  '③画像ファイル名を抽出する
  MsgBox objIE.document.images(0).nameProp
  
  '④alt属性を抽出する
  MsgBox objIE.document.images(0).alt
  
  '⑤width属性を抽出する
  MsgBox objIE.document.images(0).Width

  '⑥height属性を抽出する
  MsgBox objIE.document.images(0).Height
  
  '⑦その他各属性の設定
  objIE.document.images(0).Border = 5
  MsgBox objIE.document.images(0).outerHTML

  objIE.document.images(0).hspace = 10
  MsgBox objIE.document.images(0).outerHTML
  
  objIE.document.images(0).vspace = 20
  MsgBox objIE.document.images(0).outerHTML
  
  objIE.document.images(0).longDesc = "index.html"
  MsgBox objIE.document.images(0).outerHTML
  
  objIE.document.images(0).name = "imgname"
  MsgBox objIE.document.images(0).outerHTML
  
  objIE.document.images(0).ID = "imgid"
  MsgBox objIE.document.images(0).outerHTML
  
  objIE.document.images(0).lowsrc = "test.png"
  MsgBox objIE.document.images(0).outerHTML

  objIE.document.images(0).useMap = "#sample"
  MsgBox objIE.document.images(0).outerHTML
  
  MsgBox objIE.document.images(0).complete
  
End Sub

ieView
ieCheck

取得する画像要素のHTMLコード

実行結果

解説

Sub sample()

  Dim objIE  As InternetExplorer

こちらはSubステートメントに引数の設定がないsampleプロシージャになります。まずは、変数宣言でメモリ領域を割り当てるDimステートメントを利用してオブジェクト変数objIEに「InternetExplorer型」を変数宣言しています。


  '本サイトをIE(InternetExplorer)で起動
    Call ieView(objIE, "http://www.vba-ie.net/library/index.html")

次に他のプロシージャを呼び出すCallステートメントを利用してieViewサブルーチンを呼び出しています。第一引数にはオブジェクト変数の「objIE」を第二引数には表示させるURLの「http://www.vba-ie.net/library/index.html」を設定しています。これによりInternetExplorerで本サイトの「IE制御の準備(ライブラリ追加)ページ」が表示されます。


  '①img要素(画像)で1番目のデータを抽出する
  MsgBox objIE.document.images(0).outerHTML

ここからはImagesプロパティを利用して指定したimg要素を取得する部分になります。以下は理解しやすい様にVBAコードとキーワードの関連性を列挙したものです。あくまで関連性ですので必ずしも「=(イコール)」ではありません。

【objIE.document.images(0).outerHTML】
objIE = InternetExplorerオブジェクト
document = HTMLドキュメントのオブジェクト(Documentオブジェクト)
images = HTMLドキュメント内のすべてのimg要素(Imagesプロパティ)
images(0) = img要素コレクションの1番目のimg要素オブジェクト
outerHTML = 1番目のimg要素オブジェクトの要素タグとその中に含まれるHTMLコード

まず、InternetExplorerオブジェクトのdocumentプロパティを利用してHTMLドキュメントのオブジェクト(Documentオブジェクト)を取得します。

次にすべてのimg要素を取得するDocumentオブジェクトのImagesプロパティを利用してすべてのimg要素を取得します。この要素コレクションから1番目のa要素オブジェクトを取得しますが、1番目のimg要素オブジェクトとは「images(0)」の部分で、括弧内の数字(添え字)は「0」から数えるため、1番目のimg要素オブジェクトの添え字は「0」となります。

そして、outerHTMLプロパティを利用して、1番目のimg要素オブジェクトの要素タグとその中に含まれるHTMLコードを取得します。

取得したデータはMsgBox関数の引数に設定していますので、処理を実行して確認してください。

Imagesオブジェクトにも複数のプロパティが存在しますのでここからはそれらのプロパティを紹介していきます。

  '②画像URLを抽出する
  MsgBox objIE.document.images(0).src

こちらは、srcプロパティを利用して1番目の要素の画像URLを取得しています。

  '③画像ファイル名を抽出する
  MsgBox objIE.document.images(0).nameProp

こちらは、namePropプロパティを利用して1番目の要素の画像ファイル名を取得しています。

  '④alt属性を抽出する
  MsgBox objIE.document.images(0).alt

こちらは、altプロパティを利用して1番目の要素のalt属性の値を取得しています。

  '⑤width属性を抽出する
  MsgBox objIE.document.images(0).Width

こちらは、Widthプロパティを利用して1番目の要素の画像の幅を取得しています。

  '⑥height属性を抽出する
  MsgBox objIE.document.images(0).Height

こちらは、Heightプロパティを利用して1番目の要素の画像の高さを取得しています。

ここまで値の取得の例を挙げてきましたが、値を設定することもできます。以下はimg要素にそれぞれの属性の値を設定した内容となります。

  '⑦その他各属性の設定
  objIE.document.images(0).Border = 5
  MsgBox objIE.document.images(0).outerHTML

  objIE.document.images(0).hspace = 10
  MsgBox objIE.document.images(0).outerHTML
  
  objIE.document.images(0).vspace = 20
  MsgBox objIE.document.images(0).outerHTML
  
  objIE.document.images(0).longDesc = "index.html"
  MsgBox objIE.document.images(0).outerHTML
  
  objIE.document.images(0).name = "imgname"
  MsgBox objIE.document.images(0).outerHTML
  
  objIE.document.images(0).ID = "imgid"
  MsgBox objIE.document.images(0).outerHTML
  
  objIE.document.images(0).lowsrc = "test.png"
  MsgBox objIE.document.images(0).outerHTML

  objIE.document.images(0).useMap = "#sample"
  MsgBox objIE.document.images(0).outerHTML
  
  MsgBox objIE.document.images(0).complete

img要素には様々な属性が用意されていますが、何かを設定するということはエクセルVBAでほとんどないかと思いますが、色々なプロパティがあることを覚えておきましょう。

今回の事例では画像要素の情報を取得するところまでにとどまりましたが、Imagesプロパティは画像の自動ダウンロード処理に利用されることが多いです。こちらについては、「画像をダウンロードして保存」で詳しく解説していますので確認してください。

他の方法で指定した画像要素オブジェクトの値を取得する

今回は、Imagesプロパティでa要素を取得する方法を解説しましたが、以下の方法でも取得できますので参考までに確認してください。

Sub sample()

  Dim objIE  As InternetExplorer

  '本サイトをIE(InternetExplorer)で起動
  Call ieView(objIE, "http://www.vba-ie.net/")
  
  
  '以下は全て同じ結果です。
  MsgBox objIE.document.all.tags("img")(0).outerHTML
  MsgBox objIE.document.getElementsByTagName("img")(0).outerHTML
  MsgBox objIE.document.getElementsByTagName("img").Item(0).outerHTML

End Sub