Webページのスクリーンショットを取得する - サイズを指定

前回、Microsoft Edgeのヘッドレスモードおよびスクリーンショットの取得機能を使用することで、Webページのスクリーンショットをコマンドラインから取得できることを示した。今回はこの機能にスクリーンショットのサイズの指定を追加する。スクリーンショットの取得ではサイズが指定できるかどうかはとても大切だ。

前回の成果物

最初に、前回の成果物を確認しておこう。前回はMicrosoft Edgeのヘッドレスモードでスクリーンショットを取得するコマンドを次のようなPowerShellのスクリプト（getss.ps1）にまとめるところまで説明した。次のようなスクリプトができた。

#!/usr/bin/env pwsh

#========================================================================
# スクリーンショットを取得する
#========================================================================

#========================================================================
# 引数を処理
#   -URL url        WebリソースのURL
#   -Agent agent    リクエストで使うエージェントを指定
#========================================================================
Param(
    [Parameter(Mandatory=$true)][String]$URL = ""
)

#========================================================================
# デフォルトのスクリーンショットファイル
#========================================================================
$outfile="${env:HOME}/ss.png"

#========================================================================
# スクリーンショットの取得に利用するアプリケーション
#========================================================================
$msedge='C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe'

#========================================================================
# どの方法でスクリーンショットを取得するかを判断
#========================================================================
$method='msedge'

#========================================================================
# Webページのスクリーンショットを取得
#========================================================================
switch ($method)
{
    #================================================================
    # Microsoft Edgeを使って取得
    #================================================================
    'msedge'
    {
        $o1='--headless'
        $o2='--screenshot="' + ${outfile} + '"'

        Start-Process   -FilePath $msedge           `
                -ArgumentList $o1,$o2,$URL      `
                -Wait
        break
    }
}

今回はここにサイズ指定の機能を追加する。

サイズの指定は「--window-size=」で行う

前回は、次のようにMicrosoft Edgeに「--headless」と「-screenshot」の指定を行うことで、指定したWebページのスクリーンショットを取得する方法を示した。例えば次のようにコマンドを実行すると、スクリーンショットを取得できる。

& 'C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe' --headless --screenshot=${env:HOME}\ss.png https://docs.microsoft.com/ja-jp/powershell/

このコマンドでは、ホームフォルダに「ss.png」という名前のPNG画像のファイルが作成される。

• 

  作成されたss.pngというPNG画像ファイル

Microsoft Edgeのヘッドレスモードでは、「--window-size」というオプションを指定することで取得する画像サイズを指定できる。指定方法は「--window-size=幅,高さ」だ。「-window-size=800,300」のように指定すれば、800x300のサイズのスクリーンショットが取得できる。

次のようにコマンドを実行する。

& 'C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe' --headless --screenshot=${env:HOME}\ss.png https://docs.microsoft.com/ja-jp/powershell/ --window-size=800,300

次のスクリーンショットが取得できる。

• 

  作成されたPNG画像ファイル (800x300)

取得されたスクリーンショット画像が、先ほどと異なり800x300のサイズになっていることがわかる。

これは、取得したいスクリーンショットがディスプレイのサイズを超えているときなどに便利だ。例えば指定を「--window-size=800,2000」にすれば、800x2000のサイズでスクリーンショットを取得できる。

& 'C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe' --headless --screenshot=${env:HOME}\ss.png https://docs.microsoft.com/ja-jp/powershell/ --window-size=800,2000

取得されたスクリーンショットは次のように縦長になる。

• 

  作成されたPNG画像ファイル (800x2000)

Firefoxを使うと、こういったディスプレイに収まらないサイズのWebページのスクリーンショットを取ることができる。Microsoft Edgeでも開発者モードや拡張機能を使えば同じようなことが可能だ。しかし、処理を自動化したい場合、いちいちアプリケーションを起動して手動で操作というのはしたくない。オプション指定を使ったやり方ならば、コマンドラインからスクリーンショットを取れるので自動化向きなのだ。

getss.ps1にサイズ指定の機能を取り込む

