さくっと複数ページの画面全体スクリーンショットを自動取得したい

はじめまして。とま（@bath_ito）と申します。

みなさんはwebサイト制作における実装指示書作成や表示テスト、個人の趣味などで、webサイトのスクリーンショットを大量に撮る時がありますよね（あまり無いですね）
そんなときに誰かの仕事が1分でも早く終わる助けになりますように。

URLリストの全ページの自動SS取得

CLIを使用します。

Pythonを入れていなければinstall

Python公式ページ

Download Python

※install時、「Add Python to PATH」のチェックを入れ忘れないこと

python --version

でインストール出来ていること確認。

Pythonがインストールされている場合、バージョンが表示される

こんなときは…（Windowsユーザー向け）

>python --version
Python

Windowsで、バージョンを確認してもPythonと表示される場合は
Windowsボタン　→　設定　→　「アプリ実行エイリアス」を検索　→　pytnon.exe、python3.exeをオフにする。

Windows設定のアプリ実行エイリアス一覧画面

PC再起動後、python --versionを実行。
バージョン表示を確認出来たら次に進みます。

Seleniumのインストール

pip install selenium

Chromeドライバーも取得する

ChromeDriver - WebDriver for Chrome - Downloads

※閲覧ブラウザとして使用中のChromeと同バージョンのものを取得。
解凍して置いておきます。

Pythonコード

from selenium import webdriver
from selenium.webdriver.chrome.options import Options
import time
import os

# スクリーンショットを保存するディレクトリ名
screenshot_dir = "SS"

# ディレクトリが存在しない場合は作成
if not os.path.exists(screenshot_dir):
    os.makedirs(screenshot_dir)

# オプション設定
options = Options()
options.add_argument("--headless")  # ヘッドレスモード
# options.add_argument("--window-size=1366,768")  # 初期ウィンドウサイズ（必要に応じて）

# WebDriverのセットアップ
driver = webdriver.Chrome(options=options)

# URLリスト
urls = ["https://exsamle/1", "https://exsamle/2"]

for url in urls:
    driver.get(url)
    time.sleep(2)  # ページが完全にロードされるまで待機

    # ページの全高さを取得
    total_height = driver.execute_script("return document.body.scrollHeight")

    # ウィンドウサイズをページの全高さに調整
    driver.set_window_size(1366, total_height)
    time.sleep(2)  # サイズ調整後に少し待機

    # スクリーンショットのファイル名を生成
    screenshot_file = os.path.join(screenshot_dir, f"{url.split('//')[-1].replace('/', '_').replace(':', '_')}.png")

    # スクリーンショットの取得
    driver.save_screenshot(screenshot_file)

# 終了
driver.quit()

screenshot.pyのように適当な名前で保存。
取得したいスクリーンショットの画面の横幅は自由に設定してください（上記コードの1366部分を変更すること）

コード実行

screenshot.pyを配置したディレクトリで下記を実行。

python screenshot.py

screenshot.pyのあるディレクトリに「SS」フォルダが出来て、スクリーンショットが保管されていることを確認！

URLリスト作成

コード内のURLのリストもサクッと作りたいですよね。

URLの箇条書きが用意出来たら、私はさくらエディタでの整形がサクッと出来て好きです。

Sakura Editor

行頭に文字を挿入

①Ctrl + R（置換）
②正規表現にチェック
③置換前：^
④置換後：”
⑤Alt + A（全て置換）

行頭に文字入力

行末に文字を挿入

①Ctrl + R（置換）
②正規表現にチェック
③置換前：$
④置換後：”,
⑤Alt + A（全て置換）

行末に文字入力

整形できたので、screenshot.pyに貼り付ける

URLリストに正しい形式で貼り付け

また実行してスクリーンショットが取れていることを確認してください。

python screenshot.py

終わり

CLIに拒否反応が無い方であればサクッと取得できると思います！
非エンジニアの方も、CLIは怖くないので使ってみてくださいね。

よきスクリーンショットライフ（？）を送ってください！