nodeでスクレイピングをしたのでライブラリ「CasperJS」と「cheerio-httpcli」の紹介


[フロムスクラッチ Advent Calendar 2017](https://qiita.com/advent-calendar/2017/fromscratch) の19日目の記事です。

# はじめに
WEBサイトの情報を定期的に取得したいときってありますよね。
しかも、広大なサイト内の情報を定期的に、、、指定文字を検索するとか、色々とWEBサイトを巡回して自動化したいという要望に答えるべく、プログラムを書きます。

WEBサイトからデータ取得する時に必要な技術要素は、「**スクレイピング**」ですね。

スクレイピングとは
> ウェブスクレイピング（Web scraping）とは、ウェブサイトから情報を抽出するコンピュータソフトウェア技術のこと。ウェブ・クローラー(Web crawler) あるいはウェブ・スパイダー(Web spider)とも呼ばれる。
[ウェブスクレイピング](http://ja.wikipedia.org/wiki/%E3%82%A6%E3%82%A7%E3%83%96%E3%82%B9%E3%82%AF%E3%83%AC%E3%82%A4%E3%83%94%E3%83%B3%E3%82%B0) – Wikipediaより 

強力なクローリング・スクレイピングフレームワークのScrapy（python）など、有名ですが、今回は気軽にサクサク作れるnodeで作ってみました。

目標は取得したいURLは別で用意しているので、そこからスタート！
#nodeでスクレイピングをしたのでライブラリの紹介#

#今回のターゲットは「**CasperJS**」と「**cheerio-httpcli**」

##この２つを簡単に紹介##
###『cheerio-httpcli』の説明###
cheerioはHTMLパーサに jQuery API のサブセットを実装したものです。
DOM APIはありません。必ずjQueryの関数を使う必要があります。
*→静的なHTMLをベースに処理するモジュールなのでSPAなどクライアントサイドのJavaScriptによってコンテンツを取得/変更するタイプのWEBページには対応していません。*

↓github
https://github.com/ktty1220/cheerio-httpcli

###『CasperJS』の説明###
phantomjs という Javascript で動かせるヘッドレスブラウザと casperjs というユーティリティを使って動かすという感じです。
*PhantomJS のレンダリングエンジンには Webkit が使われています*
*CasperJS は、その PhantomJS をより手軽に使えるようにするライブラリです*
*casperJSはphantomJSがないと動きません。*

↓github
https://github.com/casperjs/casperjs
↓公式サイト
http://casperjs.org/
↓公式APIドキメント
http://docs.casperjs.org/en/latest/modules/index.html

##この２つを選んだ理由と使い分け##
###『cheerio-httpcli』を選んだ理由###
####jQueryに慣れている場合は、学習コストが低く済むハズ。####
今まで使っていた『jQuery』をサーバーでサイドで使えるとは、使ってみるしか無いでしょ。
***確実に、工数削減に繋がったハズ***

####プロキシサーバー経由でアクセスの設定標準で用意されている####
AWSでサーバーを用意すると、そのIP帯からのアクセスをブロックしているサイトがあるので、プロキシを経由するなどの対策が取りやすいので、この対応が出来るライブラリを選出

####User-Agentを手動で設定出来る####
スマートフォンサイト、PCTサイト、タブレットサイトで表示形態が異なる事があるので、UAを個別にしてい出来ると確認がし易いので、運用上ここも重要なポイント

####受信するデータの限界量を数値(バイト数)で指定出来る####
このライブラリの目的はHTMLをサックっと取得して、さくっと抽出するという軽い処理を並行で実施したいので、大きいサイズのページとかはエラーでスキップしたいので、これもポイント高い！

####同期処理、非同期処理用の関数が用意されている####
今回は使わなかったが、同期処理と非同期処理の関数が用意されているので、対象ページに寄って同期・非同期を分けるなどがし易くなるハズ
*※ここは将来の拡張性の話*

###『CasperJS』の説明###
phantomjs という Javascript で動かせるヘッドレスブラウザと casperjs というユーティリティを使って動かすという使い方が多いです。
####PhantomJSを使ってブラウザなしでWebページを表示・実行できる####
『PhantomJS』は、

- Webkitベースのヘッドレスで高速なブラウザ
- ヘッドレスとはGUIを持たないという意味で、完全にCUIでのみ動作
- CanvasやSVGなどもサポートされていて、画像を出力する事も可能

なので、ajaxを使った表示にも対応出来るのでクライアントサイドのJavaScriptによってコンテンツを取得/変更するタイプのWEBページにも対応ができる

####PhantomJSを使ってスクリーンキャプチャを自動化が可能####
PhantomJSはコマンドラインから実行するWEBブラウザで、ヘッドレスブラウザ(GUIがないコマンドライン用のブラウザ)なので、レンダリングした後のキャプチャを撮ることができる

####エンジンを PhantomJS 以外に出来る####
 - phantomjs : Chrome系エンジン
 - slimerjs : Firefox系エンジン
 - triflejs : IE系エンジン

####CasperJSはCoffeeScriptも実行可能####
*※ここは将来の拡張性の話*

## 導入&サンプル ##
### cheerio-httpcli導入編 ###
```
sudo npm install cheerio-httpcli
```
一応上記のコマンドについて補足すると、cheerio-httpcliをグローバルにインストールしています。

### cheerio-httpcliサンプル ###
```cheerio.js
var client = require('cheerio-httpcli');
var TARGET ="https://bdash-marketing.com/";

client.fetch(TARGET , (err, $, res) => {
    const result = [];
    $('.normal_list').each(function (id, el) {
        const month = $(this).find('#home-section-header').text();

        $(this).find('li').each(function (id, el) {
            result.push(month + $(this).text().replace(/\r?\n?/g, ''));
        });
    });

    console.log(result.join('\n'));
});

```


### CasperJS導入編 ###
CasperJSのインストール　[公式サイト](http://casperjs.org)からダウンロードできます。

```
sudo npm install -g phantomjs
sudo npm install -g casperjs
```
一応上記のコマンドについて補足すると、PhantomJSとCasperJSをグローバルにインストールしています。
### CasperJS サンプル ###
`gethtml.js` を用意

```gethtml.js
var casper = require('casper').create();
var fs = require('fs');
var $  = require('jquery');
var FILE_NAME = "output.html";
var TARGET ="https://bdash-marketing.com/";
var outs =[];

casper.start(TARGET, function(){
  // id="home-section-header"のコンテンツを取得する
  var t = this.getHTML("#home-section-header");
  // jqueryオブジェクト化してリンクを取得する
  $(t).find("a").each(function(){
      outs.push($(this).prop('outerHTML')+"\r\n");
  });
});

casper.then(function(){
  // 取得したリンクリストをファイル出力
  fs.write(FILE_NAME, outs.join(""));
});

casper.run();
```

`casperjs gethtml.js` で実行
`output.html` を確認する