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を使用し修正する方法を掲載いたしました。
よければこちらもご覧ください。