CasperJSでWEBサイトをスクレイピングしてみる #Qiita

前回の投稿（CasperJSでWEBサイトの画面キャプチャを取得してみた）の続きです。環境構築の方法（Mac）については、前回の投稿をご覧ください。

はじめに

とある事情で、Qiitaの Organizationページ(自社の) をWEBスクレイピングしました。
- とある事情というのは、自社のブログに、自社メンバーのQiita新着投稿をブログパーツ的に表示したかった。
- Qiitaへゴリゴリ負荷をかけるものではないです^^;
CasperJS は CoffeeScript をそのまま解釈してくれるので、今回は CoffeeScript で書いてみます。
- ちなみに CasperJS は仮想ブラウザ？的に動いているので、対象ページが JavaScript 等で動的に描写されるページでも、スクレイピングできるはず..です。

今回の成果物

QiitaをWEBスクレイピングして、こういうブログパーツ（といってもHTML）を自動生成できるようにしました。
- http://hkusu.github.io/CasperJS_scraping_Qiita/demo.html
- 実際にはこれを cron 等で定期的に生成します。
生成スクリプトのソースはこちら
- https://github.com/hkusu/CasperJS_scraping_Qiita

簡単なWEBスクレイピングの例

まず手始めに、対象ページの a タグの href="hoge" を全て取得してみます。ソースはこんな感じ。

scraping.coffee

casper = require("casper").create()

target_url = "http://qiita.com/organizations/yumemi"

# 対象のWEBページを開く
casper.start target_url, ->

  urls = []

  urls = @evaluate ->
    items = document.querySelectorAll("a")
    Array::map.call items, (e) ->
      e.getAttribute('href')

  # 出力
  @echo(urls.join("\n"))

casper.run ->
  @exit()

スクレイピングのポイントは、querySelectorAll のところ。
querySelector の使い方については、下記のサイトを参考にしました。
- http://www.javascriptkit.com/dhtmltutors/css_selectors_api.shtml

では上記のソースを実行してみます。コマンドラインで、
```
$ casperjs scraping.coffee
```
すると次のように、href="hoge" の中身が全て取得できたことが確認できます。

`querySelector` の使い方のポイント

上記の例のように、単純に a タグのものを全て取得としてしまうと、余分なものも取得されてしまうので、実際は対象ページのHTMLの構造を見て、絞り込む必要があります。

具体的にいうと、divタグのid名、class名、HTMLタグ名、HTMLタグの属性(検索に正規表現の利用可) で絞ります。

例えばこの例だと、

elements = []

elements = @evaluate ->
  items = document.querySelectorAll(".activities article .body a[href*=\"/items/\"]")
  Array::map.call items, (e) ->
    e.getAttribute('href');

対象ページのHTMLの activities class 配下の、
article タグ配下の、
body class 配下の、
a タグで、href 属性の value（つまりURL）で /items/ を含むものの、
href 属性の value（つまりURL）を取得する

となります。

href 属性のところで *= は部分一致を意味します。もし先頭文字列の一致の場合は ^= 、後方文字列の一致の場合は $= とします。

e.getAttribute('href'); は属性の取得を意味します。もしHTMLの中身を取得する場合は e.innerHTML とします。

ただ実際には、うまく絞りきれない場合が多いので.. その場合は、いったん配列にスクレイピングの結果を格納しておいて、普通に CoffeeScript で配列操作を行います。例えば、

特定のURLを含むものを、別の配列へ移し替える

この例の場合は URLが /piyo から始まるもの

elements_2 = []

i = 0
while i < elements.length
  if elements[i].match(/^\/piyo/)
    elements_2.push(elements[i])
  i++

文字列を加工する

この例の場合は、余分な文字列の削除

i = 0
while i < element.length
  entry_days[i] = entry_days[i].replace(/[\n\r]/g,"")
  entry_days[i] = entry_days[i].replace(/\ /g,"")
  entry_days[i] = entry_days[i].replace(/<strong>.+?<\/strong>/g,"")
  i++

おわりに

スクレイピングする際は、対象ページのHTMLソースを見て、睨めっこ＆試しながらソースを書いていく流れになります^^; 結構、骨が折れる作業です..

CasperJSでWEBサイトをスクレイピングしてみる

はじめに

今回の成果物

簡単なWEBスクレイピングの例

querySelector の使い方のポイント

おわりに

`querySelector` の使い方のポイント