以前、パソコンとモバイルの動作確認を1画面内で行えるBliskというブラウザを紹介しました。
こんな感じのやつ。
このBliskは、サイトの動作確認に非常に便利ではありました。しかし、その後のバージョンアップにより有料化されたことで、無料で利用するには30分しか利用できなくなってしまいました。
もちろん、Chromeブラウザでも、モバイル端末の動作確認を行うことはできます。
けれど、Chrome単体の機能でモバイルの動作確認を行おうとすると、以下のようにモバイルとPC画面を同時に開くことはできません。
動作確認だけしたい場合は、デベロッパーツールも邪魔ですし。重い。
なので、動作確認が何かと不便なので、「何かパソコンとモバイル画面を手軽に動作確認できるものはないか…？」と探したら「mobile browser emulator」というナイスなChrome拡張を見つけたので紹介です。
目次
mobile browser emulatorとは
mobile browser emulatorは、簡単なクリック操作で、「複数サイズのモバイル端末画面」と「パソコン画面」を同時に開いて動作確認できるモバイルエミュレーター拡張です。
例えば、スマホ画面を動作確認するのであれば、ダブルクリック一発で以下のような状態を作ることができます。
動作確認可能なスマホサイズ
スマホであれば、以下のような画面サイズの動作確認画面を手軽に呼び出すことができます。
- 320×480（スタンダードなモバイル解像度）
- 320×533（多くのSamsung、HTC、LG）
- 320×568（iPhone5）
- 360×640(Galaxy：S3,S4,S5、Nexus、Xperia：P,S,Z）
- 375×667（iPhone6）
動作確認可能なタブレットサイズ
タブレットは、今のところ以下の2種類です。
- 768×1024（iPad、iPad mini、Galaxy. Tab A,S2）
- 800×1280（7、8、10.1Androidタブレット）
こういった、動作確認画面を手軽に作り出すことができます。
mobile browser emulatorの使い方
利用するには、mobile browser emulatorから、インストールを行ってください。
インストールが終了すると、Chromeのツールバーに以下のようなボタンが表示されます。
ボタンをクリックすると、以下のような操作画面が表示されます。
動作確認したいサイズをクリック
以下のように、動作確認したいサイズ単体をクリックすると、
選択したサイズの動作確認画面が開きます。
1度に全ての画面サイズを開くにはダブルクリック
「スマホやタブレット画面を一度に全部開きたい」なんて場合は、「Phones」や「Tablets」といった項目部分をダブルクリックします。
例えば「Phones」項目をダブルクリックした場合は、以下のように5つの動作確認画面が1度に開きます。
この機能は、「CSSで多くのブレークポイントを設定しているサイト」の動作確認を行う時には、結構便利なのではないかと思います。
まとめ
このように、「Chrome単体のエミュレート機能」よりは、mobile browser emulatorを利用した方が手軽に「様々なモバイル画面サイズの表示確認」を行うことができます。
ただ、Bliskのように、「スクロールに応じて他の画面もシンクロしてスクロールする」といった機能まではありません。けれど、「ツールバーからクリック操作で手軽にアクセス」できたり、「PC画面とモバイル画面を手軽に行き来できる」といった点において、Chromeデフォルトよりは表示確認がやりやすくなるかと思います。
もちろん、モバイル動作画面上でも、デベロッパーツールを使えるので、ソースコードをいろいろと調査することも可能です。
というわけで「Bliskとまではいかないけど手軽にサイトの表示確認をしたい」とか「主なスマホの画面サイズをすべて開いて表示確認したい」なんて場合には、便利かと思います。
