2014年11月7日

「Chrome、Firefox、IE」ブラウザ別ユーザーエージェント変更方法

ユーザーエージェント切り替え

スマートフォンサイトを制作するときに便利なブラウザの機能「エミュレータ」。ユーザーエージェントを切り替える事でブラウザ上でスマートフォンサイトを表示して確認する事ができる機能ですが、今回は代表的なGoogleChrome、Firefox、IEのユーザーエージェント切り替え方法についてまとめてみました。

GoogleChromeのUA変更

GoogleChromeのユーザーエージェント変更手順は下記の通りです。

キーボードのF12を押してデベロッパーツールを開き、右下の方にあるアイコンをクリックします。

Emulationというタブメニューをクリックします。

機種、画面サイズ、UA等の情報を編集できるようになりますので、Deviceメニューで機種を選択します。

Screenメニューで画面サイズを選択します。画面サイズを変更したい場合は「Emulate screen」にチェックを付けます。

User AgentメニューでUAを選択します。「Spoof user agent」にチェックを付けて、プルダウンから選択します。

Chromeはバージョン32頃からOverridesのメニューが無くなったため、UAを変更する方法がわからず困りましたが、これにて解決しました。

FirefoxのUA変更

FirefoxでUAを変更する場合はメニューバーにある「ツール」->「アドオン」から、「User Agent Switcher」をインストールします。
すると「ツール」に「Default User Agent」という項目が追加されますので、ここでUAを選択、変更します。

IEのUA変更

キーボードのF12を押してデベロッパーツールを開き、左側の下の方にあるパソコンのアイコンをクリックします。すると「エミュレーション」という内容が表示されて、UAを選択できるようになります。

ユーザーエージェントとは?

以上でユーザーエージェントを切り替えることが出来るようになりました。肝心なユーザーエージェントとは何か、という内容ですが、簡単に言うと「どんな環境で閲覧しているか」という通知のことで、「PCのChromeで閲覧している」「Androidで閲覧している」といった閲覧環境の情報のことを言います。

サイト制作時、このUAをプログラムで判別して「PCならこのページ、スマホならこのページ」と表示を出し分けているサービスが多くあります。そのため、ブラウザでUAを切り替えることで、それぞれの表示を確認できる、という結果となります。

以上、「Chrome、Firefox、IE」のブラウザ別ユーザーエージェント変更方法でした。

, , , ,

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です