LoginSignup
2
1

Google Chromeでサイト全体のスクリーンショットを取得する

Last updated at Posted at 2023-12-12

この記事は LINCRAFT Advent Calendar 2023 の13日目の記事となります。

概要

  • Google Chromeでサイト全体のスクリーンショットを取得しようとした。
  • 以前はデベロッパーツールからコマンドを叩けば取得できたが、できなくなっていた。
  • 代替方法を検索しても有用な記事が出てこなかったので調べてみた。
  • EdgeとFirefoxであれば右クリックから容易にサイト全体のスクリーンショットを取得できる。
  • Chromeでも拡張機能をインストールすれば容易に取得できる。
  • 拡張機能をインストールしなくてもスマホ表示モードにすれば右上のメニューからサイト全体のスクリーンショットを取得できる。

なのでChromeでPC表示モードのスクリーンショットを取得しなければならず、拡張機能のインストールも禁止されているといった状態でなければそれらの方法で取得した方がよい。

検証環境

  • Windows 10 Pro 22H2
  • Google Chrome (64bit) 119.0.6045.200

ショートカットを設定しスクリーンショットを取得する

  1. デベロッパーツールを開く

    • F12か Ctrl + Shift + i を押下。
    • またはブラウザ右上の設定ボタン(点3つが縦に並んでいる所) > その他ツール > デベロッパーツール
  2. デベロッパーツールの設定ボタン(点3つが縦に並んでいる所)を押下。

  3. コンテキストメニューからショートカットを押下。
    001.JPG

  4. ショートカット設定画面が出てくるので、「スクリーンショット」セクションを探す。下から探した方が早い。

  5. 「フルサイズのスクリーンショットをキャプチャ」を探す。
    002.JPG

  6. ショートカットを設定する。

    1. 項目右のペンマークを押下すると編集状態となる。
    2. 「ショートカットを追加する」を押下。
    3. テキストボックスが出てくるので、ショートカットを設定。押したキーがそのまま設定される。
    4. 既存のショートカットと重複する場合はエラーが出るので別のショートカットを登録。
      • 私は Ctrl + Q を割り当てた。
      • 戻したければ右下の「デフォルトのショートカットに戻す」を押下。もしくは個別に削除。
    5. ✓(変更を確認)を押下。ショートカット画面を閉じる。
      003.JPG
  7. デベロッパーツールにフォーカスが当たった状態で登録したショートカットキーを押下すれば保存処理が実行される。

準備されているスクリーンショット系のショートカット

以下の種類があった。

  • 領域のスクリーンショットをキャプチャ
    • 矩形選択してスクリーンショットを取れる。
    • でもスクリーンショット撮った後、マウスポインターの形状が戻らないのはバグなのだろうか。
  • フルサイズのスクリーンショットをキャプチャ
    • 画面表示領域外の部分もスクリーンショットしてくれる。
  • ノードのスクリーンショットをキャプチャ
    • 要素タブでノードを選択した状態で実行すると、その部分だけのキャプチャが撮れる。
    • 微妙に途切れたりしている。
  • スクリーンショットをキャプチャ
    • 画面に表示されている内容をキャプチャ。

その他

スクリーンショット以外にも色々とショートカットがあったので暇な時に確認してみたい。

一緒に働く仲間を募集中です!

リンクラフト株式会社では、組織拡大に伴い積極的な採用活動を行っています。
少しでも興味がある方はぜひご連絡ください。

▽会社ホームページ
https://lincraft.co.jp/
▽Instagram
https://www.instagram.com/lincraft.inc/
▽ご応募はこちらより
https://lincraft.co.jp/recruit

※カジュアル面談も受付中です。ご希望の方はHPのお問い合わせフォームよりご連絡ください。

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1