20
17

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

phantomjs/casperjsによるキャプチャー自動化

Last updated at Posted at 2016-01-19

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

20
17
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
20
17

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?