Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
17
Help us understand the problem. What is going on with this article?
@hika09

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

More than 5 years have passed since last update.

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

17
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
hika09

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
17
Help us understand the problem. What is going on with this article?