Edited at

PhantomJSを使ってスクリーンキャプチャなど色々試してみた

More than 1 year has passed since last update.

はじめまして。イエシルグループエンジニアのりゅうです。

こないだ偶然で担当プロジェクトのテスト(Capybara)がエラーになってハマって、PhantomJS周りまでを調査してみました。


PhantomJSとは

http://phantomjs.org/


PhantomJS is a headless WebKit scriptable with a JavaScript API. It has fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG.


WebkitベースのHeadlessブラウザで、DOMハンドリング、CSSセレクター、JSON、CanvasとSVGをサポートしております。


PhantomJSのインストール


コメンドライン(mac)

mac上で、brewを使ってphantomjsをイントールします。

brew install phantomjs

出力結果

NPC0201:~ livesense$ sudo brew install phantomjs

==> Downloading https://homebrew.bintray.com/bottles/phantomjs-2.1.1.el_capitan.bottle.1.tar.gz
Already downloaded: /Users/livesense/Library/Caches/Homebrew/phantomjs-2.1.1.el_capitan.bottle.1.tar.gz
==> Pouring phantomjs-2.1.1.el_capitan.bottle.1.tar.gz
🍺 /usr/local/Cellar/phantomjs/2.1.1: 49 files, 51.0M


composer

今回はphantomjs phpのライブラリを使いますから、composerを使って、パッケージを管理します。

composer.jsonの中身


composer.json

{

"scripts": {
"post-install-cmd": [
"PhantomInstaller\\Installer::installPhantomJS"
],
"post-update-cmd": [
"PhantomInstaller\\Installer::installPhantomJS"
]
},
"require": {
"jonnyw/php-phantomjs": "4.*"
}
}

インストール結果

NPC0201:sample livesense$ composer install

Loading composer repositories with package information
Installing dependencies (including require-dev)
- Installing twig/twig (v1.28.2)
Downloading: 100%

- Installing symfony/yaml (v3.2.0)
Downloading: 100%

- Installing symfony/filesystem (v3.2.0)
Downloading: 100%

- Installing symfony/dependency-injection (v3.2.0)
Downloading: 100%

- Installing symfony/config (v3.2.0)
Downloading: 100%

- Installing jakoch/phantomjs-installer (2.1.1)
Downloading: 100%

- Installing jonnyw/php-phantomjs (v4.5.1)
Downloading: 100%

symfony/yaml suggests installing symfony/console (For validating YAML files using the lint command)
symfony/dependency-injection suggests installing symfony/expression-language (For using expressions in service container configuration)
symfony/dependency-injection suggests installing symfony/proxy-manager-bridge (Generate service proxies to lazy load them)
Writing lock file
Generating autoload files
- Installing phantomjs (2.1.1)
Downloading: 100%


スクリーンキャプチャのコード(API的な)

PhantomJSを使って画面のキャプチャは簡単に撮れるから、そのAPIを作ってみました。


index.php

<?php

require __DIR__ . '/../vendor/autoload.php';

use JonnyW\PhantomJs\Client;

$web_url = $_GET['web_url'];
$output_file = '/data/' . sha1($_SERVER['REQUEST_URI']) . '.jpg';

if (file_exists($output_file)) {
header('Content-type: image/jpeg');
readfile($output_file);
} else {
// ファイルを分割してserviceクラスなどにまとめたほうがよい
$viewport_width = 1600;
$viewport_height = 1000;

$client = Client::getInstance();
$client->getEngine()->setPath('/usr/bin/phantomjs'); // phantomjs path
$request = $client->getMessageFactory()->createCaptureRequest(
$web_url, // url
'GET', // method
3000); // timeout(second)

$client->getEngine()->addOption('--proxy=host:port');
$request->setQuality(75); // default 75
$request->setCaptureDimensions($width, $height); // キャプチャ範囲
$request->setFormat('jpeg'); // pdf, png, jpeg, bmp, ppm, gif
$request->setOutputFile($output_file);
$request->setViewportSize($viewport_width, $viewport_height);
$response = $client->getMessageFactory()->createResponse();
$client->send($request, $response);
header('Content-type: image/jpeg');
readfile($output_file);
}


次はIESHILトップページのキャプチャです。

http://localhost/?web_url=https%3A//www.ieshil.com/

(何故か動画がうまく表示されてない)

ダウンロード (1).jpeg


参考資料