Chromeの拡張機能を使用してWebページのスクリーンショット撮影する方法

Chromeの拡張機能とは

ブラウザの機能を追加・拡張するためのプログラムの事を「拡張機能」といいます。
拡張機能を使うことでブラウジング体験をカスタマイズし、様々な作業を効率的に処理する事ができるようになります。

Google Chromeを使っていて、Webサイトのスクリーンショットを撮影したい時、最も手軽なのはOSのコマンドを使用したスクリーンショットです。
ですが、使いたい時にコマンドを忘れてしまったり、望んだ状態のスクリーンショットを上手く撮影できなかったりする場合があります。

今回は、拡張機能を使って効率的にスクリーンショットを撮影する方法、そしてRPAを使って自動的にスクリーンショットを撮影する方法をご紹介します。

オススメのツールと使い方をご紹介

1. Full Page Screen Capture

Full Page Screen Captureはこちら

Full Page Screen Captureは、ブラウザに表示されたサイト全体のスクリーンショット撮影をする事に特化した、シンプルで使い勝手の良い拡張機能です。

使い方

1.拡張機能をChromeに追加します。


Full Page Screen CaptureをChrome拡張機能へ追加

2.スクリーンショット撮影をしたいWebサイトを開いた状態で、右上の拡張機能アイコンから「GoFullPage」を選択するだけで、サイト全体のスクリーンショットが撮影されます。


Full Page Screen Captureでサイト全体をキャプチャ

2.FireShot

FireShotはこちら

FireShotは感覚的に分かりやすく、日本語にも対応している拡張機能です。

使い方

1.拡張機能をChromeに追加します。


FireShotをChrome拡張機能へ追加

2.スクリーンショットを撮影したいページで、右上の拡張機能アイコンから「FireShot」を選択すると、撮影のためのモーダルメニューが開きます。


拡張機能FireShotをクリックしモーダルを表示

3.メニューからキャプチャ範囲を選択します。


FireShotのモーダルの詳細

ページ全体をキャプチャ:表示しているWebサイト全体のスクリーンショットを撮影します。
表示部分をキャプチャ:現在表示している部分のみ、スクリーンショットを撮影します。
選択範囲をキャプチャ:マウスでドラッグして囲んだ範囲内のみ、スクリーンショットを撮影します。
すべてのタブをキャプチャ:開いているタブ全ての、現在表示している部分のスクリーンショットを撮影し、ダウンロードします。
URLのリストをキャプチャ:入力したURLを順番に表示してキャプチャします。

3. Awesome Screnshot

Awesome Screnshotはこちら

Webページの全体のスクリーンショットを撮影したり、撮影した画像に矢印や図形、文字などを自由に書き込むこともできる、高性能な拡張機能です。
動画でキャプチャもできるので、広い用途で使用できます。

使い方

1.拡張機能をChromeに追加します。


Awesome ScrenshotをChrome拡張機能へ追加

2.セットアップを完了まで行います。


Awesome Screnshotのセットアップ

3.スクリーンショットを撮影したいページで、右上の拡張機能アイコンから「素晴らしい画面の並べ替えとスクリーンショット」を選択すると、撮影のためのモーダルメニューが開くので、「キャプチャ」タブをクリックします。


Awesome Screnshotのモーダルを表示

4.メニューからキャプチャ範囲を選択します。


Awesome Screnshotのモーダルの詳細

様々な方法でスクリーンショットを撮影でき、その場で赤字などの書き込みを行えて、そのまま画像をシェアしたりPDFに書き出す事もできます。
また、ChatGPTなどの拡張機能と連携する事により、使い方の幅が広がります。

表示部分:現在表示している部分のみ、スクリーンショットを撮影します。
フルページ:表示しているWebサイト全体のスクリーンショットを撮影します。
選択範囲:マウスでドラッグして囲んだ範囲内のみ、スクリーンショットを撮影します。
遅延後の表示部分:マウスオーバー等の状態を撮影するため、3秒待機してからスクリーンショットを撮影します。
画面全体またはアプリウィンドウ:デスクトップを含めた画面全体、または開いているブラウザを選択して スクリーンショットを撮影します。
ローカル画像に注釈を加える:画像をアップロードし、矢印や図形、文字などを書き込む事ができます。
スクリーンショットのテキスト抽出:ChatGPTの拡張機能「Sider」と連携する事により、撮影した画像からテキストを抽出するなど、様々な使い方ができます。

クラウドBOTを使ったスクリーンショット自動撮影の方法について

クラウド型RPA「クラウドBOT」では、Webサイトのスクリーンショットを撮影できます。
スケジュールを組んで様々な形で実行できるので、RPAならではのスクリーンショットを撮影する事ができます。
・運営しているWebサイトが正常に稼働しているか確認するため、サイト全体を1時間ごとに撮影する。
・特定のキーワードのGoogle検索結果ページの広告出稿状況を確認するため、広告キーワード検索をかけた後の広告枠部分のみを1日1回自動で撮影する。

ここでは、「サイト全体を1時間ごとに撮影する」場合のBOTの作り方を解説します。

1.クラウドBOTで撮影したいWebサイトにアクセスします。


クラウドBOTでWebサイトへアクセス

