ブラウザ – 開発とAI

Google Chrome で縦長なWebページを開くと、画面から見切れてしまいスクロールが必要になります。そのような画面で、スクロール分も含めてWebページ全体を画面キャプチャ（スクリーンショット）する方法を解説します。 今回は、Google Chrome の「デベロッパーツール」を使って取得します。 環境／バージョン Google Chrome：86.0.4240.193 １．Windowsの一般的な方法で取得してみる Windowsでの一般的なキャプチャ取得は、2種類あります。 PC画面全てのキャプチャ：PrintScreenアクティブウィンドウのキャプチャ：Alt+PrintScreen 試しに、Alt+PrintScreenでSpringフレームワークの画面キャプチャを取得します。（クリップボードに保存されるので、Excel等に貼り付けてみてください。） このように途中までしか取れません。 では、全て取得する方法を以下で解説します。 ２．Google Chrome のデベロッパーツールで取得する １．デベロッパーツールを開く 以下のいずれかの方法で、デベロッパーツールを開きます。 F12Ctrl+Shift+i「Google Chorme の設定」メニューの 「その他のツール」＞「デベロッパーツール」を選択コンテキストメニュー（画面内で右クリック）で「検証」を選択 初期状態であれば、下記の様にブラウザの右側にソースコードのような画面が開きます。（一度デベロッパーツールを開いて何かしらの処理をした場合、表示が異なることがあります。） では、キャプチャを取得しましょう。 ２．画面キャプチャを取得する Webページ全体の画面キャプチャは、下記の方法で取得できます。 マウス操作ショートカットキー＆コマンド 以降で、それぞれ解説します。（以下は、対象画面でデベロッパーツールを開いた状態から解説を続けます。） １．マウス操作で取得 マウス操作での取得方法を解説します。 表示されたデベロッパーツールの左上部にある、左から２つめのアイコンをクリックすると、左側のサイトの表示が少し変わり、上段にいくつかの情報とアイコンが表示されます。 左側に表示された部分の右端のアイコン（三点リーダー）をクリックしメニュー&gt;「Capture full size screenshot」をクリックすると、画面キャプチャが実行されます。 画面キャプチャが完了すると、ブラウザ下部に下記が表示されます。これはPCのダウンロードフォルダにファイルが保存されたことを伝える通知です。 ２．ショートカットキー＆コマンドで取得 ショートカットキーとコマンド発行での取得方法を解説します。 Ctrl+Shift+pを押下すると、下記の様に、画面右のデベロッパーツール側のコマンド画面が表示されます。 コマンド入力欄にカーソルがあるので、そのまま "capture" と入力すると、いくつかコマンドが表示されるので、「Capture full size screenshot」を選択（マウスクリックでもキー操作のいずれでも可）すると、画面キャプチャが実行されます。 画面キャプチャが完了すると、マウスで取得した場合と同様、ブラウザ下部に下記が表示されます。 最後に お疲れさまでした！ 以上で、解説は終了です。取得した画面キャプチャは、ダウンロードフォルダに保存されており、ツールの「フォト」や「ペイント3D」での編集も可能なので、是非試してみてください。

【Google Chrome】縦長のWebページをスクロール分も含めて画面キャプチャ取得する方法