img要素の画像データを連想配列に格納

<< エクセルVBAで特定のimg要素データを連想配列に格納する ：前の記事

前回は、Collectionオブジェクトを利用して特定のimg要素データを連想配列に格納する方法について解説していきます。一度連想配列に格納すれば自由に利用することができますのでとても便利です。今回は、特定のimg要素データを連想配列に格納するサブルーチンの作成について解説していきます。

img要素の抽出については、「imgタグから要素を特定する」で解説していますので、そちらを確認してください。Imagesオブジェクトには様々なプロパティが用意されていました。今回もその中で比較的利用される画像URL・alt属性・幅・高さを連想配列に格納するサブルーチンの作成方法について解説していきます。

目次

DOM(Document Object Model)とは

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

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

DOMツリー

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関数について

今回利用するサブルーチン・プロパティ・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関数

指定した画像要素オブジェクトデータを連想配列に格納するサブルーチン「imageValue」の解説

こちらは、指定した画像要素オブジェクトデータを連想配列に格納するサブルーチンになります。

Function imageValue(objIE As InternetExplorer, _
                    keywords As String) As Collection
                    
  Dim objImg As Object
  Dim arrImg As Collection

  Set arrImg = New Collection

  For Each objImg In objIE.document.images

    With objImg

      If InStr(.outerHTML, keywords) > 0 Then

        arrImg.Add .src, "src" '画像URL
        arrImg.Add .nameProp, "nameProp" '画像ファイル名
        arrImg.Add .alt, "alt" 'alt属性
        arrImg.Add .Width, "width" 'width属性
        arrImg.Add .Height, "height" 'height属性
    
        Exit For
    
      End If
    
    End With

  Next
  
  Set imageValue = arrImg

End Function

それでは、VBAコードを１つずつ説明していきます。

Function imageValue(objIE As InternetExplorer, _
                   keywords As String) As String

こちらは戻り値を返すFunctionステートメントに引数を2つ設定しているimageValueサブルーチンになります。こちらの構文と引数の内容は以下になります。尚、引数はすべて参照渡しで渡されます。

imageValue("IEオブジェクト","格納するimg要素の一意のキーワード")
構文imageValue(objIE,keywords)
引数名データ型内容値の事例初期値省略
objIEInternetExplorerInternetExplorerオブジェクトを指定します。objIE,
objIE2		×
keywordsString格納するimg要素の一意のキーワードを文字列で指定します。"VBAの参照設定"×

引数objIEは必須項目で、文書ドキュメントを抽出するnternetExplorerオブジェクトを指定します。InternetExplorerオブジェクトを引数に設定することで、複数のオブジェクトを処理することができます。

引数keywordsは必須項目で、格納するimg要素の一意のキーワードを文字列で指定します。「格納するimg要素の一意のキーワード」というのは、格納するimg要素データ内で他とまったく被らないキーワードのことを指します。

例えば下記の場合、「こちらは一意のアンカーテキストです。」というキーワードは他では利用されていないキーワードですので、こちらを「一意のキーワード」と判断します。他にも「アンカーテキストです。」「です。」も一意のキーワードとして利用することもできます。

こちらの詳細については、「文書ドキュメント取得の処理の考え方」を確認してください。

<a href="#a1">こちらは一意のアンカーテキストではありません。</a>
<a href="#a2">こちらは一意のアンカーテキストではありません。</a>
<a href="#a3">こちらは一意のアンカーテキストです。</a>
<a href="#a4">こちらは一意のアンカーテキストではありません。</a>
<a href="#a5">こちらは一意のアンカーテキストではありません。</a>

  Dim objImg As Object
  Dim arrImg As Collection

こちらは、変数宣言でメモリ領域を割り当てるDimステートメントを利用してオブジェクト変数objImgに「オブジェクト型(Object)」を、オブジェクト変数arrImgに「Collection型」を変数宣言しています。

エクセルVBAで連想配列を作成する場合はCollectionオブジェクトを利用しますので、オブジェクト変数arrImgは「Collection型」で宣言しています。

また、データ型はオブジェクト型(Object)を利用せず、より具体的なデータ型を宣言するほうがよいとされています。理由としては、補助入力機能など利便性のよさなどが挙げられます。

こちらについては本来であれば、「HTMLImage型」または「HTMLDocument型」などを指定するのがよいのでしょうか処理速度の観点からいうと必ずしもよいというわけではなりません。

他にもいくつか検証したのですが、以下のようにHTML関連のデータ型を選択した場合とオブジェクト型(Object)ではどれもオブジェクト型(Object)を選択した方が処理速度が速い結果となりました。

