ヤフオクに出品中です。

Chromeでウインドウサイズを指定する方法 Window Resizer

Chromeでウインドウサイズを指定するアプリならWindow ResizerGoogle
この記事は約5分で読めます。

ブログでChromeの機能を説明するときにウィンドウサイズを数値で指定したいと思いましたが、標準機能では見当たりませんでした。

拡張機能の「Window Resizer」を利用すれば、Chromeのウィンドウサイズを指定できました。

Window Resizer マルウェア問題

Window Resizerはマルウェアが含まれていた過去があります。

Chromeの拡張機能Window Resizerがマルウェアを含んでいたことが発覚
ブラウザの表示サイズをワンクリックで変更できる手軽さからWebサイト制作の現場などで役立つGoogle Chromeの拡張機能「Window Resizer」のプログラム中に、キーボードの入力をトラッキングして送信するマルウェアらしきものが仕込まれていることが発覚しました。現在、「Window Resizer」はChr...

現在は[プライバシーの取り組み]から、「パブリッシャーはお客様のデータを収集または使用しないことを表明しています」を確認できます。

Window Resizer プライバシーの取り組み

上記を踏まえて利用は自己判断でお願いします。

Window Resizer のインストール

chrome ウェブストアの拡張機能からWindow Resizerページを開きます。

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

[Chromeに追加]ボタンをクリック。

Window Resizer Chromeに追加

「Window Resizer」を追加しますか?画面が表示されるので[拡張機能を追加]をクリック。

Window Resizer 拡張機能を追加

Thank you for installing Window Resizer 画面が開いて拡張機能のインストールが完了しました。

Thank you for installing Window Resizer

日本語訳

WindowResizerをインストールしていただきありがとうございます

設定ページをチェックして、利用可能なすべてのオプションについて学ぶことを忘れないでください(そしてかなりの数があります)。 特に、次のことができます。

  • 自分のニーズに合わせてプリセットリストを編集します。 そこにあるすべてのデバイスのレイアウトをテストする人は誰もいませんが、最も重要なものの決定的なリストもありません。あなたにとって最も重要なものを決めるのはあなた次第です!)
  • キーボードのみを使用して拡張機能を使用する方法を学びます。 あなたがそこにいる多くの生産性フリークの1人なら、これを気に入るはずです。WindowResizerにはすべてのキーボードショートカットがあるので、マウスでウィンドウのサイズを変更する必要はありません。
  • 「回転」ツールや「ライブ測定」ツールなど、WindowResizerが提供するクールなツールについて学びます。
  • そしてそれが提供するさまざまな視覚的なカスタマイズオプションを忘れないでください!

Window Resizer の使い方

必要であれば右上の[拡張機能]ボタンをクリックしてメニューを呼び出し、Window Resizerの[ピン留め]をクリックしてアドレスバーの横に固定してください。

Window Resizer のピン留め

[Window Resizer]をはじめにクリックすると説明が表示されます。

[OK,got it!(訳:はい、わかった!)]をクリック。

Window Resizer OK,got it!

You can toggle the sidebar by clicking on this button.
訳:このボタンをクリックすると、サイドバーを切り替えることができます。
You can toggle the quick resize form the settings page.
訳:設定ページからクイックサイズ変更を切り替えることができます。

プリセットを追加する方法

自分で設定したプリセットを追加することができます。

サイドバーを表示して[設定]ボタンをクリック。

Window Resizer 設定

設定画面が開いたら、左カラムの[presets]を選択して、右カラムの[+]ボタンをクリック。

Window Resizer プリセットを追加するする

Drag the presets to re-order, hover for options or add a new one by clicking on the “+” button at the top of the screen.

訳:プリセットをドラッグして並べ替えたり、オプションにカーソルを合わせたり、画面上部の[+]ボタンをクリックして新しいプリセットを追加したりします。

add preset 画面が開くので設定します。

Window Resizer プリセットを設定する

 

Resize target

サイズを変更する対象を指定します。

  • Window(ブラウザのウインドウ)
  • Viewport(ウェブページの表示領域。ウインドウからタブやアドレスバーなどを除いた部分)

Width × Height

サイズ変更する幅と高さを記入します。単位はピクセル

  • width(幅)
  • height(高さ)

[use current]ボタンを押すと現在の「Resize target」を自動入力します。

Icon

アイコンを選択できます。

Description (optional)

説明を記入できるのでわかりやすい説明を付けてください(任意)

Position (optional)

ディスプレイの左上を基準としたウインドウの位置(任意)

  • left(左)
  • top(上)

[use current]ボタンを押すと「Use custom position」にチェックが入り現在の位置を自動入力します。

  • Leave unchanged(変更しないでください)
  • Use custom position(カスタム位置を使用)
  • Center on screen(画面の中央に配置)
例では「Width × Height」を[use current]ボタンで取得して「Description」に「test」と説明を付けました。

[save preset]ボタンを押してプリセットを保存します。

Window Resizer 設定例

右上の[Window Resizer]ボタンを押すと、先ほど登録した「test」プリセットが一番上に登録されています。

Window Resizer プリセット登録確認

プリセットをクリックすればウインドウサイズが変更できます。

Window Resizer iPHONE プリセット

まとめ

Chromeブラウザでスクリーンショットを撮るときに便利なWindow Resizerの使い方でした。

スマホの画面サイズを登録しておけば、スマホ・タブレット・PCなど各種デバイス用レイアウトの簡易テストにも利用できます。

Window Resizerを利用すれば、位置とサイズを決定できるので常に安定したブラウザのスクリーンショットを記録することができます。

コメント

タイトルとURLをコピーしました