「Google Chrome」のUAを偽装してモバイル端末での見栄えをチェック「MobileLayouter」

「MobileLayouter」v1.0.13

　「MobileLayouter」は、モバイル端末から見たWebページの見栄えを手軽にチェックできる「Google Chrome」用の拡張機能。編集部にてWindows 8上の「Google Chrome」v28.0.1500.72で動作を確認した。“Chrome ウェブストア”から無償でダウンロードできる。

　本拡張機能を利用すると、「Google Chrome」のユーザーエージェント（以下、UA）をモバイル端末のものに偽装することが可能。UAによってページのデザインを切り替えているサイトで、切り替え機能が正常に機能しているか確かめたい場合に役立つ。また、端末の画面幅を再現する機能を備えており、モバイル端末から見た場合の見栄えを手軽にチェックする用途にも使える。ただし、レンダリングエンジンの違いもあり、モバイル端末での見栄えを完全に再現できるわけではない点には注意。

　使い方は簡単で、拡張機能のポップアップにある端末リストから、目的の端末を選択するだけでよい。初期状態では“iPhone 4S”“iPad”“GALAXY NEXUS”“Xperia arc”“F-01D”の5機種が選択できる。また、それ以外にも膨大な数のモバイル端末のUAがプリセットされており、機種名で検索して端末リストに追加することが可能。

　さらに、ツールバーにあるサイズ切換ボタンをONにすれば、実際の端末画面の横幅が再現できる（“viewport”で言うところの“width=device-width”の状態）。縦置き表示（Portrait）と横置き表示（Landscape）の切り替えもサポートされている。

端末リストで“iPhone 4S”を選択。ページがモバイル向けデザインに

横置き表示（Landscape）へ切り替えた様子。iPhone 4Sの場合、横幅が460pxになる

サイズ切換ボタンをOFFに。ブラウザの横幅いっぱいに表示される

豊富なプリセットから端末を検索して追加することも可能