【Python】Webサイトのスクリーンショットを自動化
内容
効率化部隊の越柴です。
みなさんは、とある目的のためにWebサイトで情報収集をする際、どのように情報を残していますか？ブックマーク、PDF化、スクリーンショット等の手段で残すことは多いかなと思いますが、今回は「スクリーンショット」に絞って自動化の方法についてお伝えします。
【対象者】
・WebサイトのUI/UXに携わるフロントエンドエンジニア
・Webサイトのコンテンツ作成に携わるマーケター
・そのほか営業、個人で情報収集している人などなど
1. 実行準備
今回は分析屋Topページ全範囲を、スクリーンショットし保存します。
https://analytics-jp.com/
【環境】
Google Colaboratory
【モジュール】
・import selenium
・from selenium import webdriver
また、ファイル操作関連で以下のモジュールも使います。
・import datetime
・from google.colab import drive
・import os
・import sys
【ColaboratoryでSeleniumを使えるようにする準備】
ここが面倒ですが、コピペすればとりあえず動きます。
今年1月ごろにUbuntuのバージョンが上がった影響で、設定を弄らないとSeleniumが使えなくなりました。
%%shell
# Ubuntu no longer distributes chromium-browser outside of snap
#
# Proposed solution: https://askubuntu.com/questions/1204571/how-to-install-chromium-without-snap
# Add debian buster
cat > /etc/apt/sources.list.d/debian.list <<'EOF'
deb [arch=amd64 signed-by=/usr/share/keyrings/debian-buster.gpg] http://deb.debian.org/debian buster main
deb [arch=amd64 signed-by=/usr/share/keyrings/debian-buster-updates.gpg] http://deb.debian.org/debian buster-updates main
deb [arch=amd64 signed-by=/usr/share/keyrings/debian-security-buster.gpg] http://deb.debian.org/debian-security buster/updates main
EOF
# Add keys
apt-key adv --keyserver keyserver.ubuntu.com --recv-keys DCC9EFBF77E11517
apt-key adv --keyserver keyserver.ubuntu.com --recv-keys 648ACFD622F3D138
apt-key adv --keyserver keyserver.ubuntu.com --recv-keys 112695A0E562B32A
apt-key export 77E11517 | gpg --dearmour -o /usr/share/keyrings/debian-buster.gpg
apt-key export 22F3D138 | gpg --dearmour -o /usr/share/keyrings/debian-buster-updates.gpg
apt-key export E562B32A | gpg --dearmour -o /usr/share/keyrings/debian-security-buster.gpg
# Prefer debian repo for chromium* packages only
# Note the double-blank lines between entries
cat > /etc/apt/preferences.d/chromium.pref << 'EOF'
Package: *
Pin: release a=eoan
Pin-Priority: 500
Package: *
Pin: origin "deb.debian.org"
Pin-Priority: 300
Package: chromium*
Pin: origin "deb.debian.org"
Pin-Priority: 700
EOF
# Install chromium and chromium-driver
apt-get update
apt-get install chromium chromium-driver
# Install selenium
pip install selenium【chromedriverの起動オプションを設定→実行】
!cp /usr/lib/chromium-browser/chromedriver/usr/bin
drive.mount("/content/drive") #ドライブにアクセスできるようにする
sys.path.insert(0,"/usr/lib/chromium-browser/chromedriver") #chromedriverのインストール先を特定する
#chromedriverのオプション設定
chrome_options=webdriver.ChromeOptions()
chrome_options.add_argument("--headless") #ヘッドレスモード（ブラウザ画面を立ち上げない状態）
chrome_options.add_argument("--no-sandbox") #Chromeの保護機能に対する操作
chrome_options.add_argument("--disable-dev-shm-usage") #メモリ不足によるクラッシュ対策
wd=webdriver.Chrome("chromedriver",chrome_options=chrome_options)chromedriverの格納先を定義し、実行前のオプション設定を行います。
seleniumはブラウザを立ち上げて実行画面を見るRPAのような動きをさせることができますが、Colaboratory上ではエラーになってしまいます。ヘッドレスモードにすることで、エラーにならずに実行することができます。
【スクリーンショットの文字化け対策】
# 日本語フォントをダウンロードする。
!apt-get -y install fonts-ipafont-gothic
!rm /root/.cache/matplotlib/fontlist-v300.json #cacheの削除Colaboratoryには日本語フォントが搭載されておらず、上記コードがない場合文字化けした状態でスクリーンショットが保存されます。
日本語フォントをダウンロードし、フォント表示に関わるキャッシュファイルを削除することで、スクリーンショットの文字化け対策ができます。
※!apt-get-y：パッケージのインストール
※!rm：ファイルの削除
2. スクリーンショット実行コード
#ページにアクセス
wd.get(url)
# ページの大きさを調整
page_width = wd.execute_script('return document.body.scrollWidth')
page_height = wd.execute_script('return document.body.scrollHeight')
wd.set_window_size(page_width, page_height)
# スクリーンショットの保存
file_name=data_log_path+file_name+'.png'
wd.save_screenshot(file_name)流れとしては以下の通りです。
①URLにアクセス
②ページ全体の幅と高さを数値で取得
③ウィンドウサイズを①で取得したサイズに設定
④Google Driveの保存先とファイル名を定義
⑤③で定義したサイズでスクリーンショット、④で定義した保存先に格納
②～③に関しては、F12(検証ツール)で「Toggle Device Toolbar」を選択し、縦横の大きさを変更するイメージを持っていただければ分かりやすいと思います。
3. 実行時の注意
動的なサイトの場合、クリックやスクロールといった操作が必要となる場合があります。また、サイトの読込に時間がかかる場合もあります。保存したスクリーンショットを見て、例外処理を組み込むことも想定しながら作成してみてください。
4. PDFで残したいときは？
pdfkitというモジュールを使用することで保存することができます。
ただしColaboratory上だと、環境設定が面倒かつ動作が不安定だと感じました。
5. つぶやき
Colaboratoryでseleniumを動かすのが年々めんどくさくなっている気がします。
GASのようにデフォルトで定期実行できるようにしてほしいな...
6. 参考サイト
ここまでお読みいただき、ありがとうございました！
この記事が少しでも参考になりましたら「スキ」を押していただけると幸いです！
株式会社分析屋について
弊社が作成を行いました分析レポートを、鎌倉市観光協会様HPに掲載いただきました。
ホームページはこちら。
noteでの会社紹介記事はこちら。
【データ分析で日本を豊かに】
分析屋はシステム分野・ライフサイエンス分野・マーケティング分野の知見を生かし、多種多様な分野の企業様のデータ分析のご支援をさせていただいております。 「あなたの問題解決をする」をモットーに、お客様の抱える課題にあわせた解析・分析手法を用いて、問題解決へのお手伝いをいたします！
【マーケティング】
マーケティング戦略上の目的に向けて、各種のデータ統合及び加工ならびにPDCAサイクル運用全般を支援や高度なデータ分析技術により複雑な課題解決に向けての分析サービスを提供いたします。
【システム】
アプリケーション開発やデータベース構築、WEBサイト構築、運用保守業務などお客様の問題やご要望に沿ってご支援いたします。
【ライフサイエンス】
機械学習や各種アルゴリズムなどの解析アルゴリズム開発サービスを提供いたします。過去には医療系のバイタルデータを扱った解析が主でしたが、今後はそれらで培った経験・技術を工業など他の分野の企業様の問題解決にも役立てていく方針です。
【SES】
SESサービスも行っております。