ピックアップコラム
-
Pickup!
プラグインなし!オリジナルSNSシェアボタンの作り方ガイド
-
Pickup!
カラー別にみてみる!WEBサイトにおける配色パターン
-
Pickup!
サイドバーとは?サイドバーを設置するメリットと書き方
-
Pickup!
ワードプレスのプラグインで画像の圧縮・最適化をしてみた
先日、開発しているシステムでプログラムからブラウザで表示したwebサイトのスクリーンショットを撮る機会がありました。
今回はその際に使用した、プログラムからブラウザを操作してスクリーンショットを取る方法、またその際にブラウザの画面を表示しない方法をご紹介させていただきます。
今回は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
こちらのサイトからchromedriverをダウンロードします。
インストールしたchromeのバージョンと合わせる必要があるので、今回は version 78 のものを使用します。
今回はダウンロードしたchromedriverを下記へ設置します。
/usr/local/bin/chromedriver
composerを使用して下記のコマンドでインストールします。
※composerがインストールされていない場合はcomposerインストールの必要があります。
composer require facebook/webdriver
下記のソースで、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を使用すればブラウザの画面操作なども行うことが可能なようなので、他にどんな事ができるのか引き続き触って行きたいと思います。
受付時間:平日10:00~19:00(土・日・祝日を除く)