img要素の画像URLを取得
<< エクセルVBAで画像データを連想配列に格納するサブルーチン ：前の記事
前回は、Collectionオブジェクトを利用して特定のimg要素データを連想配列に格納するサブルーチンの作成について解説していきます。一度連想配列に格納すれば自由に利用することができますのでとても便利です。ただ、画像URLだけ配列に入れずに簡単に取得したい場合もあります。そこで今回は、特定のimg要素の画像URLを取得するサブルーチンの作成について解説していきます。
img要素の抽出については、「imgタグから要素を特定する」で解説していますので、そちらを確認してください。
目次
- DOM(Document Object Model)とは
- HTML(HyperText Markup Language)とは
- タグと要素(エレメント)の違い
- 利用するサブルーチン・プロパティ・VBA関数について
- 指定したimg要素オブジェクトの画像URLを取得するサブルーチン「srcValue」の解説
- 「srcValue」を利用して指定したimg要素オブジェクトの画像URLを取得するサンプルコード
- まとめ
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関数について
今回利用するサブルーチン・プロパティ・VBA関数は以下になります。
- ieViewサブルーチン
- ieCheckサブルーチン
- Documentプロパティとは
- Imagesプロパティとは
- outerHTMLプロパティとは
- srcプロパティとは
- MsgBox関数プロパティとは
ieViewサブルーチンとは
ieViewサブルーチンは指定したURLをInternetExplorerで起動させ、Webページが完全に読み込まれるまで待機処理をするマクロです。
ieCheckサブルーチンとは
ieCheckサブルーチンは指定したInternetExplorerオブジェクトのWebページが完全に読み込まれるまで待機処理をするマクロです。
Documentプロパティとは
InternetExplorerオブジェクトのDocumentプロパティはHTMLドキュメントのオブジェクトを返すプロパティです。これによりHTMLドキュメントを操作することができます。
Imagesプロパティとは
DocumentオブジェクトのImagesプロパティはHTMLドキュメント内の画像要素オブジェクトのコレクションを返すメソッドです。
outerHTMLプロパティとは
要素オブジェクトのouterHTMLプロパティは指定した要素オブジェクトの要素タグとその中に含まれるHTMLコードを取得するプロパティです。
赤文字がpタグのouterHTMLの取得範囲になります。
<p>pタグの<span class="colorRed">outerHTML</span>の取得範囲</p>
srcプロパティとは
Imagesオブジェクトのsrcプロパティは指定した画像要素の画像URLを取得するプロパティです。
objIE.document.images(添え字).src = "設定する画像URL"
MsgBox関数とは
MsgBox関数はダイアログボックスにメッセージとボタンを表示し、どのボタンが押されたかを示す整数型の数値を返します。
指定したimg要素オブジェクトの画像URLを取得するサブルーチン「srcValue」の解説
こちらは、指定したimg要素オブジェクトの画像URLを取得するサブルーチンになります。
Function srcValue(objIE As InternetExplorer, _
keywords As String) As String
Dim objImg As Object
For Each objImg In objIE.document.images
If InStr(objImg.outerHTML, keywords) > 0 Then
srcValue = objImg.src
Exit For
End If
Next
End Functionそれでは、VBAコードを１つずつ説明していきます。
Function srcValue(objIE As InternetExplorer, _
keywords As String) As Stringこちらは戻り値を返すFunctionステートメントに引数を2つ設定しているsrcValueサブルーチンになります。こちらの構文と引数の内容は以下になります。尚、引数はすべて参照渡しで渡されます。
| 構文 | srcValue(objIE,keywords) | ||||
|---|---|---|---|---|---|
| 引数名 | データ型 | 内容 | 値の事例 | 初期値 | 省略 |
| objIE | InternetExplorer | InternetExplorerオブジェクトを指定します。 | objIE, objIE2 | × | |
| keywords | String | 画像URLを取得するimg要素の一意のキーワードを文字列で指定します。 | "VBAの参照設定" | × | |
引数objIEは必須項目で、文書ドキュメントを抽出するnternetExplorerオブジェクトを指定します。InternetExplorerオブジェクトを引数に設定することで、複数のオブジェクトを処理することができます。
引数keywordsは必須項目で、画像URLを取得するimg要素の一意のキーワードを文字列で指定します。「画像URLを取得する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ステートメントを利用してオブジェクト変数objImgに「オブジェクト型(Object)」を変数宣言しています。
データ型はオブジェクト型(Object)を利用せず、より具体的なデータ型を宣言するほうがよいとされています。理由としては、補助入力機能など利便性のよさなどが挙げられます。
こちらについては本来であれば、「HTMLImage型」または「HTMLDocument型」などを指定するのがよいのでしょうか処理速度の観点からいうと必ずしもよいというわけではなりません。
他にもいくつか検証したのですが、以下のようにHTML関連のデータ型を選択した場合とオブジェクト型(Object)ではどれもオブジェクト型(Object)を選択した方が処理速度が速い結果となりました。
ですので、こちらで解説している内容のほとんどはオブジェクト型(Object)を選択しています。特に変更してもらっても問題ありませんので、自由に変更してください。
| 回数・処理 | オブジェクト型(Object) | HTMLImage型 | HTMLDocument型 |
|---|---|---|---|
| 1回目 | 27.3418秒 | 31.6074秒 | 31.9866秒 |
| 2回目 | 28.3105秒 | 34.0234秒 | 33.9478秒 |
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")
処理省略）
Nextimagesプロパティを採用したのは、処理速度にあります。以下は上記の各処理を5000回繰り返し処理をした時間を計測したものです。若干ですが、imagesプロパティの方が処理速度が速いのでこちらを採用しています。
| 回数・処理 | imagesプロパティ | getElementsByTagNameメソッド |
|---|---|---|
| 1回目 | 12.5435秒 | 13.3906秒 |
| 2回目 | 12.0781秒 | 13.2654秒 |
| 3回目 | 12.6541秒 | 13.3754秒 |
| 平均 | 12.4252秒 | 13.3438秒 |
If InStr(objImg.outerHTML, keywords) > 0 Then
srcValue = objImg.src
Exit For
End Ifこちらでは、If～Then～Elseステートメントを利用して要素内の文書ドキュメントに引数keywordsのキーワードが含まれているかチェックしています。
キーワードが含まれているかをチェックするには、指定したキーワードで最初に見つかった文字位置を返すInStr関数を利用しています。要素の文書ドキュメントに「引数keywords」のキーワードが含まれている場合は「0」以上の値を返すので、比較演算子を利用して「0」以上の場合を条件式としています。
そして、キーワードが含まれている場合は戻り値srcValueにimg要素オブジェクトのsrcプロパティを利用して指定したimg要素の画像URLを代入演算子で格納しています。画像URLの抽出が完了するとループ処理をする必要がありませんので、ループ処理を回避するExit Forステートメントを利用してループから抜け出します。
それでは、次にこちらのサブルーチンを利用して指定したimg要素の画像URLを取得してみましょう。
「srcValue」を利用して指定したimg要素オブジェクトの画像URLを取得するサンプルコード
こちらのVBAコードは、srcValueサブルーチンを利用して指定したimg要素オブジェクの画像URLを取得するマクロです。
Sub sample()
Dim objIE As InternetExplorer
'本サイトをIE(InternetExplorer)で起動
Call ieView(objIE, "http://www.vba-ie.net/library/index.html")
'「VBAの参照設定」キーワードの画像URLを取得する
MsgBox srcValue(objIE, "VBAの参照設定")
End Sub取得する画像URLのHTMLコード
<img src="/img/vbaproject.png" alt="VBAの参照設定" width="400" height="275" />
解説
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で指定したページが表示されます。
'「VBAの参照設定」キーワードの画像URLを取得する
MsgBox srcValue(objIE, "VBAの参照設定")こちらは、srcValueサブルーチンを利用して「VBAの参照設定」が含まれるimg要素の画像URLを取得しています。
まとめ
今回は、文書ドキュメントの指定したimg要素の画像URLを抽出するサブルーチンの作成について解説しました。一意のキーワードを設定するだけで簡単に画像URLを抽出することができました。次回は、特定のimg要素の画像データをダウンロードする方法について解説していきます。
次の記事： エクセルVBAで特定のimg要素の画像ファイルをダウンロードする >>
近田 伸矢, 植木 悠二, 上田 寛
IEのデータ収集＆自動操作のプログラミング本はこの1冊だけ！IEの起動やポップアップウィンドウ、表示を制御する基本的なコードはもちろん、テキストボックスやラジオボタン、表、ハイパーリンクなどのHTML部品を制御する方法など、自動操作に欠かせないノウハウを丁寧に解説。
- ツイート
