Webページ全体のスクショ撮るのに便利なChrome拡張機能「Fire Shot」

Fire Shot Webプログラミング

調べ物をしている時に「このWebページ全体のスクリーンショットを撮りたい」と思う事がよくあります。

特に私の場合、趣味の乗り物撮影の情報収集の時に公式サイトのページの内容(イベント情報や新しい車両に関する情報)のスクリーンショットを撮る機会が多いです。

今までは何回かに分けてスクリーンショットを撮るなどしてきたのですが、あまりにも非効率で、後から閲覧もし難いものでした。

そこで見つけたのが、メインで使っているブラウザのGoogle  Chrome拡張機能の1つ、FireShotです。

  • PC版Google Chrome(Windows、MacOS)で使用できる機能です。
  • 当記事内ではMacOS版Google Chromeを使用した内容を記載しています。
  • ソフトウェアのバージョンアップなどにより、画面表示内容が一部変更されている場合があります。
  • 著作権に十分注意して使用してください。

Webページ全体のスクショが簡単に撮れるFireShot

Google ChromeでFireShotを使う準備と使い方を紹介します。

FireShotを使う準備

Google ChromeにFireShotを導入する方法です。

Chromeウェブストアを表示します。

FireShot

画面内の「Chromeに追加」をクリック。

FireShot

「拡張機能を追加」をクリック。

FireShot

赤丸のアイコンが追加されます。これでFireShotを使う準備完了です。

FireShotの使い方

使い方の一例としてWebページ全体のスクリーンショットを撮り、pdf形式で保存する使い方を紹介します。(今回は当ブログトップページを例としています)

FireShot

スクリーンショットを撮りたいWebページを開き、ツールバーのFireShotのアイコンをクリック。表示される選択肢の中から「ページ全体をキャプチャ」を選択します。

FireShot

自動でページが読み込まれ、保存方法などを選ぶページが表示されます。PDFで保存するので「PDFとして保存」を選択します。

FireShot

保存先を指定してスクリーンショット完了です。

ちなみに、Webページ全体のスクリーンショットを保存する時、「画像として保存」を選択するとページの長さによってはエラーとなることがあります。

FireShot

PDFとして保存後、画像として書き出ししたのが上記画像です。

表示されている部分をスクリーンショット

表示されている部分だけのスクリーンショットを撮りたい場合は、「表示部分をキャプチャ」を選択します。

FireShot

表示されている部分のスクリーンショットを撮ったのが上記画像です。

選択範囲をスクリーンショット

スクリーンショットを撮る範囲を選択してスクリーンショットも撮れます。「選択範囲をキャプチャ」を選択し、範囲をドラッグして選択します。

FireShot

例としてヘッダー部分を選択してみます。

FireShot

ヘッダー部分のみのスクリーンショットを撮ったのが上記画像です。

FireShotが活躍する場面

FireShotが活躍する場面としては、趣味の乗り物撮影においてpdf形式で発表されていないイベント情報や各消防署のWebページ内の消防車両の情報を集める時が個人的に多いです。

個人的な資料として、イベント終了後にWebページが削除されても保存しておくことができます。
趣味の情報収集だけでなく、最近は仕事でも大活躍しています。