スクレイピングに必要な最低限のHTML/CSSの知識

R
2022.04.14

スクレイピングでデータを収集するためには、HTMLで書かれたWebページの文書構造を理解し、どこに目的のデータが記載されているかをコンピュータに教えてやる必要があります。このページではスクレイピングに最低限必要なHTML/CSSの知識をまとめています。

HTML

HTMLとはHyper Text Markup Languageを略したもので、Webページを表現するために用いられます。

タグ

html文書は <>と</>で囲まれる形で構造化されています。<>や</>の部分をタグといい、タグの中で括られたもの全体を要素といいます。

  • htmlタグで囲まれたhtml要素：<html>と</html>で囲まれた部分全体
  • bodyタグで囲まれたbody要素：<body>と</body>で囲まれた部分全体

<>を開始タグ、</>を終了タグといいます。htmlドキュメントは基本的に<html>という開始タグと</html>という終了タグで囲まれています。以下の例では

  • htmlタグの中に、headタグ、bodyタグ
  • headタグの中にtitleタグ
  • bodyタグの中にh1タグ、liタグが2つ

が入った入れ子構造になっています。

<html>
　　　　<head>
　　　　　　　　<title>タイトル</title>
　　　　</head>
　　　　<body>
　　　　　　　　<h1>1ページ目</h1>
　　　　　　　　<li><a href="https://walkintheforest.net">リンク先1</a></li>
　　　　　　　　<li><a href="https://walkintheforest.net/what-is-r/">リンク先2</a></li>
　　　　</body>
</html>

属性と値

以下のように記述することで要素に属性と値を付与することができます。

<要素名 属性="値">

a要素のhref属性にurl文字列を値として付与する場合は以下のように記述します。

<a href="https://walkintheforest.net">リンク先1</a>

スクレイピングによるHTML構造の抽出

スクレイピングによりデータを抽出するということは、以下のいずれかを行うことになります。

  • 特定の要素にアクセスして中身を取り出す
  • 特定の属性にアクセスして値を取り出す

「特定の要素にアクセス」「特定の属性にアクセス」するためにCSSを利用することが多いので、スクレイピングをするためには、CSSに関する知識も少々必要となります（目的がスクレイピングということであれば「少々」で十分です）。

CSS

CSSとはCascading Style Sheetの略で、HTMLやXMLの要素の表示の仕方を指定するための言語です。CSSを用いることで、html文書内の特定の部分に対して、色や文字の大きさ、行間、余白等を指定することができます。

以下の例では2つ目のp要素のclass属性に「ex_class」という値（文字列）を付与し、3つ目のp要素ではid属性に「ex_id」という値（文字列）を付与しています。example.cssというcssファイルで、class属性がex_classであるp要素やid属性がex_idであるp要素に対する表示方法（色、文字の大きさ、etc）を指定することで様々な形で表示させることができます（詳細はここでは割愛します）。このclass属性やid属性をスクレイピングで利用することができます。

<html>
　　　　<head>
　　　　　　　　<title>タイトル2</title>
　　　　　　　　　<link rel="stylesheet" href="example.css">
　　　　</head>
　　　　<body>
　　　　　　　　<h1>2ページ目</h1>
　　　　　　　　<p>何もない場合</p>
　　　　　　　　<p class="ex_class">classの例</p>
　　　　　　　　<p id="ex_id">idの例</p>
　　　　</body>
</html>

CSSセレクタによるHTML構造の抽出

前述したとおりスクレイピングは

  • 特定の要素にアクセスして中身を取り出す
  • 特定の属性にアクセスして値を取り出す

を行うことですので、欲しい情報を取得するために「特定の要素にアクセス」「特定の属性にアクセス」する必要があります。この方法の一つがCSSセレクタを用いる方法です。

基本セレクタ

要素型セレクタ

指定された要素名を持つすべての要素を選択します。

構文：　elementname
例：　「p」 はあらゆるp要素を選択します。

クラスセレクタ

指定されたclass属性をもつすべての要素を選択します。

構文：　.classvalue
例： 「.index」はclass属性がindexであるすべての要素を選択します。

IDセレクタ

指定されたid属性をもつ要素を選択します（1つのページに同じidを持つ要素は1つしかない）

構文： #idvalue
例： 「#toc」　はid属性がtocである要素を選択します。

結合子

子孫結合子

「 」（空白）結合子は、第1要素の子孫にあたる要素を選択します。

構文：A B
例：　「div span」は<div>要素の中にある<span>要素をすべて選択します。

子結合子

「>」結合子は、第1要素の直接の子にあたる要素を選択します。

構文： A > B
例： 「ul > li」 は<ul>要素の直接の子の<li>をすべて選択します

一般兄弟結合子

