【SeleniumBasic】スクレイピングをするのに必要なHTMLについて説明します1(Excel VBA)

こんにちは、blueです。

SeleniumBasic導入時の記事ではデータの取得（要素の取得という）をCssSelectorを用いて行ってきました。
以前の記事はこちら

【SeleniumBasic】Webスレイピングをできる限りわかりやすく説明する（Excel VBA）

今回WebブラウザとしてChromeでのWebスクレイピングを勉強しました。ただ理解には複数のサイト閲覧が必要だったのでその備忘録も含めてまとめて記載し…

【SeleniumBasic】Yahooメールへのログイン方法をわかりやすく説明する(Chrome)

こんにちは。blueです。今回はSeleniumBasic-Chromeを用いたYahooメールへのログイン方法について説明します。業務やプライベートにおいてサイトでの…

しかし、CssSelectorのみでは単一要素の取得しかできません。

広くスクレイピングをするにはHTMLを理解することが必要になってきますが、スクレイピングの視点から書かれたHTMLに関する記事は少ないように感じます。

そこで今回からは

（スクレイピングに必要な）HTMLのタグ構造
（スクレイピングに必要な）HTMLの階層構造

ことに関しての説明をしようと思います。

HTMLが読めるようになれば多くの情報を取得できるようになります。

なお今回の記事ではスクレイピングに必要な最低限のHTMLのタグ構造について説明します。

またタグから取得できる情報についても説明します。

この記事を読めばより広いスクレイピングができるようになりますので、参考にしていただければ幸いです。

なお今回の書籍は以下を参考にしています。
HTMLとCSSを基礎から学びたいという方はこちらの書籍がお勧めです。章ごとの最初にポイントがまとめられていたり、対話形式で理解する部分もあったりで理解しやすいように工夫されています。

リンク

HTMLとCSSの知識と技術をしっかりと学びたいという方はこちらの書籍がお勧めです。デザインと書かれているだけあってページ内の区分けが綺麗ですし、図やコードもカラフルなので視覚的にもわかりやすい書籍になっています。

リンク

今回のゴール
Webページの構成要素
HTMLとは
HTMLのタグ構造
要素の取得方法
1. FindElementByTag(“タグ名”)
2. FindElementByClass, ID, Name(“属性値”)
要素からの情報の取得方法
1. Textメソッド
2. Attribute(“属性”)メソッド
今回のまとめ

今回のゴール

今回のゴールは以下です。

HTMLのタグ構造について理解する
タグから取得できる情報について理解する

以降で詳しく説明します。

Webページの構成要素

HTMLに入る前にまずWebページを構成する言語について説明します。

Webページは以下から構成されています。

HTML
CSS
JavaScript

HTMLはWeb文書構造を表すもの、CSSはHTMLに対して装飾を施すもの、JavascriptはHTMLに対して動きを付けるものになります。

基本はHTMLになっていることがわかると思います。

HTMLとは

HTMLは「Hyper Text Markup Language」の略でインターネットで公開するドキュメントを作成するための言語です。

ドキュメントに見出しや箇条書き、テーブルなどの構造を持たせることができます。

またリンク、画像、ビデオの表示もさせることができます。

HTMLのタグ構造

HTMLの構造は以下のようになります。

まず基本構造の説明をします。

<p>~~</p>を「タグ」といいます。また最初を「開始タグ」、最後を「終了タグ」といいます。

タグによって囲まれた構造をとっているのがHTMLの特徴となります。

またタグ内の文字を「タグ名」で開始タグと終了タグで囲まれた部分のことを「要素の内容」、全体を「要素」と呼びます。

次にタグ内の説明になります。

<>の中には属性を追加することができます。

また属性に対しては＝で属性値を設定することができます。

まとめると以下のようになります。

HTMLには

タグ
タグ名
属性
属性値
要素の内容
要素

の情報が含まれています。各々の名称については以降の説明で多用しますのでまずはここを理解してください。

要素の取得方法

スクレイピングはまずHTMLの「要素」を取得することから始まります。

要素の取得は＜＞のタグ情報から行います。

以降で一つずつ説明します。

FindElementByTag(“タグ名”)

タグ名から取得する方法になります。

Tag名としては具体的には以下のようなものがあります。

タグ名	内容
p	段落　paragraphの意味
ul	非序列リスト　・　・　・のもの
ol	序列リスト　1,2,3のもの
li	リスト ulやolの下に配置される
a	アンカーリンクの略 hrefとともに使われる
div	区分 divisionの略　段落の一種
table	テーブル
img	画像 srcなどとともに使われる

これらのタグの情報をもとに要素を取得します。

FindElementByClass, ID, Name(“属性値”)

属性から取得する方法になります。

代表的な属性としては以下のようなものがあります。

属性	内容
class	タグにつけられる属性　同一html内で属性値を重複させることができる
id	タグにつけられる属性　同一html内では属性値は重複できない
name	タグにつけられる属性　同一html内で属性値を重複させることができる

要素からの情報の取得方法

情報の取得方法は簡単に言うと２つあります。TextメソッドとAttributeメソッドです。

次から詳しく説明します。

Textメソッド

「要素の内容」を取得します。

以下はYahoo!JAPANのHTMLコードですがTextメソッドで「Yahoo!JAPAN」を取得することができます。

<a class="yMWCYupQNdgppL-NV6sMi _3sAlKGsIBCxTUbNi86oSjt" href="https://www.yahoo.co.jp" data-ylk="rsec:header;slk:logo;pos:0" data-cl-params="_cl_vmodule:header;_cl_link:logo;_cl_position:0" data-rapid_p="1">Yahoo! JAPAN</a>

コードとしては以下のようになります。