ウェブサイトのスクリーンショットを自動化する【Raspberry Pi 版】

Raspberry Pi に入っている Python を使って、任意のウェブサイトのスクリーンショットを撮るスクリプトについてまとめておきます。加えて、このスクリーンショットを自動で実行するようにしてみます。

以下の環境で動作確認をしています。
環境：
・　Raspberry Pi (bullseye）、Python 3.x
・　selenium のインストール済み、Chromium ブラウザ用のドライバーの設定済み
・　Windows パソコン（Raspberry Pi の設定用。Raspberry Pi にリモートデスクトップでアクセスして設定）

※　事前に、selenium をインストール等しておく必要があります。設定方法は、「Raspberry Pi でブラウザを自動操作してみる【Python】」を参照してください。

背景　～ラズパイでスクリーンショットを自動化！

先日、ネット上のライブカメラの動画を自作の HTML に表示させる方法をまとめました。

そこで今回は、Raspberry Pi でスクリーンショットのスクリプトを実行し、上記のライブカメラの画像などを自動で取得できるようにしてみます。
つぎに、これらのコマンド操作をシェルスクリプト化して cron で設定することで、スクリーンショットの一連の操作を自動実行するようにしてみます。

上記の設定により、たとえば、Raspberry Pi を使った、ネットワークカメラでの定点観測が実現できます。
URL 部分を修正することで、任意のサイトの画像を取得するようにするなど、自由にカスタマイズできると思います。

手順

設定手順

①　Raspberry Pi 内にスクリーンショットを撮るためのフォルダ “screen_shot1” を作ります。
例： “/home/pi/screen_shot1/”
②　スクリーンショットを撮るサイト（URL、HTML）を決めます。
ここでは、Raspberry Pi の中に HTML ファイルを作成し、この画面のスクリーンショットを撮ってみることにします。①のフォルダの中に、live_camera01.html というファイルをテキストで作成し、末尾の HTML のスクリプトを貼りつけて保存してください。
例： “/home/pi/screen_shot1/live_camera01.html”
③　①のフォルダ内に screen_shot1.py という名前でテキストを作成し、末尾の Python のスクリプトをコピー＆ペーストして保存してください。
例： “/home/pi/screen_shot1/screen_shot1.py”
④　selenium を動かすための Chromium ブラウザのドライバのありかを確認し、必要があれば、スクリプトの path0 = “…” の部分を修正してください。ドライバの設定をしていない場合は、「Raspberry Pi でブラウザを自動操作してみる【Python】」を参照してみてください。
⑤　③と同じフォルダ内に、さらに、“image01” という名前でフォルダを作ってください。
スクリーンショットで取得した画像は、このフォルダに保存されるようにします。
例： “/home/pi/screen_shot1/image01”

スクリーンショットの実行方法

⑥　ターミナルを起動し、③の Python のスクリプトを実行してください。
例： “python /home/pi/screen_shot1/screen_shot1.py”

→　HTML の画像が “image01” フォルダに保存されたら成功です！

※　Python のスクリプトで、url1 の部分を修正すると、任意の HTML の画面を保存できると思います。
※　Python のスクリプトの後半でコメントアウトしている部分は、複数の HTML の画像を保存する場合の事例です。コメントアウトしている部分を使う場合、スクリーンショットを撮るリンク先の数に応じて、フォルダ “image02″、”image02″、…を追加してください。
※　うまく動いたら、リンク先を変えるなど、自由にカスタマイズしてみてください。

スクリーンショットを自動化する手順

⑦　③のフォルダ内に、screen_shot1.sh という名前でテキストファイルを作成し、末尾のシェルスクリプトをコピー＆ペーストして保存してください。
例： “/home/pi/screen_shot1/screen_shot1.sh”
※　フォルダを移動して Python を実行するコマンドを、そのまま記載しています。
⑧　ターミナルで以下を実行し、スクリーンショットが取得できることを確認してください。
例：　”sudo sh /home/pi/live_camera1/screen_shot1.sh”
⑨　シェルスクリプトと Python のスクリプトが cron で動くよう、ターミナルで実行権限を設定しておきます。
例： chmod 755 /home/pi/live_camera1/screen_shot1.sh
例： chmod 755 /home/pi/live_camera1/screen_shot1.py
⑨　ターミナルで “crontab -e” + [return] と入力します（cron を起動します）。
⑩　起動した cron の編集画面の末尾等に、以下の行を追加します。
00,30 * * * * /home/pi/live_camera1/screen_shot1.sh
※　上記の行は、30分おきに、シェルスクリプト screen_shot1.sh を実行するコマンドとしています。
必要により、実行する時刻等を修正してください。
※　ネットへのアクセスを自動で実行する際は、サーバーに負荷をかけすぎないよう注意してください。また、不要になったら／動作確認が済んだら、上記の記載は削除してください。
⑪　編集が終わったら、[ctrl] + [x] キーを押します。
編集内容を保存する場合は [y] キーを押します。編集内容を破棄する場合は [n] キーを押します。

→　自動実行の設定まで完了です。

⑫　指定時刻（30分ごと）に、スクリーンショットが実行され、上記の “image01” フォルダ等に画像が自動保存されたら、設定完了です。

うまく動いたら

・　うまく動いたら、HTML で書いたリンクを他の YouTube 動画リンクに差し替えるなど、HTML の内容をアレンジしてみてください。
・　また、Python のスクリプトで、HTML の URL の部分を他のサイトなど（https://www.yahoo.co.jp など）に差し替えてみてください。
なお、外部のサイトを参照する場合は、各サイトのライセンスに注意し、不要なアクセスは避けるなどサーバーへの負荷を配慮するようにしてください。

まとめ

Raspberry Pi を使って、任意の HTML のスクリーンショットを撮るスクリプトについてまとめました。
加えて、スクリーンショットを自動化する手順についてまとめました。

こうやって取得した画像については、たとえば、Raspberry Pi にインストールした Tensorflow のスクリプトと組み合わせることで、物体検出をさせることも可能となります。

サンプルスクリプト

HTML の例： live_camera01.html

<!DOCTYPE html> 
<html lang="ja"> 
<head> 
  <meta charset="UTF-8"> 
  <style> 
    .class1 { 
      background-color:#f0f0ff; 
      margin:0; 
      padding:0; 
      overflow-y:scroll; 
      scrollbar-width:none; 
    }
    .class1::-webkit-scrollbar { 
      display:none; 
    } 
  </style>
</head> 
<body class="class1" > 
<iframe width="640" height="360" src="https://www.youtube.com/embed/LR7i5_pkJBg?si=zoHeSy9XMPyAllAr&mute=1&autoplay=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<br>
</body>
</html>

スクリーンショットを撮る Python のスクリプト screen_shot1.py

import os 
import datetime as dt1 
import time as tm1 
from selenium import webdriver 
from selenium.webdriver import Chrome, ChromeOptions 
from selenium.webdriver.chrome.service import Service 

def filename1(): 
  now1  = dt1.datetime.now() 
  file1 = "{0:%y%m%d_%H%M%S}".format( now1 ) + ".png" 
  return file1 
  
def screen_shot1(driver1, url1, path1): 
  file1 = filename1() 
  file2 = path1 + file1   
  print( file2 ) 
  driver1.get( url1 ) 
  tm1.sleep( 40 ) 
  driver1.get_screenshot_as_file( file2 ) 

def get_driver1(): 
  path0 = "/usr/bin/chromedriver" 
  options1 = ChromeOptions() 
  options1.add_argument( '--headless' ) 
  driver1 = Chrome( service=Service(path0), options=options1 ) 
  driver1.execute_script( "window.scrollTo(0,0);" ) 
  driver1.set_window_size(640, 360) 
  return driver1 

driver1 = get_driver1() 

url1 = "file:///home/pi/screen_shot1/live_camera01.html" 
path1 = "/home/pi/screen_shot1/image01/" 
screen_shot1(driver1, url1, path1) 

# url1 = "file:///home/pi/screen_shot1/live_camera02.html" 
# path1 = "/home/pi/screen_shot1/image02/" 
# screen_shot1(driver1, url1, path1) 

driver1.quit()

シェルスクリプト screen_shot1.sh

cd /home/pi/screen_shot1
python screen_shot1.py

背景 ～ ラズパイでスクリーンショットを自動化！

手順