ですので、こちらで解説している内容のほとんどはオブジェクト型(Object)を選択しています。特に変更してもらっても問題ありませんので、自由に変更してください。

回数・処理オブジェクト型(Object)HTMLImage型HTMLDocument型
1回目27.3418秒31.6074秒31.9866秒
2回目28.3105秒34.0234秒33.9478秒
  Set arrImg = New Collection

こちらでは、オブジェクトを参照するSetステートメントを利用してオブジェクト変数arrImgにCollectionオブジェクトを生成しています。こちらで記述しなくても宣言時に以下のように記述することもできますので、覚えておきましょう。

Dim arrImg As New Collection

  For Each objImg In objIE.document.images

   （処理省略）

  Next

こちらでは、For Each～NextステートメントのコレクションにDocumentオブジェクトのimagesプロパティで取得したコレクションを設定しています。また、オブジェクトを格納する変数にはオブジェクト変数objImgを設定しています。こちらでは、imagesプロパティで取得したすべてのimg要素の要素数だけループ処理を行っています。

今回、imagesプロパティで全てのimg要素を取得していますが、以下のようにGetElementsByTagNameメソッドからも取得することができます。

For Each objImg In objIE.document.getElementsByTagName("img")

処理省略）

Next

imagesプロパティを採用したのは、処理速度にあります。以下は上記の各処理を5000回繰り返し処理をした時間を計測したものです。若干ですが、imagesプロパティの方が処理速度が速いのでこちらを採用しています。

回数・処理imagesプロパティgetElementsByTagNameメソッド
1回目12.5435秒13.3906秒
2回目12.0781秒13.2654秒
3回目12.6541秒13.3754秒
平均12.4252秒13.3438秒
    With objImg

      If InStr(.outerHTML, keywords) > 0 Then

        arrImg.Add .src, "src" '画像URL
        arrImg.Add .nameProp, "nameProp" '画像ファイル名
        arrImg.Add .alt, "alt" 'alt属性
        arrImg.Add .Width, "width" 'width属性
        arrImg.Add .Height, "height" 'height属性
    
        Exit For
    
      End If
    
    End With

こちらではまず、1つのオブジェクトに対して処理をまとめるWithステートメントのオブジェクト名に「objImg」を設定しています。そして、If～Then～Elseステートメントを利用して要素内の文書ドキュメントに引数keywordsのキーワードが含まれていないかチェックしています。

キーワードが含まれているかをチェックするには、指定したキーワードで最初に見つかった文字位置を返すInStr関数を利用しています。要素の文書ドキュメントに「引数keywords」のキーワードが含まれている場合は「0」以上の値を返すので、比較演算子を利用して「0」以上の場合を条件式としています。

そして、キーワードが含まれている場合はIf文内の処理を行います。こちらの処理は指定したimg要素を連想配列に格納する処理になります。連想配列に格納する場合はCollectionオブジェクトのAddメソッドを利用します。利用方法については以下のような形で記述していきます。

arrImg.Add 配列に格納する要素, キー

連想配列に格納したらループ処理をする必要がありませんので、ループ処理を回避するExit Forステートメントを利用してループから抜け出します。

  Set imageValue = arrImg

そして、Setステートメントを利用して戻り値imageValueに格納したimg要素の連想配列を代入演算子でセットしています。それでは、次にこちらのサブルーチンを利用して指定した画像要素オブジェクトデータを連想配列に格納してみましょう。

「imageValue」を利用して指定した画像要素オブジェクトデータを連想配列に格納するサンプルコード

こちらのVBAコードは、imageValueサブルーチンを利用して指定した画像要素オブジェクトデータを連想配列に格納するマクロです。

Sub sample()

  Dim objIE As InternetExplorer
  Dim arrImg As Collection

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

  Set arrImg = imageValue(objIE, "VBAの参照設定")
    
  '①画像URLを抽出する
  MsgBox arrImg("src")
  
  '②画像ファイル名を抽出する
  MsgBox arrImg("nameProp")
  
  '③alt属性を抽出する
  MsgBox arrImg("alt")
  
  '④width属性を抽出する
  MsgBox arrImg("width")

  '⑤height属性を抽出する
  MsgBox arrImg("height")

End Sub

連想配列に格納する要素のHTMLコード

<img src="/img/vbaproject.png" alt="VBAの参照設定" width="400" height="275" />

解説