先ほどの機能をgetss.ps1に取り込もう。幅の指定を「-Width 幅」、高さの指定を「-Height 高さ」というパラメータで行うことにし、デフォルトのサイズを1200x800とする。指定がなければ1200x800でスクリーンショットを取得し、「-Width」や「-Height」の指定があればそれを上書きする。

書き換えたgetss.ps1を次に示す。

#!/usr/bin/env pwsh

#========================================================================
# スクリーンショットを取得する
#========================================================================

#========================================================================
# 引数を処理
#   -URL url        WebリソースのURL
#   -Width width    スクリーンショットの幅
#   -Height height  スクリーンショットの高さ
#   -Agent agent    リクエストで使うエージェントを指定
#========================================================================
Param(
    [Parameter(Mandatory=$true)][String]$URL = "",
    [Int]$Width = 1200,
    [Int]$Height = 800
)

#========================================================================
# デフォルトのスクリーンショットファイル
#========================================================================
$outfile="${env:HOME}/ss.png"

#========================================================================
# スクリーンショットの取得に利用するアプリケーション
#========================================================================
$msedge='C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe'

#========================================================================
# どの方法でスクリーンショットを取得するかを判断
#========================================================================
$method='msedge'

#========================================================================
# Webページのスクリーンショットを取得
#========================================================================
switch ($method)
{
    #================================================================
    # Microsoft Edgeを使って取得
    #================================================================
    'msedge'
    {
        $o1='--headless'
        $o2='--screenshot="' + ${outfile} + '"'
        $o3="--window-size=${Width},${Height}"

        Start-Process   -FilePath $msedge           `
                -ArgumentList $o1,$o2,$o3,$URL      `
                -Wait
        break
    }
}

パラメータとして「$Width」と$Heightを追加し、それをMicrosoft Edge (msedge.exe)の引数に指定するようにしただけだ。

getss.ps1の動作を確認

作り変えたgetss.ps1の動作を確認する。まず、パラメータを指定せずに実行する。

getss.ps1 https://docs.microsoft.com/ja-jp/powershell/

• 

  作成されたスクリーンショット画像 1200x800

取得されたスクリーンショット画像が1200x800になっていることを確認できる。デフォルト設定のサイズで取得されていることがわかる。

次にパラメータを1つだけ指定する。ここでは「-Height」のパラメータに2000を指定してみた。これで1200x2000でスクリーンショットが取得できる。

getss.ps1 -Height 2000 https://docs.microsoft.com/ja-jp/powershell/

• 

  作成されたスクリーンショット画像 1200x2000

1200x2000のスクリーンショットが取得できていることを確認できる。

最後に「-Width」と「-Height」の両方を指定する。

getss.ps1 -Width 1500 -Height 1500で実行

getss.ps1 -Width 1500 -Height 1500 https://docs.microsoft.com/ja-jp/powershell/

• 

  作成されたスクリーンショット画像 1500x1500

指定したサイズでスクリーンショットが取得できていることがわかる。

Webページのスクリーンショットでサイズ指定は必須

Webページのスクリーンショットを取る場合にサイズの指定は必須だ。Webページの一部の場所だけが欲しい場合も、最初の全体のスクリーンショットが取得できれば、後は画像ツールを使って該当部分を切り出す処理を行えばよい。スクリーンショットのサイズ指定ができるかどうかはとても大切なのだ。

幸い、Microsoft Edgeのヘッドレスモードはサイズを指定してスクリーンショットを取得できるので、この機能を使ってgetss.ps1にサイズ指定の機能を追加した。将来的にはFirefoxなどほかのWebブラウザを使う機能も追加可能だ。netcat.ps1のときも説明したように、大切なのはインタフェースであって内部の実装ではない。インタフェースさえ不変であれば、内部で利用するソフトウエアやアプリケーションは時代に合わせて変えていけば良いからだ。

この調子でgetss.ps1をより実用的なスクリプトに仕上げていこう。以前作ったnetcat.ps1とともに、実用的に活用できるスクリプトになってくれるはずだ。