2.サイト内のどこでもいいのでクリックし、「コピー」から「スクリーンショットをコピー」をクリックします。


スクリーンショットを撮影する範囲を決める

3.「スクリーンショットの範囲」のプルダウンメニューから「ページ全体」を選択し「コピーする」をクリックします。


スクリーンショット撮影の設定

4.作成したBOTを保存します。」


BOTの保存

5.クラウドBOTのダッシュボードの「スケジュール」から「スケジュールを登録する」をクリックします。
※クラウドBOTのスケジュール実行は有料プランとなります。予めご了承ください。


クラウドBOTのスケジュール画面

6.「対象のBOT」から保存したBOTを選択し、スケジュールを設定し、「登録する」ボタンをクリックします。


スケジュールの詳細設定

7.作成したBOTが毎日1度、決まった時間にWebサイト全体のスクリーンショットを撮影する設定をしました。
PCを起動していなくても、自動で撮影が実行されます。


スケジュール設定の完了

クラウドBOTでは、HTMLの構造に準じて撮影範囲を設定する事ができるので、必要な箇所のみを選択して撮影する事もできます。
利用シーンに合わせてぜひご活用ください。

クラウドBOTの操作方法は、こちらをご参照ください。
また、クラウドBOTでスクリーンショットを撮影する際の詳しい操作方法は、こちらをご参照ください。

広く活用できるクラウド型RPA『クラウドBOT』

クラウド型RPAサービスは、PCを閉じていても設定されたスケジュールに応じてロボットを自動実行できます。
クラウドBOTは簡単な操作でブラウザ操作を自動化するロボットを作成できます。業務に合わせて様々な作業を自動化したい方は、是非チャレンジしてみて下さい。


クラウド型RPAについてもっと詳しく


  1. クラウド型RPAを低価格で導入!そもそもRPAとは?導入ニーズが高まった背景 無料体験も実施!活用事例も参考に
  2. クラウド型RPAを導入するメリットとは?専門知識がなくても簡単に活用できるのが魅力
  3. クラウド型RPAツールを無料体験!代表的なRPA製品「オンプレミス型」と「クラウド型」について
  4. クラウド型RPAツールの導入事例をご紹介!RPAツールの選定ポイント 使い方簡単で格安
  5. iPaaS製品の必要性 iPaaSとの連携が可能なクラウド型RPA『クラウドBOT』 無料プランから利用可能!初めての方は事例を参考に
  6. iPaaS製品とRPAツールの違い 日本でも普及が広がる!iPaaSを導入するメリット
  7. SaaSを連携させてワークフローの自動化・効率化を実現!クラウドサービス「SaaS」の連携手段とクラウド型のRPAツールを利用した連携
  8. SaaSの連携に有用な2製品「iPaaS」と「クラウド型RPA」とは SaaSの連携なら各APIに対応可能◎活用事例も多い『クラウドBOT』の導入を
  9. webブラウザ操作の自動化なら『クラウドBOT』 RPAツールで自動化・効率化できる業務 データ抽出を効率化するなら
  10. webブラウザ操作の自動化ならプログラミング不要で更新も手間いらずの『クラウドBOT』 自動化できる操作をご紹介
  11. ブラウザ操作を自動化する『クラウドBOT』は、日常的に行っているブラウザ操作をノーコードで自動化する事ができます
  12. ブラウザを自動操作する方法 - 『クラウドBOT』を使用して、ブラウザを自動操作する方法を解説します。
  13. Google Chromeのを自動操作するならインストール不要・プログラミング不要で自動操作を実化できる『クラウドBOT』がおすすめ
  14. 初心者でも簡単に使えるおすすめのRPAツール3選 | RPAの選定ポイントについても解説
  15. ブラウザのスクリーンショット撮影を自動化する方法をご紹介
  16. Seleniumを使ってWebスクレイピングを行う方法について
  17. Web上の業務を効率化できるツールをご紹介 | iPaaS、RPAの違いとは
  18. 総務におすすめRPA活用事例をご紹介 | クラウド型RPA活用事例
  19. ブラウザ上で行っている業務を効率化できるおすすめツール3選
  20. PuppeteerとNode.jsを使用してブラウザ操作を自動化する方法
  21. Selenium×pythonでWebスクレイピングを実現する方法(ソースコード付き) | Seleniumとpythonの環境構築と実行手順も解説
  22. クラウド型RPAを用いたカートシステムとWMSのデータ連携事例をご紹介 | ローコストで始める受注データの連携、出荷データの連携
  23. Chromeの拡張機能を使用してWebページのスクリーンショット撮影する方法
  24. Playwrightを使用して、Webページのスクリーンショット撮影を行う
  25. 無料で使えるおすすめのRPAをご紹介 | 無料RPAのメリット・デメリットや選定基準も解説
  26. APIがないWebシステムとデータ連携する方法
  27. Puppeteerを使用してテストを自動化する方法
  28. 簡単にできる!Webサイト画像の一括ダウンロードガイド
  29. 税理士・会計士におすすめ!RPA活用事例 RPAを使って業務効率改善を
  30. RPAとAIの組み合わせ事例をご紹介 | RPA、AIのそれぞれの特徴と組み合わせで実現できる自動化について解説
  31. playwrightを使用してブラウザのテストを自動化する方法について