目次
はじめに
何かしらの手順を説明するためにブラウザの画面キャプチャが欲しい時があります。最近は使用している画面が大きいので、普段のサイズで画面キャプチャを行うと画像のサイズが大きすぎます。また、画像サイズが揃っている方がドキュメントに貼り付ける際に扱いやすいです。あとは、不要なブックマークや他のタブまで画像キャプチャしないように…
ブックマークレットにより現在表示中のページを固定サイズの別窓で表示する方法をまとめます。
環境
macOS 10.12.6 + Chrome
Windows 10 + Chrome
ブックマークレットとは？
Chromeにブックマークレットを追加する方法
どこかのページを表示している状態で、アドレスバーの右端にある星をクリックし、ブックマークの追加ダイアログを開き「編集…」ボタンをクリックします。ブックマークの編集ダイアログで「名前」に好きな名前を付け、「URL」にjavascript:から始まるコードを入力します。
行ったことは、ブックマークのURLにアドレスではなく、javascriptのコードを設定しているだけなので別の方法でも設定できます。
追加するブックマークレットのコード
幅=1024,高さ=700
javascript:window.open(location.href,'_blank','width=1024,height=700');
使用方法
キャプチャしたいページを表示した状態で追加したブックマークをクリックする。
別窓で同じページが開く。
ウィンドウ単位で画面キャプチャを行う方法
macOS
[shift] + [command] + [4]の後、[space]を押下するとマウスカーソルがカメラマークに変わる。
カメラカーソルをキャプチャしたいウィンドウに合わせ、ウィンドウが網掛け表示になったらクリックする。
Windows 10
キャプチャしたいウィンドウをアクティブにして、[alt] + [shift] + [PrintScreen]押下する。
おまけ
Chromeでwindow.openしたウィンドウにはChromeの仕様によりツールバーが表示できません。
ページの戻る、再読み込みなどはショートカットキーや、マウスで行うことになります。
macOS
- [command] + [←]でページを戻る
- [command] + [→]でページを進む
- [command] + [r]で再読み込み
Windows
- [alt] + [←]でページを戻る
- [alt] + [→]でページを進む
- [F5]で再読み込み