2014年03月10日

ブラウザ毎のユーザーエージェント変更方法<Chrome、Firefox、IE>

   
スマホサイト制作時に実機で都度確認するのは面倒なので、ある程度までの制作はPCで進める事が多いですが、ユーザーエージェントでPCからの閲覧を弾いていたりする場合、そのままブラウザでは閲覧できない場合があります。こんな時はユーザーエージェントを切り替えて表示を確認するわけですが、代表的なGoogleChrome、Firefox、IEのユーザーエージェント切り替え方法についてまとめてみました。

GoogleChromeのUA変更

GoogleChromeでは下記手順でUAを変更できます。

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


続いてEmulationというタブメニューをクリックします。
f12-2.jpg


するとここから機種、画面サイズ、そしてUAといった情報を編集できるようになります。
まずはDeviceメニューで機種を選択します。
f12-3.jpg


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


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

Chromeのバージョン32あたりからOverridesのメニューが無くなり「どこからUA変えるの?UA変更できなくなったの?」と困ったことがありましたが、これにて解決しました。


FirefoxのUA変更

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

IEのUA変更

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

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

以上でユーザーエージェントの切り替えは出来るようになったのですが、そもそもユーザーエージェントとはなんぞや?というところも気になります。これは簡単に言うと「こんな環境で閲覧してますよー」という通知のようなもので、「iPhoneのsafariで閲覧してます」や「PCのIEで閲覧しています」などの情報の事を言います。このユーザーエージェントの情報はサイト開発側で取得できるため、「スマホで閲覧している人にはスマホ向けのサイトを見せる」といった事が出来るようになるわけですね。

そしてこのユーザーエージェントを「偽装」してくれるのが、上記で説明したブラウザ毎の機能です。PC版Chromeで閲覧していますが「iPhoneで閲覧している」というユーザーエージェントに書き換えてサイトを閲覧することで、スマホ版のサイト表示を確認できるわけですね。とっても便利。


以上、各ブラウザ毎のユーザーエージェントの切り替え方と、ユーザーエージェントについてでした。


posted by Liang Zhaohong at 11:27 | Comment(0) | TrackBack(0) | サイト制作全般 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。