スクレイピングで使うCSSセレクタ　基礎編

MAGAZINE

ルーターマガジン

クローリング/スクレイピング

スクレイピングで使うCSSセレクタ　基礎編

2018.09.28

Pocket

nokogiriを使ったスクレイピングでは、解析したいHTMLなどのドキュメントをDOMに変換し、そこから取得したい情報を指定するためにcssセレクタが使えます。

そこで今回は基礎編と題しまして、スクレイピングで使用するCSSセレクタをいくつかご紹介します。

はじめに

<!DOCTYPE html>
<html>
  <head><title>タイトル</title></head>
  <body>
    <div>
      <h1>見出し</h1>
      <p>1つめ</p>
      <p>2つめ</p>
      <span>
        <p>3つめ</p>
      </span>
    </div>
  </body>
</html>

上記のHTMLファイルを用意し、そこから情報を取得していきます。

NokogiriでHTMLをパース

require "nokogiri"

#HTMLファイルの読み込み
html = File.open("sample.html"){|f| f.read }

#Nokogiriオブジェクトを生成
doc = Nokogiri::HTML.parse(html)

cssメソッドで各要素にアクセスしていきます。

基礎編

子孫要素

doc.css("div p")

#<p>1つめ</p>
#<p>2つめ</p>
#<p>3つめ</p>

上記のように各タグ名を半角スペースで区切ることでdiv要素の子孫である全てのp要素を取得できます。子孫となる要素は直下にある必要はなく、この場合2つめのp要素よりもさらに下の階層にある3つめのp要素も取得できます。

直下の子要素

doc.css("div > p")

#<p>1つめ</p>
#<p>2つめ</p>

タグを「>」で区切ることでdiv要素直下のp要素を取得できます。こちらは直下の要素のみなので3つめのp要素は取得されません。

直近の後要素

doc.css("h1 + p")

#<p>1つめ</p>

「+」でタグ名を区切ることでh1要素直後のp要素を取得できます。今回はh1要素の直後にある1つめのp要素が取得されます。また後要素(p)は前要素(h1)と同じ階層にある必要があります。

後要素

doc.css("h1 ~ p")

#<p>1つめ</p>
#<p>2つめ</p>

このように「~」でタグを区切ることで前要素(h1)の後ろにある要素(p)を取得できます。こちらは前要素と後要素が同じ階層にある必要がありますが、後要素は直後にある必要はありません。

ある文字列を含む要素

doc.css("p:contains('3つめ')")

#<p>3つめ</p>

要素内に特定の文字列を持つ要素を取得したい場合は、:contains('文字列')で文字列を指定すると要素を取得できます。また上記のように要素名(ここではp)を明示することで、p要素のうち内容に'３つめ'をもつ要素を取得できます。

最後に

数あるcssセレクタの中でも基本となるものを主にご紹介しました。
この他のスクレイピングで使うcssセレクタについては別記事でも紹介していきたいと思います。

興味のある方は、是非ご自身でも調べてみてください。

Pocket

CONTACT

お問い合わせ・ご依頼はこちらから

MAGAZINE