「~」結合子は第1要素より後ろにある兄弟レベルの第2要素を選択します。

構文： A ~ B
例： 「h2 ~ p」　は<h2>要素のあとに続く同じ親をもつ<p>要素をすべて選択します。

隣接兄弟結合子

「+」結合子は第1要素のすぐ後ろにある兄弟レベルの第2要素を選択します。

構文：　A + B
例： 「h2 + p」は<h2>要素のあとにすぐ続く同じ親をもつ<p>要素を選択します。

XPathによるHTML構造の抽出

XPath(XML Path Language)を使うことでもCSSセレクタと同じことができます。XMLはHTMLのようにタグで文書構造を記述できますが、自分でタグを定義できる点がHTMLと異なります。XMLの特定の箇所にアクセスするための簡単な構文がXPathです。

CSSセレクタでは入れ子の階層を降りていくのに 「>」を使いましたが、XPathはスラッシュ「/」で区切りながら階層を記述します。

/html/body/h1

ドキュメントの一番上の要素（ルート要素）から、すべての要素を含めて目標要素に至るパスは絶対パスと呼ばれます。絶対パスは長くなる場合があるため、単純化して「//」を使用することができます。

XPathの指定の仕方

タグ要素で指定する

構文： …/タグ, //タグ
例：　/html/body/h1, //h1

何番目かを指定する

構文： …/タグ[n]
例： //p[2]は2番目のp要素を選択

属性で指定する

構文： …/タグ[@属性=”値”]
例： //p[@id=”ex_id”] idがex_idであるp要素を選択
例： //*[@class=”ex_class”] classがex_classである要素すべてを選択

子孫関係

構文 A//B
例：　div//spanは<div>要素の中にある<span>要素をすべて選択します。

子関係

構文 A/B
例：　div/spanは<div>要素の中にある<span>要素をすべて選択します。

兄弟関係

構文： A/following-sibing::B, A/preceding-sibing::B
例：　div/following::spanでdivタグで指定された要素より後の兄弟span要素
例：　div/preceding::spanでdivタグで指定された要素より前の兄弟span要素

 

スクレイピングができるようになると

こんなことができちゃいます！

競馬 過去データcsvをnetkeibaから無料で入手する方法
JRA-VANを無料で使えるのはお試し期間のみ。競馬のデータ分析を継続して行うには、どうしても過去の競馬レース結果データを自前で収集する必要があります。netkeibaからのスクレイピング方法やデータをcsv 形式で保存する方法について記述しています。
walkintheforest.net
競馬予想AIの作り方 〜 Rでスピード指数をスクレイピング
スピード指数データは「無料」「スピード指数」で検索して、トップに出てくる下記のサイトからを入手させていただくことにしました。 競馬新聞＆スピード指数（無料）
walkintheforest.net
競馬予想AIの作り方 〜 Rで出馬表をWebスクレイピング
前回の記事でせっかくスピード指数をスクレイピングしてデータベースを作ったのだから、次のレースの検討に活かしたい‼️そうすれば、きっと…（笑）。というわけで、今週末開催されるレースの出走テーブルをnetkeibaさんからスクレイピングさせてもらうことにしました。
walkintheforest.net
競馬予想AI　netkeibaのスクレイピングでオッズ、人気も取得
netkeibaをスクレイピング。でも、rvestパッケージではnetkeibaのオッズや人気は、スクレイピングできないんです。ここでは、RSeleniumパッケージを使ってオッズや人気をスクレイピングする方法を紹介しています。
walkintheforest.net
競馬予想　データを可視化　スピード指数を活用する
スピード指数を可視化して、出馬表をグラフィカルにするためのソースコードを公開します。データを可視化すれば、情報を適切に評価して、迷うことなく買い目を選択できるようになったり、競馬が上手な人にしかわからないことがわかるようになるなどの効果が得...
walkintheforest.net

スクレイピングに用いるrvestパッケージの使い方を知りたい方はこちら

Rでスクレイピングするならrvest　表もリンクもテキストも
Rでスクレイピングをするならrvestパッケージを使うのがベスト。表データ、リンク先URL、テキストなどのデータを簡単に入手できます。netkeibaのレース結果を題材にrvestパッケージの使い方をまとめています。
walkintheforest.net

まとめ

スクレイピングをするにあたって最低限必要なHTMLとCSSの知識を整理しました。HTMLの要素の指定の仕方（CSSセレクタ、XPath）はここに示した以外にも多くの方法がありますが、それは効率的に要素をするための方法です。逆に言うと、「泥臭い方法でもよし」とすれば、ここに示した方法だけでも十分な場合が多いです。それより、スクレイピングのコードを書いて慣れることの方が大切です。ぜひ、スクレイピングに挑戦してみてください。