現在表示中のページをキャプチャ用に固定サイズの別窓で表示する(ブックマークレット)

投稿者: | 2017年12月20日

はじめに

何かしらの手順を説明するためにブラウザの画面キャプチャが欲しい時があります。最近は使用している画面が大きいので、普段のサイズで画面キャプチャを行うと画像のサイズが大きすぎます。また、画像サイズが揃っている方がドキュメントに貼り付ける際に扱いやすいです。あとは、不要なブックマークや他のタブまで画像キャプチャしないように…

ブックマークレットにより現在表示中のページを固定サイズの別窓で表示する方法をまとめます。

環境

macOS 10.12.6 + Chrome

Windows 10 + Chrome

ブックマークレットとは?

wikipedia – ブックマークレット

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]で再読み込み