画面のスクロール・キャプチャー「GoFullPage」vs「Chrome標準機能」

今回は、Webページをスクロールしながらキャプチャーしてくれる拡張機能「GoFullPage」の使い方を紹介していこう。この拡張機能を使うと、Webページ全体を“1枚の画像”としてキャプチャーすることが可能となる。なお、同様の作業をChromeの「デベロッパーツール」で実現することも可能だ。両者を比較しながら紹介していこう。

「GoFullPage」vs「Chrome標準機能」

「GoFullPage」の追加手順

現在、閲覧しているWebページを「画像ファイル」として残しておきたいケースもあるだろう。このような場合に活用できるのが「GoFullPage」という拡張機能だ。

一般的なWebページは“縦長”に作成されている場合が多く、ひとつの画面には収まらない。これを「画像ファイル」として記録するには、画面をスクロールしながら何回かに分けてキャプチャーを行い、それらを画像編集アプリでつなぎ合わせる、といった作業が必要になる。これは、かなり面倒な作業といえる。

こういった面倒な作業を行わなくても、Webページを自動的にスクロールしながら“1枚の画像”としてキャプチャーしてくれる拡張機能が「GoFullPage」となる。なお、あまり知られていないが、スクロール・キャプチャーは「Chromeの標準機能」でも実現することが可能となっている。それぞれの機能について、その使い勝手などを比較・検証していこう。

拡張機能「GoFullPage」をChromeに追加する手順はいつもと同じ。「GoFullPage」の紹介ページを開き、右上にある「Chromeに追加」をクリックすればよい。続けて、「拡張機能を追加」ボタンをクリックすると、「GoFullPage」の追加が完了する。

「GoFullPage」の紹介ページ

続いて、以下のような画面が表示される。この画面には「GoFullPageをツールバーに固定しておくと便利だよ！」ということが記されている。ここで行うべき作業は特にないので、そのまま「×」をクリックしてタブを閉じてしまって構わない。

「GoFullPage」を追加した直後の画面

「GoFullPage」を使ったスクロール・キャプチャー

それでは、「GoFullPage」を使ってWebページをスクロール・キャプチャーする方法を紹介していこう。まずは、キャプチャーしたいWebページをブラウザ（Chrome）に表示する。

キャプチャーするWebページを表示

Webページを表示できたら「拡張機能」のアイコンをクリックし、「GoFullPage」を選択する。なお、「GoFullPage」をツールバーに固定している場合は、「カメラ」のアイコンをクリックするだけでスクロール・キャプチャーを開始できる。

キャプチャーを開始する操作

キャプチャーを開始する操作（ツールバーに固定している場合）

画面が縦横に自動スクロールされると同時に、キャプチャーの処理が進められていく。この様子が“パックマンのアニメーション”で表示されるので、パックマンが右端に到達するまで数秒ほど待つ。

キャプチャー中の表示

キャプチャーした画像のプレビューが“新しいタブ”に表示される。最初は、画像全体が縮小表示されている。詳細を確認したいときは、画像をクリックして拡大表示するとよい。

キャプチャーした画像を拡大表示

正しくキャプチャーできていることを確認できたら、以下の図に示したアイコンをクリックして「画像ファイル」をダウンロードする。

キャプチャーした画像のダウンロード

「ダウンロード」フォルダーを開くと、PNG形式の画像ファイルが保存されているのを確認できる。これが先ほどキャプチャーしたWebページの「画像ファイル」となる。

保存された画像ファイル

以降は、用途に合わせて「画像ファイル」を活用していくだけ。PNGは汎用性の高い画像ファイル形式なので、たいていのアプリで画像を利用できるはずだ。以下の図は、Windowsに標準付属される「フォト」アプリで画像を開いた様子だ。

画像ファイルを開いた様子

キャプチャーした画像をPDFとして保存する機能も用意されている。この場合は、プレビュー画面にある「PDF」のアイコンをクリックすればよい。続いて、権限の許可を求めるダイアログが表示されるので、「許可する」ボタンをクリックする。

PDFとしてダウンロードする場合

「Adobe Acrobat Reader」などのPDFビューワーが起動し、PDF化されたキャプチャー画像が表示される。このPDFファイルも「ダウンロード」フォルダーに自動保存される仕組みになっている。

PDFとして表示した場合

ただし、上図を見ると分かるように、一般的なPDFではなく、各ページに“キャプチャー画像”を貼り付けただけのPDFになる。文字の選択などは行えないため、PDF化するメリットはあまり感じられないだろう。あえて言うなら、「画像よりもPDFの方が簡単に印刷できる」という点がメリットになる。

ちなみに、これまでに掲載してきた図で“グレーの四角形”になっている部分には「Web広告」が表示されている、と考えて頂きたい。Web広告を自動的に消去する機能が用意されている訳ではない。これら部分には「Webの閲覧時に表示されていた広告」が、そのままキャプチャーされることになる。

