−ゆめログ− | ゆめみスタッフブログ

はじめに

• ゆめみメンバーが Qiita へ投稿した新著投稿を表示するプログパーツを作りました。

  • このプログの右隅にも表示されています。

    

  • このパーツ生成スクリプトのソースはこちら

    • https://github.com/hkusu/CasperJS_scraping_Qiita
• このパーツは、QiitaのサイトをWEBスクレイピングして作成しています。今回はこのWEBスクレイピングについて書きます。
• CasperJS は CoffeeScript をそのまま解釈してくれるので、今回は CoffeeScript で書いてみます。
  • ちなみに CasperJS は仮想ブラウザ？的に動いているので、対象ページが JavaScript 等で動的に描写されるページでも、スクレイピングできるはず..です。
• CasperJS の 環境構築の方法（Mac）については、CasperJSでWEBサイトの画面キャプチャを取得してみた をご覧ください。

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

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

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

• では上記のソースを実行してみます。コマンドラインで、

  $ casperjs scraping.coffee
  

• すると次のように、href="hoge" の中身が全て取得できたことが確認できます。

  

querySelector の使い方のポイント

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

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

例えばこの例だと、

• 対象ページの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 から始まるもの

• 文字列を加工する

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

おわりに

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