Chrome拡張機能 WindowResizerが便利

Tech

ユーザが使用するディスプレイの解像度に合わせた画面開発
そんな時に役立つものを発見しました
Windows標準のディスプレイ設定を変えなくても
サクッと解像度を変更することができます

スポンサーリンク

Window ResizerをChromeに追加

Window Resizer
Resize the browser window to emulate various screen resolutions.

まずは拡張機能を追加です

「Chromeに追加」をクリックです!
「拡張機能を追加」をクリックです!

拡張機能のアイコンをクリックしましょう

ブラウザの右上にあるこんなマークをクリックです

拡張機能の小ウィンドウが出てきます↓

Window Resizerをピン止めしておくと便利です。

ピン止めすると URLバーの横に固定表示されます

①をクリックすると、WindowResizerのメニューっぽいものが表示されます
②の「OK, got it!」をクリックしましょう

Preset(規定値)を変更する

この時点で、既にいくつかのサイズが用意されています。ちなみにこの小窓が表示されている状態で「Ctrl + 数字」を入力すると、そのサイズに変更されます。よく使うサイズを小さい数字にしておくとわかりやすいですね。

規定値以外のサイズも使いたい場合

デフォルト設定されているサイズだけでは対応できないケースも多々あると思います
また、サイズ変更と言っても、一時的に試したいサイズと頻繁に使用するサイズ等あるかと思います
そういったニーズにも応えられる機能が付いてました!

一時的なサイズ変更

一時的にサイズ指定したい場合は小窓の下部にある緑色のエリアに
縦横サイズを指定して矢印ボタンを押すと切り替わります

「縦」×「横」 →(実行)という使い方

ちなみに、Resizeの下に表示されている「window」をクリックすると
「viewport」に切り替わります

  • window : Chromeブラウザのwindowサイズを指定
  • viewport : Chromeブラウザ内の表示エリアのサイズを指定

よく使うサイズへ既存の規定値を変更

小窓の右側に表示されている歯車マークをクリックします。

別タブで↑の画面が表示されます。設定用画面ですね。

左のメニューにある「presets」を選択しましょう。

利用頻度の低いサイズにカーソルを合わせると、鉛筆マーク(編集)が表示されるので、これをクリックしましょう。
編集画面に遷移するので、好きな設定値に変更しましょう。最後に「save preset」を押して完了!
設定が反映されました!

ツールを使って快適な作業環境を構築しましょう

こういったツールをうまく活用して、ちょっとした手間を省けるようになると
小さなストレスが軽減されて、気持ちよく作業が進められますね。

私も個人的に使用する拡張機能を作ってみようかなと思っています。。。

今回、WindowResizerの導入部分をご紹介しましたが、
hotkeyの設定もできるので、興味のある方はガンガン使いこんでいきましょう!

では!