【Chrome拡張機能】User Agent SwitcherでスマホやiPhoneやIEの表示確認

Chrome拡張機能（エクステンション）「User Agent Switcher」を使うと、iPhone、iPad、Androidなどスマホ・タブレットでの見栄えを、PCやMacのブラウザで確認できます。デザイン確認などに便利です。

ゆめぴょんです。こんちはっ(^^)/

最近はスマートフォン・タブレットなどモバイル端末からのアクセスがかなり増えています。特にiPhone、iPad、Androidからの訪問数は無視できない存在になりつつあります。

私のこのブログも当初は「WPtouch」を採用してスマホ対応していました。しかしデザインを好きになれなかったので、PC用と同じ画面を表示することにしています。現在、スマホ版を製作中です。

Chrome拡張機能（エクステンション）「User Agent Switcher」を使うとユーザーエージェントを切り替え可能です。すなわち、WindowsのPCやMacからスマホ表示を見たり、違うブラウザのレイアウトを確認できます。

PC/Macでスマホ用の表示を確認したい場合とは

次のような場合が考えられます。

スマホを持っている場合は、2、3についてはスマホで確認すればいいでしょう。ただ最近は減りましたが「iPhoneのみ対応」という場合に、Androidしか持ってなければPC/Macからの切替が便利ですね。

今回紹介する拡張機能をもっとも多用するのは「1」のケースだと思います。iPhoneは持っててもiPadやAndroidを持っていない場合はあると思います。Kindleまで持っている人はもっと少ないでしょう。

スマホ用レイアウトだけでなく、普段はあまり使わないIE(Internet Explorer)での表示も確認できるのは便利です。バージョンも6,7,8,9,10のそれぞれを選ぶことが可能です。早くそれらが不要になればいいのですが。

Chromeだけでなく、Firefox、Operaでも同名のアドオンがあるようです。私はChrome版しか利用したことがないので、説明はChrome版だけで行います。

Chrome、Firefox、Operaのインストールはそれぞれ次のリンクからおこなってください。5分はかからないと思います。

使い方もとてもシンプルです。右上の仮面のようなアイコンをクリックすると、ブラウザやモバイル端末を選べます。試しに「iPhone」を選んでみます。選んだ後でブラウザを更新する必要があります。

ブラウザ更新後は「iPhone」のレイアウトになるので、ブラウザの横幅を縮小するとほぼiPhoneで見る表示と同じになります。ただ完璧ではないので少しずれてる場合もありますが、雰囲気はつかめます。

ユーザーエージェントを切り替えた後、すなわち「iPhone」などのレイアウトを確認後は必ず元の「Default」に戻すことを忘れないでください。そうしないと他のページを見る時も「iPhone」モードになってしまいます。

ユーザーエージェントを切り替えできるのは、ウェブサービスやアプリなどでもあります。しかしいつも使っているブラウザで気軽にできれば一番便利だと感じています。

ただiPhoneやAndroidにもバージョンが多数あるので対応してないレイアウトもあります。またIEに関しては実際に見てみた画面と違いがあるサイトもありました。あくまでも参考にする程度で考えた方がいいと思います。

目を守ってくれるPC/Mac用アプリも、興味ある方は読んでみてください。

ゆめぴょんでした。ちゃおっ！