LoginSignup
12
7

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-12-02

はじめまして。イエシルグループエンジニアのりゅうです。
こないだ偶然で担当プロジェクトのテスト(Capybara)がエラーになってハマって、PhantomJS周りまでを調査してみました。

PhantomJSとは

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

参考資料

12
7
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
12
7