PHPのプログラムでブラウザを操作してスクリーンショットを撮る

先日、開発しているシステムでプログラムからブラウザで表示したwebサイトのスクリーンショットを撮る機会がありました。
今回はその際に使用した、プログラムからブラウザを操作してスクリーンショットを取る方法、またその際にブラウザの画面を表示しない方法をご紹介させていただきます。

Chromeのインストール

今回はChromeを使用するので、まずはChromeをインストールします。
OSはUbuntu 16.04.6 LTSです。

インストールコマンド

下記のコマンドでChromeをインストールします。

curl https://dl.google.com/linux/linux_signing_key.pub | apt-key add -
echo 'deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main' | tee /etc/apt/sources.list.d/google-chrome.list
apt update
apt install google-chrome-stable

下記のコマンドでバージョンが確認できたらインストール完了です。

google-chrome-stable --version
Google Chrome 78.0.3904.108 

また、日本語のサイトを表示するために下記のコマンドで日本語フォントをインストールします。

apt-get install fonts-ipafont fonts-ipaexfont

Chrome操作に必要なツールのインストール

・chromedriver

こちらのサイトからchromedriverをダウンロードします。
インストールしたchromeのバージョンと合わせる必要があるので、今回は version 78 のものを使用します。
今回はダウンロードしたchromedriverを下記へ設置します。

/usr/local/bin/chromedriver

・facebook/webdriver のインストール

composerを使用して下記のコマンドでインストールします。
※composerがインストールされていない場合はcomposerインストールの必要があります。

composer require facebook/webdriver

ChromeをPHPから実行する

下記のソースで、PHPからwebサイトのスクリーンショットを保存します。
※Laravel Framework 6.6.0 を使用しています。

use Facebook\WebDriver\Chrome\ChromeOptions;
use Facebook\WebDriver\Chrome\ChromeDriver;
use Facebook\WebDriver\Remote\DesiredCapabilities;
$driverPath = realpath("/usr/local/bin/chromedriver");
putenv("webdriver.chrome.driver=" . $driverPath);

// Chromeを起動
$options = new ChromeOptions();
$options->addArguments(['--headless']);
$options->addArguments(['--no-sandbox']);
$options->addArguments(['--disable-gpu']);
$options->addArguments(["--lang=ja"]);
$caps = DesiredCapabilities::chrome();
$caps->setCapability(ChromeOptions::CAPABILITY, $options);
$driver = ChromeDriver::start($caps);

//画面を取得
$driver->get($url);

// スクリーンショットを保存
sleep(3);
$driver->takeScreenshot($file_path);

// ブラウザを閉じる
$driver->quit();

ソースの各処理の解説

use Facebook\WebDriver\Chrome\ChromeOptions;
use Facebook\WebDriver\Chrome\ChromeDriver;
use Facebook\WebDriver\Remote\DesiredCapabilities;
$driverPath = realpath("/usr/local/bin/chromedriver");
putenv("webdriver.chrome.driver=" . $driverPath);

Facebook\WebDriver及びchromedriverを使用するための記述です。
“/usr/local/bin/chromedriver”はダウンロードしたchromedriverを設置したパスを指定してください。

// Chromeを起動
$options = new ChromeOptions();
$options->addArguments(['--headless']);
$options->addArguments(['--disable-gpu']);
$options->addArguments(['--no-sandbox']);
$options->addArguments(["--lang=ja"]);
$caps = DesiredCapabilities::chrome();
$caps->setCapability(ChromeOptions::CAPABILITY, $options);
$driver = ChromeDriver::start($caps);

Chromeを起動します。
起動時のオプション設定ですが、以下のようになります。
–headless
　ヘッドレスモードで起動します。
　ヘッドレスモードで起動するとブラウザの画面が表示されないためCUIで実行可能になります。
　また、画面が表示されないためGUIでも処理が高速になります。
–disable-gpu
　ヘッドレスモードで起動するために必要になるオプションです。
–no-sandbox
　rootで実行する場合はこちらを指定しないとエラーになります。
–lang=ja
　使用する言語を日本語に指定します。

//画面を取得
$driver->get($url);

Urlを指定してwebサイトを開いています。

// スクリーンショットを保存
sleep(3);
$driver->takeScreenshot($file_path);

開いたwebサイトのスクリーンショットを指定したファイルパスへ保存します。
JS等で画面描画に時間差がある場合があるのでsleepを行っています。

// ブラウザを閉じる
$driver->quit();

chromeを閉じます。
※$driver->close();はchromeのタブのみを閉じ、プロセスは残るためquit()を使用してchromeを終了させます。

以上です。

まとめ

今回は画面のスクリーンショットを行いましたが、ChromeDriverを使用すればブラウザの画面操作なども行うことが可能なようなので、他にどんな事ができるのか引き続き触って行きたいと思います。