様々なスマホの画面サイズを1度に開いて動作確認できるChrome拡張「mobile browser emulator」

以前、パソコンとモバイルの動作確認を1画面内で行えるBliskというブラウザを紹介しました。

こんな感じのやつ。

Bliskのスクロール同期機能

このBliskは、サイトの動作確認に非常に便利ではありました。しかし、その後のバージョンアップにより有料化されたことで、無料で利用するには30分しか利用できなくなってしまいました。

もちろん、Chromeブラウザでも、モバイル端末の動作確認を行うことはできます。

けれど、Chrome単体の機能でモバイルの動作確認を行おうとすると、以下のようにモバイルとPC画面を同時に開くことはできません。

Google Chromeでモバイル端末の動作確認

動作確認だけしたい場合は、デベロッパーツールも邪魔ですし。重い。

なので、動作確認が何かと不便なので、「何かパソコンとモバイル画面を手軽に動作確認できるものはないか…?」と探したら「mobile browser emulator」というナイスなChrome拡張を見つけたので紹介です。

スポンサーリンク
レクタングル(大)広告

mobile browser emulatorとは

mobile browser emulator

mobile browser emulatorは、簡単なクリック操作で、「複数サイズのモバイル端末画面」と「パソコン画面」を同時に開いて動作確認できるモバイルエミュレーター拡張です。

例えば、スマホ画面を動作確認するのであれば、ダブルクリック一発で以下のような状態を作ることができます。

モバイルエミュレーターの動作確認状態

モバイル画面を開くとパソコン用の画面は色が薄くなってしまいますが操作はできます。モバイルエミュレーター画面を閉じれば、状態も元に戻ります。なので、パソコン画面への復帰もデベロッパーツールを利用するよりは手軽です。

動作確認可能なスマホサイズ

スマホであれば、以下のような画面サイズの動作確認画面を手軽に呼び出すことができます。

  1. 320×480(スタンダードなモバイル解像度)
  2. 320×533(多くのSamsung、HTC、LG)
  3. 320×568(iPhone5)
  4. 360×640(Galaxy:S3,S4,S5、Nexus、Xperia:P,S,Z)
  5. 375×667(iPhone6)

モバイルエミュレーターに用意されている画面サイズ(スマホ)

動作確認可能なタブレットサイズ

タブレットは、今のところ以下の2種類です。

  1. 768×1024(iPad、iPad mini、Galaxy. Tab A,S2)
  2. 800×1280(7、8、10.1Androidタブレット)

モバイルエミュレーターに用意されている画面サイズ(タブレット)

こういった、動作確認画面を手軽に作り出すことができます。

mobile browser emulatorの使い方

利用するには、mobile browser emulatorから、インストールを行ってください。

mobile browser emulatorのインストール

インストールが終了すると、Chromeのツールバーに以下のようなボタンが表示されます。

モバイルエミュレーターのツールボタン

ボタンをクリックすると、以下のような操作画面が表示されます。

モバイルエミュレーターの操作画面

動作確認したいサイズをクリック

以下のように、動作確認したいサイズ単体をクリックすると、

単体項目を選択するとそのサイズの画面が開く

選択したサイズの動作確認画面が開きます。

選択したサイズの動作確認画面

1度に全ての画面サイズを開くにはダブルクリック

「スマホやタブレット画面を一度に全部開きたい」なんて場合は、「Phones」や「Tablets」といった項目部分をダブルクリックします。

カテゴリをダブルクリックすると全てのサイズが開く

例えば「Phones」項目をダブルクリックした場合は、以下のように5つの動作確認画面が1度に開きます。

モバイルエミュレーターに用意されている画面サイズ

この機能は、「CSSで多くのブレークポイントを設定しているサイト」の動作確認を行う時には、結構便利なのではないかと思います。

まとめ

このように、「Chrome単体のエミュレート機能」よりは、mobile browser emulatorを利用した方が手軽に「様々なモバイル画面サイズの表示確認」を行うことができます。

ただ、Bliskのように、「スクロールに応じて他の画面もシンクロしてスクロールする」といった機能まではありません。けれど、「ツールバーからクリック操作で手軽にアクセス」できたり、「PC画面とモバイル画面を手軽に行き来できる」といった点において、Chromeデフォルトよりは表示確認がやりやすくなるかと思います。

もちろん、モバイル動作画面上でも、デベロッパーツールを使えるので、ソースコードをいろいろと調査することも可能です。

デベロッパーツールを開いて調査が可能

というわけで「Bliskとまではいかないけど手軽にサイトの表示確認をしたい」とか「主なスマホの画面サイズをすべて開いて表示確認したい」なんて場合には、便利かと思います。

サイト mobile browser emulator

MFクラウド確定申告

[PR]

確定申告の受け付け期間になりました!MFクラウドで申告の手間を軽減!

確定申告、面倒くさいです。

ただでさえ面倒なのに、2014年の確定申告から、僕のような超零細個人事業主でも、記帳義務と保存義務…

スポンサーリンク
レクタングル(大)広告
レクタングル(大)広告

この記事をお届けした
寝ログの最新ニュース情報を、
いいねしてチェックしよう!
スポンサーリンク