Chromeのスクロール・キャプチャー機能

このように、拡張機能「GoFullPage」を使うと、スクロール・キャプチャーを手軽に実行できるようになる。とても便利な機能といえるが、実は、同様の機能はChrome本体にも用意されている。このため、「GoFullPage」を追加しなくてもスクロール・キャプチャーを実行することは可能だ。

その手順を詳しく解説していこう。まずは、キャプチャーしたいWebページをブラウザ（Chrome）に表示する。続いて、以下の手順で操作を進めていく。

（1）「F12」キーを押して「デベロッパーツール」を表示する
（2）「Ctrl」＋「Shift」＋「P」キーを押す

スクロール・キャプチャーの手順（1）～（2）

すると、コマンド入力用のダイアログが表示されるので、続けて以下のように操作を進めていく。

（3）コマンド入力欄に「capture」と入力する
（4）「Capture full size screenshot」を選択する
※デベロッパーツールが日本語化されている場合は、「キャプチャー」と入力し、「フルサイズのスクリーンショットをキャプチャー」を選択する。

スクロール・キャプチャーの手順（3）～（4）

以上で、スクロール・キャプチャーの操作は完了。もうデベロッパーツールは必要ないので、右上にある「×」をクリックして閉じておこう。

デベロッパーツールの終了

「ダウンロード」フォルダーを開くと、先ほどキャプチャーしたWebページの「画像ファイル」が保存されているのを確認できる。

保存された画像ファイル

この画像ファイルを開いて、キャプチャー結果を確認してみよう。正しくキャプチャーできているように見えるが、実際にはいくつかの不具合が見受けられる。それは一部の画像が欠落していることだ。本来なら“薄い赤色”で示した部分に「画像」が配置されていなければならない。

画像ファイルを開いた様子

比較しやすいように「GoFullPage」でキャプチャーした画像ファイルも掲載しておこう。先ほど“薄い赤色”で示した部分に「画像」が配置されているのを確認できるだろう。

「GoFullPage」でキャプチャーした場合

こういった不具合を回避するには、いちどWebページを最下部までスクロールしてから「デベロッパーツール」を起動し、「Capture full size screenshot」を実行する必要がある。これで、たいていの場合、画像を欠落することなくキャプチャーできるようになる。

ただし、今度は以下の図に示したような不具合が発生してしまうケースもある。

途中までスクロールした状態でキャプチャーした場合

上図は、いちど最下部までスクロールしたあと、ページの途中まで戻した状態でキャプチャーを実行した例だ。この場合、ページの途中に「ヘッダー」が配置された画像が取得される。

現在、皆さんが閲覧している「Tech+」のWebサイトは、画面スクロールに合わせて「ヘッダー」の位置が上下に移動する仕組みになっている。ほかにも、似たような仕組みを採用しているWebサイトは沢山ある。

こういったWebサイトでは、キャプチャーしたときの「ヘッダー」の位置が、そのままキャプチャー画像にも反映されてしまうようだ。このため、記事の一部が「ヘッダー」で隠れてしまう不具合が発生する。また、ページの最上部には「ヘッダー」が存在しない状態になる。

このように、Chrome標準（デベロッパーツール）のスクロール・キャプチャー機能は、何かと不安定な部分が多い。なるべく確実にキャプチャーするには、（1）最下部までスクロールする、（2）最上部までスクロールを戻す、といった操作を行ってからキャプチャーを実行する必要がある。そのほか、「Ctrl」＋「Shift」＋「P」キーの操作を記憶しておくのが難しい、という欠点もある。

一方、拡張機能「GoFullPage」は、クリックひとつでスクロール・キャプチャーを実行でき、その結果も安定性がある。実際にスクロールしながら画面をキャプチャーしていくため、“表示するまで読み込まれない画像”にも対応できているのだろう。

ということで、これまでの話をまとめておこう。品質や操作手順には、以下のような差があるようだ。

◆Chromeの標準機能
・スクロール・キャプチャーを実行することは可能
・ただし、安定性に欠ける（撮影のコツが必要）
・操作手順を記憶しておくのが難しい

◆GoFullPage
・クリックひとつでスクロール・キャプチャーを実行できる
・キャプチャー結果も概ね安定している
・PDF保存は単なる“画像の貼り付け”で、文字選択には対応していない

頻繁にWeb画面をキャプチャーする方は、この機会に「GoFullPage」を追加しておいてもよいだろう。そうでない方は「Chromeの標準機能」で代用してもよいが、いざという時に「操作手順を忘れてしまった……」という状況になりかねない。

そのつど調べながら操作するくらいなら、いっそのこと「GoFullPage」を追加してしまったほうが早いかもしれない。その後、不要になった「GoFullPage」は削除（または無効化）してしまえば済む話だ。拡張機能は、追加／削除を手軽に行え、有効／無効を簡単に切り替えられるため、必要な時だけ追加する（有効にする）というのが賢い使い方になるだろう。