Sub sample()


  Dim objIE  As InternetExplorer
  Dim arrImg As Collection

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

  '本サイトを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で指定したページが表示されます。

    Set arrImg = imageValue(objIE, "VBAの参照設定")

こちらでは、Setステートメントを利用してオブジェクト変数arrImgにimageValueサブルーチンの戻り値である連想配列を参照します。

imageValueサブルーチンの第一引数にはオブジェクト変数の「objIE」を第二引数には格納する要素内の一意のキーワード「VBAの参照設定」を設定しています。こちらを処理することにより画像データを連想配列に格納しました。

  '①画像URLを抽出する
  MsgBox arrImg("src")
  
  '②画像ファイル名を抽出する
  MsgBox arrImg("nameProp")
  
  '③alt属性を抽出する
  MsgBox arrImg("alt")
  
  '④width属性を抽出する
  MsgBox arrImg("width")

  '⑤height属性を抽出する
  MsgBox arrImg("height")

こちらでは、連想配列に格納したそれぞれデータをキーで指定してメッセージボックスに表示させています。

IE(InternetExplorer)のImagesプロパティの結果2 IE(InternetExplorer)のImagesプロパティの結果7IE(InternetExplorer)のImagesプロパティの結果3IE(InternetExplorer)のImagesプロパティの結果4IE(InternetExplorer)のImagesプロパティの結果5

まとめ

今回は、Collectionオブジェクトを利用して特定のimg要素データを連想配列に格納するサブルーチンの作成について解説していきます。一度連想配列に格納すれば自由に利用することができますのでとても便利です。ただ、画像URLだけ配列に入れずに簡単に取得したい場合もあります。そこで次回は、特定のimg要素の画像URLを取得するサブルーチンの作成について解説していきます。

次の記事： エクセルVBAで特定のimg要素の画像URLを取得するサブルーチン >>

Excel VBAでIEを思いのままに操作できるプログラミング術 Excel 2013/2010/2007/2003対応

近田 伸矢, 植木 悠二, 上田 寛

IEのデータ収集＆自動操作のプログラミング本はこの1冊だけ！IEの起動やポップアップウィンドウ、表示を制御する基本的なコードはもちろん、テキストボックスやラジオボタン、表、ハイパーリンクなどのHTML部品を制御する方法など、自動操作に欠かせないノウハウを丁寧に解説。

  • このエントリーをはてなブックマークに追加

よく読まれているVBAのIE(InternetExplorer)操作関連記事

VBAのIE制御についてのQ&A掲示板

↑エクセルVBAのIE(InternetExplorer)操作で分からない事があればこちらの掲示板よりご質問ください＾＾

ExcelのVBA初心者入門

↑こちらはExcelのVBAをマスターできるよう初心者向けのエクセルVBA入門コンテンツになります^^

VBAのIE制御入門RSS

RSSフィードを登録すると最新記事を受け取ることができます。

VBAIE操作のスカイプレッスン

VBAでIE(InternetExplorer)制御の準備

エクセルVBAでIE制御の基本操作

IE制御の基本操作一覧(16)

エクセルVBAでHTMLエレメント基本操作

HTMLエレメント基本操作一覧(16)

エクセルVBAでHTMLエレメント実践操作

エクセルVBAでHTMLフォーム基本操作

HTMLフォーム基本操作一覧(16)

エクセルVBAでHTMLフレームの基本操作

HTMLフレームの基本操作一覧(8)

エクセルVBAでIE制御の応用編

IE制御の応用編一覧(7)

【ダウンロード】IE操作に便利なツール

こちらでは、これまでに紹介したIE(InternetExplorer)操作で便利な機能をツール化しています。無償でダウンロードできますので、目的に合わせたご利用ください。

IEオブジェクトのメソッド・プロパティ

こちらでは、IE(InternetExplorer)オブジェクトのメソッド・プロパティをまとめています。

IE操作に利用されているVBA関数

こちらでは、エクセルVBAのIE(InternetExplorer)操作で利用されたVBA関数をまとめています。

IE操作に利用されているステートメント

こちらでは、エクセルVBAのIE(InternetExplorer)操作で利用されたステートメントをまとめています。ExcelのVBAで基本的な部分になりますので、しっかり理解しましょう。

IE(InternetExplorer)制御のVBAコード

こちらでは、これまでに作成したIE(InternetExplorer)操作で役立つサブルーチンをまとめています。
全てをコピーする必要はありませんが、目的に合わせたサブルーチンをご利用ください。

ExcelのVBAで作成した役立つVBAコード

役立つVBAコード一覧(23)