PhantomJs/CasperJsによるキャプチャー自動化を行います。
スマートフォン端末やタブレット端末など多様化するデバイスに対して、上手くキャプチャーが取れない、大量のページをキャプチャーするのに膨大な労力がかかるといった問題を解決できます。
間違った認識、より効率的な記述等あればご指摘頂ければ幸いです。
環境構築（インストール）
macの場合
1.パッケージ管理ツールhomebrewをインストール。ターミナルで下記のコマンドを叩きます。
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
2.phantomjs/casperjsをインストールします。
brew install phantomjs
brew install casperjs --devel
※「--devel」がない場合casperバージョンによりphantomjsがサポートされておらず、実行してもエラーになることがあります。
3.正常にインストールされているかバージョンを確認。バージョンが表示されればOK
phantomjs -v
casperjs --version
キャプチャースクリプト作成
今回作成するスクリプトは配列からキャプチャーするURLと保存名を読み込むシンプルな構成で作成します。
ファイル名は「listcap.js」として下記のjsファイルを作成しました。
// ----- URLと保存名を指定 -----
var links = [
["http://sample.com","sample.jpg"],
["http://sample.com/hoge/","sample_hoge.jpg"],
["http://sample.com/hoge/fuga/","sample_hoge_fuga.jpg"],
["http://sample.com/hoge/fuga/foo.html","sample_hoge_fuga_foo.jpg"]
];
// ----- キャプチャー遅延 -----
var waitTime = 2000;
// ----- ベーシック認証 -----
var basicId = "";
var basicPass = "";
// ----- デバイスの切り替え（コメントアウトで切り替え） -----
// ----- iPhone -----
// var width = 320;
// var height = 568;
// var ua = "Mozilla/5.0 (iPhone; CPU iPhone OS 8_0_2 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Version/8.0 Mobile/12A405 Safari/600.1.4";
// ----- iPad -----
//var width = 768;
//var height = 1024;
//var ua = "Mozilla/5.0 (iPad; CPU OS 8_0_2 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Version/8.0 Mobile/12A405 Safari/600.1.4";
// ----- safari,crhome -----
var width = 1280;
var height = 900;
var ua = "Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.63 Safari/537.36";
// ----- スクレイピング実行 -----
var casper = require('casper').create();
casper.start();
casper.userAgent(ua);
casper.viewport(width, height);
casper.setHttpAuth(basicId, basicPass);
casper.each(
links,
function(self,link){
var url =link[0];
var file =link[1];
self.thenOpen(url, function () {
this.echo("captur page title:"+this.getTitle());
});
self.wait(waitTime,function(){
self.capture(file);
});
});
casper.run();
ファイルの実行
ターミナル（コマンドプロント）で作成したlistcap.jsのディレクトに移動し下記コマンドを実行。
casperjs listcap.js
キャプチャーされた画像が同ディレクトリに生成されます。
注意点
phantomjsではキャプチャーされる際、透過で生成するようになっているため、bodyにbackground-colorが指定されていないサイトは背景が黒くなってキャプチャーされてしまいます。
修正するにはphantomjs側での追記page.evaluate(function() {document.body.bgColor = 'white';});が必要なためcasper側での調整は難しそうです。
参照：公式サイト
上記の背景が黒でキャプチャーされる事象につきまして【続】phantomjs/casperjsによるキャプチャー自動化でjqueryを使用し修正する方法を掲載いたしました。
よければこちらもご覧ください。