Fippiyのプログラム学習内容アウトプットBlog

日々の学習内容をアウトプットして振り返りを実施する。

VBAプログラム開発、スクレイピング【4】単体の画像データをVBAで扱い、Excel上に表示する

前回記事にてWeb書籍情報の一覧表示に出力されているテキストデータを取得してExcel一覧表へアウトプットしました。

Web一覧表示にはテキスト以外に本の表紙となる画像もあります。

今回はこちらの画像を取得してExcel上に表示出来るようにしていきます。

今回の目的

VBAで画像データを扱い、Excel上に表示させる。まずはデータを1つに限定し扱えるようになること。

なぜやるか

Web上の書籍一覧表示対象データとなっている画像を扱える様にし、全てのデータをExcelで管理できるようにするため。

やりたいこと

  • VBAで画像データを表示させる
  • Web画像データを扱える様にする
  • スクレイピングで対象データを取得する

やったこと

  • 表示させたい画像を確認する 
  • ローカル上で画像を扱う
  • 表示させる画像を直接指定して動作させる
  • スクレイピングで対象画像URLを取得する
  • スクレイピングVBAで画像出力までを実施する

実施内容

単体画像を表示させる

Execl画面上へインポートする

書籍情報の一覧表示を改めて確認します。

f:id:Fippiy:20190606134732j:plain

book一覧表示

本のタイトルや詳細テキスト、リンク先URLとURL内の文字として記載しているID番号までを取得出来るようにしていました。

この表示で残っている情報は画像です。

Excelで個別に画像を表示させる場合は、図のインポートを実施することで表示できますが、まずはこれをVBAで実施できるようにします。

 

VBAで画像を表示させる 

画像取得方法については、こちらを参考にさせて頂きました、ありがとうございます。 

tonari-it.com

 

まず、スクレイピングではなく、単純に同じフォルダにある画像ファイルを読み込んでExcel上に表示させてみます。

# picture1()

Sub picture1()
 'ローカルディスク上の画像ファイルを表示
 Worksheets("スクレイピング").Shapes.AddPicture _
  fileName:="~\ariawase-master\bin\test.jpg", _
   LinkToFile:=True, _
   SaveWithDocument:=True, _
   Left:=330, _
   Top:=40, _
   Width:=100, _
   Height:=80
End Sub

Worksheets().Shapes.AddPictureを利用して画像ファイルを読み込んでExcel上に表示します。

まず、これでマクロを実行してみると…。

f:id:Fippiy:20190608091734j:plain

画像取得

画像が表示されました。ずいぶんと右の方に表示されましたが…。

 

AddPictureにはオプションが7項目あり全て必須です。

fileName:="~\ariawase-master\bin\test.jpg"

ファイルの位置と名前です。この画像を処理します。

 

LinkToFile:=True

リンクをはるかどうかの選択です。Trueで画像ファイルに対してリンクをはっておいて読み込むか、Falseでリンクはせずに画像データそのものをコピーする形にするかを選びます。


SaveWithDocument:=True

保存する時に画像ファイルも一緒に保存するかどうかを指定します。Falseでは画像は保存せずリンク情報だけになります。


Left:=330
Top:=40

画像ファイルをExcel上で出力する位置です。両方0にするとExcelの左上隅になります。セル位置ではなく、ポイント指定です。


Width:=100
Height:=80

画像ファイル自体の大きさを指定します。

 

画像が右の方に出力されていたのは、Left:=330の位置に表示していたためですね…。

Left:=0,Top:=0と位置を修正して再度実行すると…。

f:id:Fippiy:20190608092621j:plain

画像出力位置調整

0,0としたことで、Excelの左上に表示できました。

 

書籍の画像をExcelで表示する

まずExcel上に画像表示ができたので、次は書籍一覧の画像から1つを表示させます。

# book.index

<div class="book-table__list--picture">
 <a href="/book/8">
  <img src="https://cover.openbd.jp/9784797398892.jpg">
 </a>
</div>

書籍一覧表示HTMLの画像部分です。imgタグにて画像URLを指定しています。

最終的には、スクレイピングでこのURLを取得し、画像ファイルを表示させることができれば良さそうです。

まずは、このURLを直接VBAに書き込んで画像出力を確認します。

# picture2()

Sub picture2()
 'coverURLを指定してファイル表示
 Worksheets("スクレイピング").Shapes.AddPicture _
  fileName:="https://cover.openbd.jp/9784797398892.jpg", _
   LinkToFile:=True, _
   SaveWithDocument:=True, _
   Left:=0, _
   Top:=0, _
   Width:=100, _
   Height:=80
End Sub

fileNameをローカルファイルからURLへ変更します。

f:id:Fippiy:20190608094315j:plain

URL参照

URLを参照して画像が出力されました。

 

スクレイピングして画像URLを取得する

URL指定でExcelに画像表示するところまで完了しました。あとは、スクレイピングで先程のURLを取得することができれば、画像表示までをVBAのコードのみで実現できます。

画像出力は一端隅においておき、スクレイピングで画像URLを取得します。

# スクレイピング

Dim imgURL As String
'1個をサンプル取得
imgURL = htmlDoc.images(0).src
Worksheets("スクレイピング").Cells(2, 5).Value = imgURL

HTMLドキュメントを取得した変数、htmlDocからimagesプロパティを利用して、画像データを取得する方法としました。

(0)は対象データの一つ目を取得しています。まずは、1つ処理ができることを確認するためです。

f:id:Fippiy:20190608095314j:plain

URL取得

画像URLが表示できました。後はこのURLをAddPictureで指定してやれば画像そのものがExcelで表示できそうです。

# スクレイピング

Dim imgURL As String
'1個をサンプル取得
imgURL = htmlDoc.images(0).src
Worksheets("スクレイピング").Cells(2, 5).Value = imgURL

Worksheets("スクレイピング").Shapes.AddPicture _
 fileName:=imgURL, _
  LinkToFile:=True, _
  SaveWithDocument:=True, _
  Left:=0, _
  Top:=0, _
  Width:=100, _
  Height:=80

URLテキストを表示後にAddPictureで画像表示を設定してやります。

f:id:Fippiy:20190608095940j:plain

スクレイピングURL画像

スクレイピングによって取得したURLを参照し画像が表示できました。

 

 

以上で画像の表示処理とスクレイピングによって出力画像URLから画像表示までの処理をすることができるようになりました。

1件目のデータのみ処理しましたが、次の工程で複数件に対応させ、既存のテキストデータと同じ行に画像を表示できるようにしていきます。