Webページ全体をキャプチャするブラウザ拡張機能「FireShot」

開発中、Webページのスクリーンショットをキャプチャしたいケースがあると思います。しかし、WindowsやmacOSのスクリーンショット機能でキャプチャできるのは、ディスプレイの表示範囲内のサイズのみです。今回は、縦長のWebページ全体をキャプチャし、切れ目のない画像として保存したい場合に活躍する、ブラウザの拡張機能をご紹介します。

拡張機能「FireShot」

FireShotとは、Webページ全体のスクリーンショットをキャプチャするための拡張機能です。筆者は約1年間使用しておりますが、動作は非常に軽いです。また、無料で利用できます。

(公式) FireShot – Instant Full page Screen Capture in your browser

主な機能

• 保存形式の変更 (jpeg, png, pdf)
• キャプチャ範囲の変更 (ページ全体, 表示範囲, 選択範囲)
• ショートカットキーの割り当て

主な対応ブラウザ

• Google Chrome
• Mozilla Firefox
• Microsoft Edge
• Safari

FireShotの導入方法

本記事では、Google Chrome版の導入方法を紹介します。

Chromeウェブストアからダウンロード

1. Chromeウェブストアにアクセスして、「Chromeに追加」をクリックします。

2. 拡張機能追加の確認ダイアログが表示されるので、「拡張機能を追加」をクリックします。

3. FireShotアイコンが、拡張機能一覧に追加されます。以上で導入は終了です。

FireShotの基本的な使用方法

1. FireShotアイコンをクリックします。メニューが表示されるので、「ページ全体をキャプチャ」をクリックします。

2. 画面キャプチャが完了すると、新規タブでプレビュー画面が表示されます。「画像として保存」をクリックすると、画像を保存できます。

使用場面 (筆者の場合)

• 開発チーム内での意思疎通
• お客様とのご連絡
• 資料作成
• 学習用途, etc.

まとめ

導入も非常に簡単で、幅広く使っていける拡張機能だと思います。気になった方は、ぜひお試しください。ここまでお読みいただき、ありがとうございました。