PR TIMESデザイナー&エンジニアブログ BREAK TIMES

PR TIMES Developer Blog(デザイナー&エンジニアによる開発者ブログ)

PR TIMES Developer Blog
デザイナー&エンジニアによる開発者ブログ

phantomjsでサイトのキャプチャーをとる

エンジニアの呉です。
今回紹介したいのはコマンドラインから使えるWebブラウザーであるphantomjsです。そもそも、なんでphantomjsを使うのか?それはWebサイトのキャプチャーをとるために、最初wkhtmltoimageを使ったけど、スマホ版はうまく撮れなかったため、いろいろを調べた結果はphantomjsを決めました。

phantomjsについて

phantomjsはコマンドラインから使えるブラウザーです。レンダリングエンジンには「WebKit」が採用されています。phantomjsを利用すると、コマンドラインから、Webブラウザーを操作して、ブラウザー内に表示されるデータを取得したり、スクリーンショットを撮ったりすることができます。Webサイトからデータを取り出すスクレイピングにも使えます。

phantomsのインストール方法(centos 6.7)

ハードウェアのスペック
  • RAM: at least 4 GB
  • Disk space: at least 3 GB
  • CPU: 1.8 GHz, 4 cores or more
ビルド方法
  • sudo yum -y install gcc gcc-c++ make flex bison gperf ruby openssl-devel freetype-devel fontconfig-devel libicu-devel sqlite-devel libpng-devel libjpeg-devel python-argparse
  • cd /usr/local/
  • git clone git://github.com/ariya/phantomjs.git
  • cd phantoms
  • git checkout 2.1.1
  • git submodule init
  • git submodule update
  • python build.py
  • ln -sf /usr/local/phantomjs/bin/phantomjs /usr/local/bin/phantomjs
phantomsの使ってスクリーンショットを撮ってみましょう

まず一般的な撮り方は非常にシンプルです

var page = require('webpage').create();
var system = require('system');

if (system.args[3] !== undefined) {
    page.settings.userAgent = "Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1";
}

var url = system.args[1];
var file = system.args[2];

page.open(url, function (status) {
    setTimeout(function(){
        page.render(file);
        phantom.exit();
    },2000);
});

simple.jsと名前をつけて保存し、PC版のキャプチャーを撮ってみる。

phantomjs simple.js http://www.yahoo.co.jp yahoo.png

f:id:breaktimes:20160410220511p:plain

続き、SP版のキャプチャーも撮ってみる。

phantomjs simple.js http://www.yahoo.co.jp yahoo.png sp

f:id:breaktimes:20160410220529p:plain

画像のサイズは以下のコードで調整できます

var width = 1000;
var height = 800;
page.viewportSize = {
    width:width,
    height:height
};
page.clipRect = {
    left:0,
    right:0,
    width:width,
    height:height
};

サイズを調整した後PC版

f:id:breaktimes:20160410221317p:plain

サイズを調整した後SP版

f:id:breaktimes:20160410221332p:plain

今回このブログで一番ご紹介したいので広告遷移ページがあるサイトのキャプチャーの撮り方。
まず上のソースコードを使って、以下のサイトを撮ってみます。

phantomjs simple.js http://www.nikkeibp.co.jp/atcl/news/16/03/29/09164/ test.png

結果としては広告があるページのキャプチャーしか取れていない、期待ハズレとなります。

ソースを書き直してsimple_2.jsとして保存します。

var page = require('webpage').create();
var system = require('system');

if (system.args[3] !== undefined) {
    page.settings.userAgent = "Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1";
}
var url = system.args[1];
var file = system.args[2];

var width = 1280;
var height = 1000;
page.viewportSize = {
    width:width,
    height:height
};
page.clipRect = {
    left:0,
    right:0,
    width:width,
    height:height
};

page.open(url, function (status) {
    page.onLoadFinished = function () {
        page.includeJs('http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js', function () {
            var a = page.evaluate(function () {
                $('a').each(function () {
                    var tmp = $(this).text();
                    if (tmp == "このページをスキップする") {
                        $(this).click();
                    }
                });
            });
            window.setTimeout(function () {
                page.render(file);
                phantom.exit();
            }, 3000);
        });
    }
});

もう一回実行してみます。

phantomjs simple_2.js http://www.nikkeibp.co.jp/atcl/news/16/03/29/09164/ test1.png

今回はうまく撮れました。

f:id:breaktimes:20160410230804p:plain

phantomsは他にもいろいろなことができます。詳しくはサイトを参考してください。
API | PhantomJS