Web ページのスクリーンショットを撮りたい状況はたくさんあります。確かに、その仕事をするブラウザ拡張機能はありますが、多くの Web サイトのスクリーンショットを撮ってアーカイブしたり、自動プロセスの一部として生成したりする必要がある場合は、コマンド ライン ツールが必要です。コマンド ラインから Web ページのスクリーンショットを取得する 4 つのツールを次に示します。
pageres-cli
これは他のより一般的なツールほど普及していませんが、pageres-cli はスクリーンショットを撮るのに最適なツールです。 PhantomJS に基づいており、Node.js で記述されているため、最も複雑な Web ページでも正確にレンダリングされます。
pageres-cli をインストールするには、まず Node.js と NPM をインストールする必要があります。次に、ターミナル ウィンドウを開き、次のようにインストールします。
sudo npm install -g pageres-cli
インストール後、スクリーンショットを撮るのは簡単です:
pageres google.com
これにより、現在の作業ディレクトリに google.com-1366x768.png という名前のスクリーンショットが表示されます ご覧のとおり、これは 1366 × 768 の解像度と PNG 形式です。
独自のファイル名、形式、および解像度を指定できます。次のコマンドを検討してください:
pageres google.com yahoo.com 1280x800 --format=jpg --filename="Pictures/<%= date %>_<%= url %>"
これは長いコマンドなので、分解してみましょう:
-
google.comとyahoo.comスクリーンショットが生成される URL です。 -
1280x800スクリーンショットがレンダリングされる画面サイズを示します。 -
--format使用する形式を指定します。この場合、JPG 形式を使用しました。 -
--filenameスクリーンショットが保存されるディレクトリと、ファイルの名前の形式を指定します。この例では、「Pictures」ディレクトリに移動し、ファイル名は日付の後にアンダースコア (_) を指定する必要があることを指定しました。 ) の後に URL が続きます。
Web サイトごとに異なる設定を行うこともできます!
pageres [google.com 1280x800] [yahoo.com 800x600]
最終的に、このツールを使用しているときに、一部の Web サイトが Web ページの「ライト」または「モバイル」バージョンを提供していることに気付く場合があります。ユーザー エージェント文字列を最新のブラウザーに似たものに簡単に変更できます。
pageres echo.opera.com --user-agent='Mozilla/5.0 (X11; Linux x86_64; rv:50.0) Gecko/20100101 Firefox/50.0'
他にもさまざまなオプションが利用可能です。プロジェクトのホームページを見てください。
ファイアフォックス
Firefox 57 以降のバージョンには、コマンド ライン スクリーンショット モードがあります。 pageres-cli と同じように、Firefox は Web ページを正確にキャプチャしますが、それほど多くの機能はありません。このモードはグラフィカル環境を使用しないため、サーバーでの使用に適しています。
Firefox を使用してスクリーンショットを撮るには、次の手順を実行します。
firefox -screenshot google.png google.com
これにより、ページ全体のスクリーンショットが取得されます。 google.com を作成しました ファイル google.png に . Firefox は現在、他の形式でのスクリーンショットの撮影をサポートしていません。別の拡張機能を使用している場合。 B. google.jpg 、この名前の PNG ファイルが作成されます。
限られたサイズのスクリーンショットを撮るには、--window-size を使用します パラメータ。たとえば、サイズが 1366 × 768 のスクリーンショットを撮りたい場合は、次のようにします。
firefox -screenshot google.png google.com --window-size=1366,768
Firefox にインストールされたアドオンも出力に影響します。これは多くの場合非常に便利です。たとえば、広告ブロック拡張機能をインストールすると、スクリーンショットの広告も削除されます。
キューティキャプ
pageres-cli と Firefox は優れていますが、万人向けではありません。幸いなことに、Cutycapt のようなツールは他にもあります。 QtWebkit ライブラリを使用して Web ページをレンダリングします。
Ubuntu と Debian sudo apt install cutycapt でインストールできます;他のシステムでは、ホームページで説明されているように、ソースからコンパイルできます。
次のように、cutycapt でスクリーンショットを撮ることができます:
cutycapt --url=google.com --out=google.png
cutycapt は、ファイル名から出力ファイルの形式を認識しようとします。サポートされている形式には、JPG、GIF、SVG、および PNG が含まれます。
デフォルトでは、Cutycapt は幅 800 × 600 のスクリーンショットを生成します。スクリーンショットの高さと幅は次のように制御できます:
cutycapt --url=google.com --out=google.png --min-width=1366 --min-height=768
これにより、解像度 1366 × 768 のスクリーンショットが得られます。
man cutycapt と入力して man ページを参照してください。 ターミナルでオプションのリストを表示します。
「ライト」または「モバイル」バージョンを提供する Web サイトで問題が発生した場合は、最新のブラウザーに似たユーザー エージェント文字列を提供してください。
cutycapt --url=... --out=... --user-agent='Mozilla/5.0 (X11; Linux x86_64; rv:50.0) Gecko/20100101 Firefox/50.0'
ただし、X サーバーが実行されていないマシン (ほとんどのサーバーと同様) で cutycapt を実行しようとすると、失敗します。 xvfb を使用する必要があります 実行するには:
xvfb-run --server-args="-screen 0, 1024x768x24" cutycapt --url=... --out=...
上記のコマンドでは、--server-args パラメータは、24 ビットの色深度でサイズ 1024 × 768 の仮想スクリーン バッファを作成するだけです。スクリーンショットには影響しません。
wkhtmltoimage
wkhtmltopdf の一部として含まれている wkhtmltoimage は、スクリーンショットを生成するための別のツールです。その機能の範囲は、スクリーンショットの自動生成を高速化することを目的としています。ただし、詳細が必要な場合は最適ではありません。
ディストリビューションのリポジトリで利用できるはずです。 Debian / Ubuntu では sudo apt install wkhtmltopdf で取得できます .お使いのディストリビューションで利用できない場合は、いつでもコンパイル済みのバイナリを使用するか、ソースからコンパイルできます。
ただし、X サーバーのない環境で wkhtmltoimage を実行する場合は、コンパイル済みのバイナリを入手する必要があります。標準リポジトリにあるものは、多くの場合、バイナリなしでの実行をサポートしていません。
コンパイル済みのバイナリをインストールするには、システムの最新のアーカイブをダウンロードして、次の手順を実行します:
sudo tar -xf wkhtmltox-*.tar.xz -C /opt sudo mkdir -p /usr/local/lib /usr/local/share/man/man1 sudo ln -s /opt/wkhtmltox/bin/wkhtmltoimage /usr/local/lib sudo ln -s /opt/wkhtmltox/bin/wkhtmltopdf /usr/local/lib sudo ln -s /opt/wkhtmltox/share/man/man1/wkhtmltoimage.1.gz /usr/local/share/man/man1 sudo ln -s /opt/wkhtmltox/share/man/man1/wkhtmltopdf.1.gz /usr/local/share/man/man1
次の方法でウェブページのスクリーンショットを撮ることができます:
wkhtmltoimage google.com google.jpg
JPG および PNG スクリーンショットの生成がサポートされています。ただし、生成される JPG ファイルのサイズは膨大です
以下を指定して、カスタムの幅と高さを設定できます:
wkhtmltoimage --height 1200 --width 800 google.com google.png
場合によっては、スクリーンショットが示されているよりも広くなることがあります。 --disable-smart-width を追加することでこれを修正できます フラグ。
残念ながら、ユーザー エージェント文字列を変更する確実な方法はありません。具体的には、 User-Agent を使用できます HTTP ヘッダーですが、変更できません navigator.userAgent JavaScript (JS) による値。そうは言っても、多くのユースケースで必要なのは HTTP ヘッダーの偽造だけです。あなたはそれを行うことができます:
wkhtmltoimage --custom-header-propagation --custom-header User-Agent 'Mozilla/5.0 (X11; Linux x86_64; rv:50.0) Gecko/20100101 Firefox/50.0' google.com google.jpg
--custom-header-propagation Switch により、カスタム User-Agent が確実に 画像、JS ファイル、インライン フレーム コンテンツなどのすべてのリソースを取得するための HTTP ヘッダー。
自動スクリーンショットを撮っているときに、JS なしでページがどのように見えるかを確認したい場合があります。 --disable-javascript を使用してこれを行うことができます カウンター:
wkhtmltoimage --disable-javascript google.com google.jpg
スクリーンショットを大量に撮る場合は、JS の実行にかかる時間を短縮して処理を高速化することをお勧めします。デフォルトの時間は 200 ミリ秒 (ms) ですが、増減できます。たとえば、JS の実行に 45 ミリ秒を許可する場合は、次を使用します。
wkhtmltoimage --javascript-delay 45 google.com google.jpg
利用可能なすべてのオプションを表示するには、wkhtmltoimage --extended-help を実行します。 .
卒業証書
この記事では、さまざまなツールを使用して Web ページのスクリーンショットを撮る方法を見てきました。正確性を重視するツールもあれば、速度を重視するツールもあります。