スマートフォンサイトを制作するときに便利なブラウザの機能「エミュレータ」。ユーザーエージェントを切り替える事でブラウザ上でスマートフォンサイトを表示して確認する事ができる機能ですが、今回は代表的な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」のブラウザ別ユーザーエージェント変更方法でした。
