【自動化】Selenium×PythonでWebサイトのフル画面キャプチャを取得する方法【Windows】

Webサイトの制作に携わっていると、サイトの画面キャプチャを取ることも多いのではないでしょうか。

私がいたプロジェクトではリリース前のバックアップとして画面キャプチャを保存するというルールがあり、頻繁にサイト更新を行なっていたことから（お知らせ投稿等で）、必然的にキャプチャを取る作業も多くなっていました。

数画面とかであればそれほど手間でもないですが、何十画面ものキャプチャを取るとなると、なんとなくこの時間もったいないな、、と感じるようになり、何とか自動化できないかなと考え、今回のプログラムを開発することにしました。

ただ私自身今回、Pythonを使ったのが初めてなので初心者コードかもしれませんが、温かい目で見守っていただけると嬉しいです・・

もし同じようなお悩みの方がいれば、この記事が参考になれば幸いです。

まずは機能について

今回ご紹介するプログラムで出来ることを先に記載しておきたいと思います。

check_circle 機能

PC・SP両サイズのフル画面キャプチャが取得できる
取得できた画面キャプチャは任意のフォルダに自動保存される
キャプチャ取得したいWebサイトは何個でも指定できる

check_circle 注意点

Windows環境でのみ動作確認しています。
プログラムコードはMac環境でも流用できるかもしれませんが、手順についてはWindowsに沿った説明になっていますので、予めご了承ください。

手順

では早速手順を見ていきましょう！

Pythonインストール

ご自身のPCにPythonが入っていない場合は、公式サイトからインストールをしてください。
⇒Python公式ダウンロード

※私がインストールしているバージョンは3.9ですが、特にバージョン指定はないです。（多分・・）

環境変数パス設定

Pythonコマンドを実行できるようにするため、Windowsの環境変数設定からパスを通す作業を行います。

環境変数設定ウィンドウを開く

コントロールパネルからでも設定画面にいけますが、
検索窓から環境変数を編集と検索すると、一発で設定画面に辿り着けます。

ユーザー環境変数にPathを追加する

まずは、ユーザー環境変数にあるPathを選択し、編集ボタンをクリックします。

新規ボタンを押下し、下記のパス2つを追加してください。

C:\Users\ユーザー名\AppData\Local\Programs\Python\PythonXX（バージョン数）\Scripts\

C:\Users\ユーザー名\AppData\Local\Programs\Python\PythonXX（バージョン数）\

Pythonコマンドが実行できるか確認

py -V

# Python 〇〇　とバージョンが返ってきたらOK

pip -V

# pip 〇〇 from XXXX とバージョンが返ってきたらOK

コマンドがエラーになる場合は、パスが正しく通っていない可能性があるので、
もう一度パスに間違いがないか確認してみてください。

それでも上手く行かない場合は、環境変数編集ウィンドウを管理者権限で開き、システム環境変数のPATHに追加してみてください。

Seleniumをインストール

コマンドプロンプトから以下のコマンドを実行して、Seleniumをインストールしてください。

pip install selenium

Seleniumとはブラウザ操作するための自動化ツールで、
Seleniumを使うことで、ブラウザ上で行う以下のようなことを自動的に行なってくれるようになります。

check_circle

画面キャプチャ取得
クリック
指定のURLに飛ぶ
検索
スクレイピング

とても便利ですね！Seleniumを使いこなせるようになると、ありとあらゆる作業が自動化できると思います。

webdriver_managerをインストール

続いてコマンドプロンプトから以下のコマンドを実行して、webdriver_managerをインストールしてください。

pip install webdriver_manager

webdriver_managerをインストールする理由は、お使いのWebブラウザに適したバージョンのドライバを自動的にダウンロードさせるためです。

Seleniumを使うとなると、Webブラウザとドライバが必要になるのですが、ブラウザのバージョンが上がった時に自動で適切なドライバを管理してくれるので非常に便利です。

プログラムの作成

さていよいよ画面キャプチャを自動で取得してくれるプログラムコードを書いていきたいと思います。

Pythonファイルの作成

まずは任意のディレクトリにPyhonファイルを作成してください。

プログラムコードをコピペ

先ほど作成したPythonファイルに下記コードをコピペしてください。

from selenium import webdriver
from selenium.webdriver import ActionChains
from selenium.webdriver.common.by import By
from webdriver_manager.chrome import ChromeDriverManager
import time

options = webdriver.ChromeOptions()
options.add_argument('--headless')
options.add_argument('--hide-scrollbars')
driver = webdriver.Chrome(ChromeDriverManager().install(), options=options)
driver.implicitly_wait(10)
capture_save_dir = "キャプチャを保存したいパス"

def full_capture(filename, url):
    for i in range(2):
        if i == 0 :
            # #################
            # PCキャプチャ取得
            # #################
            driver.set_window_size(1920,600)
        if i == 1 :
            # #################
            # SPキャプチャ取得
            # #################
            driver.set_window_size(375,300)
            filename += '_sp'
            
        iw = ''
        ih = ''
        height = ''
        driver.get(url)
        time.sleep(3)

        #ページの高さを取得
        height = driver.execute_script("return document.body.scrollHeight")
        
        #ループ処理で少しづつ移動
        for x in range(1,height):
            driver.execute_script("window.scrollTo(0, "+str(x)+");")

        iw = driver.execute_script("return document.body.clientWidth")
        ih = driver.execute_script("return document.body.clientHeight")
        ih += 100  # 画面下部が途中で切れないように余分に100px分プラス
        time.sleep(3)
        driver.set_window_size(iw, ih)
        
        driver.save_screenshot(capture_save_dir + '//' + filename + '.png')
        time.sleep(5)

#フル画面キャプチャ取得対象サイト
#例）full_capture('キャプチャ画像ファイル名', 'ページURL')
full_capture('siteA', 'https://www.siteA.jp/')

print("キャプチャ取得が完了しました")
driver.close()
driver.quit()

使い方

では事前準備が整ったので、実際にキャプチャ取得までの使い方について解説します。

キャプチャ保存先を指定する

capture_save_dir = "キャプチャを保存したいパス"

ここに記述したパスにキャプチャ画像が保存されます。

ただしバックスラッシュのパスだとエラーが出てしまうので、スラッシュに直していただくか、下記のように先頭にrをつけてください。

capture_save_dir = r"C:\キャプチャを保存したいパス"

画面サイズの設定

    for i in range(2):
        if i == 0 :
            # #################
            # PCキャプチャ取得
            # #################
            driver.set_window_size(1920,600)
        if i == 1 :
            # #################
            # SPキャプチャ取得
            # #################
            driver.set_window_size(375,300)

set_window_sizeにある数値は、ご自身の希望に合わせて数値を変えて大丈夫です。

今回の例では、PCでは幅1920px、SPでは幅375pxで画面サイズを取るように記述しています。
※第2引数の高さは、フル画面キャプチャで上から下まで取るのであまり気にしなくて良いです。

SP時のファイル名

filename += '_sp'

ここではSPの画面キャプチャ保存時に、最後に_spとつくようにしています。
これはPCキャプチャとのファイル名被りを避けるために設定していますが、自由に変更していただいて問題ありません。

WebサイトURLの記述

#フル画面キャプチャ取得対象サイト
#例）full_capture('キャプチャ画像ファイル名', 'ページURL')
full_capture('siteA', 'https://www.siteA.jp/')
full_capture('siteB', 'https://www.siteB.jp/')
full_capture('siteC', 'https://www.siteC.jp/')

このような感じで、キャプチャを取得したいWebサイトのURL数分、行を複製していただいて、
ファイル名およびURLを記述すれば準備完了です。