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

Last updated at 2023-12-13Posted at 2023-12-12

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

概要

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

デベロッパーツールを開く
- F12か Ctrl + Shift + i を押下。
- またはブラウザ右上の設定ボタン(点3つが縦に並んでいる所) > その他ツール > デベロッパーツール
デベロッパーツールの設定ボタン(点3つが縦に並んでいる所)を押下。
コンテキストメニューからショートカットを押下。
ショートカット設定画面が出てくるので、「スクリーンショット」セクションを探す。下から探した方が早い。
「フルサイズのスクリーンショットをキャプチャ」を探す。
ショートカットを設定する。
1. 項目右のペンマークを押下すると編集状態となる。
2. 「ショートカットを追加する」を押下。
3. テキストボックスが出てくるので、ショートカットを設定。押したキーがそのまま設定される。
4. 既存のショートカットと重複する場合はエラーが出るので別のショートカットを登録。
  - 私は Ctrl + Q を割り当てた。
  - 戻したければ右下の「デフォルトのショートカットに戻す」を押下。もしくは個別に削除。
5. ✓(変更を確認)を押下。ショートカット画面を閉じる。
デベロッパーツールにフォーカスが当たった状態で登録したショートカットキーを押下すれば保存処理が実行される。

以下の種類があった。

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

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

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

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