Chrome を使って長いウェブページを簡単にスクロールキャプチャする方法

Chrome拡張機能は、ブラウザに便利な機能を追加することができ、Gmailを開かずに未読の数を確認できたり、広告をブロックしてくれたりと便利な拡張機能が多数存在します。

また、追加方法も簡単で、Chromeウェブストアにアクセスしインストールするだけです。

ただし、マルウェアが仕込まれた拡張機能も存在するため、インストールする際には注意が必要です。

開発者ツールを開き、要素タブの右側の縦三点ボタンをクリックして「コマンドを実行」をクリックします。

実行>の後ろに「screenshot」を入力すると、幾つかのスクリーンショットのキャプチャーの選択肢が表示されます。

「フルサイズのスクリーンショットをキャプチャー」をクリックします。

すると、Webページ全体はPNG画像としてキャプチャーされて、ブラウザのダウンロード先に保存されます。

PCの画面全体をキャプチャするには、拡張機能を使用します。

拡張機能には、さまざまな種類があり、それぞれに特徴があります。

自分に合った拡張機能を見つけて、利用してみてください。

FirefoxでWEBページ全体をスクショするには、キーボードのショートカットを使用する。

まず、デベロッパーツールを開き、「full」と入力して実行する。

すると、WEBページ全体がスクショされ、保存できる。

フルスクリーンショットを撮る場合、スクロールエフェクトを実装しているページでは、そのままでは空白や読み込み中のスピナーがキャプチャーされてしまうため、うまくいかない場合があります。

そこで、ページ最下部までスクロールしてすべてのコンテンツを表示させてからキャプチャーすると、うまくいくことが多いです。

また、ラップトップなど画面の狭いデバイスでは基本的に左右の余白が切り詰めて表示されるため、余白を含めてキャプチャーするには、拡大表示にしてスクリーンショットを撮る必要があります。

ディレクターからChromeで手軽にスクリーンショットを撮る方法を尋ねられた著者は、開発者ツールを開いてからキャプチャを撮る方法を提案したが、手間がかかるため、拡張機能開発に挑戦することにした。

拡張機能独自のお約束を理解するのに手間取ったが、30分ほどで完成させた。

この拡張機能は、アクティブなタブのキャプチャを可能な限り速やかに保存することができる。

コードはTypeScriptで開発し、GitHubに公開している。

Webページをキャプチャーした後、ダウンロードしたり編集したりすることができます。

ダウンロードはPDFファイルまたはPNG画像として行うことができ、編集はSnagit Editorを使用して行うことができます。

Snagit Editorは、矢印、テキスト、吹き出し、図形、スタンプ、塗りつぶし、移動、選択、ほかし、シンプル化、クイック選択、切り抜き、除去、ペン、ライン、蛍光ペン、ステップ、消しゴムと拡大など多くの編集ツールを搭載しています。

Chromeで画面全体をスクリーンショットを撮りたい場合、解像度が低いため、画面の一部が欠けてしまうことがあります。

画面の一部が欠けてしまう場合は、Chromeの表示を縮小してPC表示にする必要があります。

解像度の低いノートパソコンで、左右幅がきちんと表示されるまでズームアウトすればOKです。

その状態で、「Capture full size screenshot」を選択すれば、左右の幅が切れていないスクリーンショットを撮ることが可能です。

Chromeのデベロッパーツール（DevTools）を用いると、拡張機能を追加しなくても、PCやモバイルページのスクリーンショットを撮ることができる。

また、画像保存前に、不要な部分を削除したり、必要に応じてテキストやマーカーを挿入したりすることもできる。

デベロッパーツール（DevTools）には、ウェブサイトの表示を調整したり、ページをデバッグしたり、ウェブページを改善するためのさまざまな機能が搭載されている。

Chrome拡張機能の「Animated Gif Capture」を使うことで、ブラウザ上で動画を再生しながらGIFファイルとしてキャプチャすることができる。

設定で決めた秒数に応じてGIFを作成してくれる。