PowerShell Core入門 - 基本コマンドの使い方(221) Webページのスクリーンショットを取得するページ全体のスクショを撮る

今回は拡張編として、前回までに作成したWebページのスクリーンショットを取得するスクリプトにWebページ全体のスクリーンショットを撮る機能を追加する。ここまでできるようになれば、業務にも十分使えるはずだ。

→連載「PowerShell Core入門 - 基本コマンドの使い方」の過去回はこちらを参照。

【こちらもオススメ】
【連載】ゼロからはじめるPython [93]
Pythonでブラウザ自動化 - 画像を丸ごとダウンロードしよう

前回のおさらい

まずは前回のおさらいからだ。前回まででWebページのスクリーンショットを取得するPowerShellスクリプト「getss.ps1」はほとんど完成した。成果物は次の通りだ。

#!/usr/bin/env pwsh

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

#========================================================================
# 引数を処理
#   -URI uri        スクリーンショットを取得するリソースのURI
#   -Width width    スクリーンショットの幅
#   -Height height  スクリーンショットの高さ
#   -OutputFilePath path スクリーンショットを保存するファイル
#   -Agent      Webサーバへ送るUser-Agent文字列を指定
#========================================================================
Param(
    [Parameter(Mandatory=$false)][String]$URI = "desktop:",
    [Int]$Width = 1200,
    [Int]$Height = 800,
    [String]$OutputFilePath = "${env:HOME}/ss.png",
    [String]$Agent = "Mozilla/5.0 (Windows NT 10.0; Win64; x64)"
)

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

#========================================================================
# スクリーンショットを保存するファイルのパスを絶対パスへ変換
#========================================================================
if  (-not (Split-Path -IsAbsolute $OutputFilePath))
{
    $OutputFilePath = [System.IO.Path]::GetFullPath($OutputFilePath)
    Write-Warning                           `
        "スクリーンショット保存先として $OutputFilePath を使用。"
}

#========================================================================
# どの方法でスクリーンショットを取得するか判断
#========================================================================
switch  -Wildcard ($URI)
{
    'http*'
    {
        #========================================================
        # Microsoft Edgeを使って取得
        #========================================================
        $method='msedge'
        break
    }

    'desktop:*'
    {
        #========================================================
        # Snipping Toolを使って取得
        #========================================================
        $method='snippingtool'
        break
    }

    default
    {
        $method='none'
    }
}

#========================================================================
# スクリーンショットを撮るリソース種類の特定
#========================================================================
$contenttype='none'
switch  -Wildcard ($URI)
{
    #================================================================
    # コンテンツの種類を特定
    #================================================================
    'http*.html'
    {
        $contenttype='text/html'
        break
    }
    'http*.htm'
    {
        $contenttype='text/html'
        break
    }
    'http*.shtml'
    {
        $contenttype='text/html'
        break
    }
    'http*/'
    {
        $contenttype='text/html'
        break
    }
    'http*.txt'
    {
        $contenttype='text/plain'
        break
    }
    'http*.csv'
    {
        $contenttype='text/csv'
        break
    }
    'http*csv=1'
    {
        $contenttype='text/csv'
        break
    }
    'http*.pdf'
    {
        $contenttype='application/pdf'
        break
    }
    'http*.zip'
    {
        $contenttype='application/zip'
        break
    }
    default
    {
        $contenttype=(  & $curl     --location      `
                        -A $Agent       `
                        -Ss -I          `
                        $URI            |
                Select-String   "^Content-Type:"    )
        break
    }
}

#========================================================================
# スクリーンショットが取れないWebリソースの場合、代わりに
# http://example.com/ のスクリーンショットを取っておく
#========================================================================
switch  -Wildcard ($contenttype)
{
    #================================================================
    # コンテンツの種類を特定
    #================================================================
    '*text/html*'
    {
        break
    }
    '*text/plain*'
    {
        break
    }
    '*/*'
    {
        $URI='http://example.com/'
        break
    }
}

#========================================================================
# スクリーンショットを取得
#========================================================================
switch  ($method)
{
    #================================================================
    # Microsoft Edgeを使って取得
    #================================================================
    'msedge'
    {
        $o1='--headless'
        $o2='--screenshot="' + $OutputFilePath + '"'
        $o3="--window-size=$Width,$Height"
        $o4='--user-agent="$Agent"'
        $o5='--hide-scrollbars'

        Start-Process   -FilePath $msedge           `
                -ArgumentList $o1,$o2,$o3,$o4,$o5,$URI  `
                -Wait
        break
    }

    #================================================================
    # Snipping Toolを使って取得
    #================================================================
    'snippingtool'
    {
        Start-Process   -FilePath $snippingtool 
        # ※ -Waitは指定しても機能しない
        break
    }
}

このPowerShellスクリプトで機能的に足りないのは、Webページ全体のスクリーンショットを撮る機能だ。現在のスクリプトは「-Width 幅 -Height 高さ」でサイズを指定してスクリーンショットを撮ることができるが、ページ全体のスクリーンショットを撮るとなると高さがわからないので指定ができない。

そこで今回は、Webページ全体のスクリーンショットを取得する機能を追加する。これでWebページのスクリーンショットを取得するスクリプトとして必要な機能は、ほぼ揃うことになる。

Webページ全体のスクリーンショットを取得する方法の考え方

Webブラウザのヘッドレスモードでは、コマンドラインオプションからWebページ全体のスクリーンショットを撮る機能は提供していない。これまでに作ってきたgetss.ps1は、コマンドラインからMicrosoft Edgeに対して「ヘッドラインモードで動作せよ」「スクリーンショットを取得せよ」「この幅と高さでスクリーンショットを取得せよ」といった指定を行って動作させている。この部分でWebページを全体を指定するオプションは存在していないので、「高さ」をWebページ全体が入るサイズで指定する必要がある。

Webページ全体のスクリーンショットを取得する方法は実はいくつもあるのだが、これまでに作ってきたgetss.ps1の構造を壊すことなく機能を追加するには、何らかの方法で「Webページ全体の高さ」を取得する機能を追加すればよいことになる。

ここではその方法として「Webドライバ (WebDriver)」を経由してFirefoxを利用することにする。詳しい説明は次回以降に行うが、Webブラウザをより細かく制御しようと思ったらWebドライバを経由する方法になる。PowerShellの利便性を引き上げる強力な機能になるので、今回はWebドライバ利用への導入編だと思ってもらってもいいくらいだ。