HITTOBITO

仕事

WEB制作を効率化する (1) – 大量のスクリーンショット 第2回

2018年02月19日 

わかば

前回、chrome の headless モードを利用して連続キャプチャを取る記事を書きましたが、キャプチャサイズを手動で指定する必要があるという欠点がありました。

サイズの異なるページが大量にある場合、不便です。

延々と数時間キャプチャーをしていると、写経のような気持になってきます。

ストレスMAXで、突然、大声を出してしまいそうです。

というわけで、今回はページのサイズを自動で取得しつつ、連続キャプチャを行います。

調べていると、GoogleDriver を利用すると、Chrome の情報を取得できるようです。ということなので、GoogleDriver を使ってみます。Python を利用するのが簡単そうです。

この記事の内容を書いた環境

Windows 10 Pro 64bit
Python 3.6.4
Chrome Driver 2.35

簡単な実験をしてみます。

python 経由で、chrome を起動して、指定したURLを開いています。このさい、ウィンドウサイズを指定してみます。

capture.py を作成します
capture.py の置いたフォルダに、chromedriver.exe を置きます。

chromedriver.exe は以下URLからダウンロードしてください。
https://sites.google.com/a/chromium.org/chromedriver/downloads

capture.py
chromedriver.exe

ファイルの構成は、こんな感じになってます。

capture.py に、コードを書いてみます。

# coding:utf-8
from selenium import webdriver

driver = webdriver.Chrome()
driver.set_window_size(1024,1000)
driver.get('https://www.f-hit.com')

実行してみます。

python capture.py

あれ?初めて実行するとエラーになります。

Traceback (most recent call last):
File "capture.py", line 1, in
from selenium import webdriver
ModuleNotFoundError: No module named 'selenium'

どうやら、モジュールがないということなので、モジュールをインストールします。

pip install selenium

再度実行すると、chrome が起動して画像が表示されます。

0010

ウィンドウサイズを取得するには?

ChromeDriver を利用すると、開いている画面に対して JavaScript を実行して、実行結果を変数として取り込めるようです。というわけで、縦横のサイズを取得してから、表示してみます。

iw = driver.execute_script("return document.body.clientWidth;")
ih = driver.execute_script("return document.body.clientHeight;")
# coding:utf-8
from selenium import webdriver

driver = webdriver.Chrome()
driver.set_window_size(1024,1000)
driver.get('https://www.future-s.com')
iw = driver.execute_script("return document.body.clientWidth;")
ih = driver.execute_script("return document.body.clientHeight;")
print(iw)
print(ih)

実行してみますと、以下のように横、縦サイズが出力されました。

991
2493

作ってみます

というわけで、このサイズを使って、chrome headless モードでキャプチャしてみましょう。関数化して、5秒ごとに実行されるようしました。

# coding:utf-8
import os
import subprocess

from selenium import webdriver
from time import sleep

driver = webdriver.Chrome()
driver.set_window_size(1024,1000)

def capture(filename, url):
    driver.get(url)
    iw = driver.execute_script("return document.body.clientWidth;")
    ih = driver.execute_script("return document.body.clientHeight;")
    cmd = '"c:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe" --headless --disable-gpu --hide-scrollbars --screenshot=' + os.getcwd() + '\\' + filename + '.png --window-size=' + str(iw) + ',' + str(ih) + ' ' + url
subprocess.Popen(cmd, shell=True)
    sleep(5)

capture('cap0010', 'http://china.future-s.com/')
capture('cap0020', 'https://www.future-s.com')

driver.quit()
quit()

早速実行してみますと、いい感じにキャプチャできました。

0020

  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加

この記事を書いた人

  • よっしー

    よっしー

    ディレクター (東京支社)

    ディレクター

    (東京支社)

    田畑では愛車トラクターを乗りこなし、米も作る農家が本業というIT系ファーマー、いや、ファーマー系エンジニア? こだわりのあるモノ作りが得意。野菜とWEBの旬な情報はお任せ! 新しい技術やサービスは、まず自ら使ってみる事をモットーにしているプロジェクトマネージャー。WEB制作だけではなく、ネットワーク/サーバー、システム開発まで幅広く網羅。

    田畑では愛車トラクターを乗りこなし、米も作る農家が本業というIT系ファーマー、いや、ファーマー系エンジニア? こだわりのあるモノ作りが得意。野菜とWEBの旬な情報はお任せ! 新しい技術やサービスは、まず自ら使ってみる事をモットーにしているプロジェクトマネージャー。WEB制作だけではなく、ネットワーク/サーバー、システム開発まで幅広く網羅。

この人が最近書いたものを見る

一覧

これを読んだ人にオススメ

ひっとびととは?

WEB制作・プロデュース会社『フューチャーヒット』の人々が趣味などをゆるく紹介するサイトです。
フューチャーヒットの「人々」が自由に、でも真剣に取り組んでいく様子をこの「ひっとびと」を通してお届けしていければと思います。

詳細はこちらから