- Chromeのユーザーエージェント
- デベロッパーツールを使用する
- 拡張機能User-Agent Switcher for Chromeを使用する
- デバイスエミュレータを使用する
- Network conditionsを使用する
Chromeのユーザーエージェント
User Agent（ユーザーエージェント ）とは、ユーザーがあるサイトにアクセスしたときに伝える、ソフトウェアやハードウェアなどユーザーの使用環境の情報です。
使用している OS（WindowsやMac OS）、Webブラウザ（ChromeやInternet Explorerなど）、スマートフォンの機種などの情報を伝えます。
どんな時に使うの？
最近は、レスポンシブデザインが重要視されています。
レスポンシブデザインとは、デバイスの画面サイズに依存しないwebサイトを構築する方法です。
パソコンやスマートフォンなど、 ユーザーの インターネットの使用環境に合わせたWebサイトを出しることが可能です。
レスポンシブデザインを採用すれば、パソコン用サイトとスマートフォン用サイトを別々に作る必要がありません。
共通のWebサイトを1つ構築して、ページごとに1種類ずつ管理すればいいのです。
User Agent（ユーザーエージェント）により、ユーザーの使用環境を伝えることで、Webサイトはその ユーザーに合わせた情報を送信することが可能です。
選び人は機能性と選べる対象で決めよう
レスポンシブルデザインを採用してWebサイトを構築するとき、それぞれのデバイスからの表示画面をチェックしたくても、あらゆるデバイスを実ときに用意するのは難しいでしょう。
User Agentを偽装（UA偽装）してデバイスエミュレータを表示可能です。
User Agentは、本来のデバイスとは異なる情報を送ることで偽装することが可能です。
UA偽装をすることで、パソコン上でも「スマートフォンで見ることしたページ」を表示することが可能です。
UA偽装をするには、Chromeに付属しているデベロッパーツールを使う方法やChromeの拡張機能を使う方法などがあります。
ガラケーなど用意されたUA以外のユーザーエージェントが必要になった場合は、デベロッパーツールを使用する必要があるなど、それぞれのメリットデメリットがあります。
機能性と選べる対象を考慮して偽装方法を決めましょう。
デベロッパーツールを使用する
Chromeに付属しているデベロッパーツール（Web開発のための要素の検証機能）を使用し、User Agent（ユーザーエージェント）を偽装をすることが可能です。
User Agentを偽装することで、Chrome上でInternet Explorerの画面やスマートフォンの画面を出したり、デバイスエミュレータとして表示することが可能です。
デベロッパーツールの開き方
Chromeメニューから、「その他のツール」「デベロッパーツール」の順に押します。
また、Chrome画面上で、Windowsなら「F12」キーを押す、あるいは「Control + Shift + I」を同時に押す、Macなら「Control + Option + I」を同時に押すことで、デベロッパーツールが開きます。
デベロッパーツールでUAを変更する方法
デベロッパーツールの「Hide drawer」(Settingsボタンの左にある >>ボタン)を押します。
「Emulationタブ」を押します。タブがない場合は、「Settings」を押し、「General」を表示して、「Show 'Emulation' view in console drawer、」をチェックします。
「User Agent」を表示し、「Spoof user agent」をチェックします。
User Agentをセレクトボックスから選びます（Spoof user agentにチェックを入れるとセレクトボックスがアクティブになります）
スポンサーリンク
拡張機能User-Agent Switcher for Chromeを使用する
Chromeの拡張機能「User-Agent Switcher for Chrome」で、User Agentを変更することも可能です。
Chromeで、スマートフォンやIEなどのブラウザにUA偽装をして、ページを見ることが可能です。
Chromeのデベロッパーツールよりも、手軽に使用可能です。チェックするページが多い場合は、拡張機能「User-Agent Switcher for Chrome」を使うほうが便利です。
User-Agent Switcher for Chromeをダウンロードしよう
検索ボックスに「User-Agent Switcher for Chrome」を入れます。
ダウンロード画面が表示されます。
右端の「Chromeに追加」ボタンを押してChromeの拡張機能「User-Agent Switcher for Chrome」をダウンロードします。
User-Agent Switcher for ChromeでのUAの変更方法
追加されたChromeの拡張機能「User-Agent Switcher for Chrome」のアイコンをクリックすると、UAを変更可能なブラウザの一覧表が表示されます。
「User-Agent Switcher for Chrome」で変更可能なUAの種類は、
Chrome、Internet Explorer、iOS、Android、Windows Phone、Firefox、Opera、Safari
偽装したいブラウザをクリックすると、変更可能なブラウザのバージョン一覧が表示されます。ここでは、Internet Explorerを押しました。
また、任意のUAを追加することも可能です。
「User-Agent Switcher for Chrome」アイコンを右クリック→「オプション」を押します。
「User-Agent Switcher for Chrome」の画面が表示されます。
「Custom User-Agent List」欄から次の項目を記入します。
New User-agent name：UAの名称
name New User-Agent String：任意のUAを記入
ここから、GooglebotのUAも追加することが可能です。
デバイスエミュレータを使用する
ChromeのUA偽装方法！～デバイスエミュレータを使用する～
パソコン
Chromeのデバイスエミュレータ機能で、User Agent（ユーザーエージェント）を変更して、Chrome上にブラウザを出しることが可能です。
Network conditionsを使用する
デベロッパーツールのNetwork conditionsからGoogle Chromeが用意したUserAgentに設定したり、任意のUserAgentを記入して設定することが可能です。
Network conditionsを使用すれば、デバイスエミュレータ機能よりも、細かい粒度の動作チェックが可能です。
Network confitionsを表示する
Chrome上で、Windowsなら「F12」キーを押す、あるいは「Control + Shift + I」を同時に押す、Macなら「Control + Option + I」を同時に押すことで、デベロッパーツールを出します。
「︙」を押し、「More Tools」→「Network conditions」を押します。
デベロッパーツールに「Network conditions」が追加されます。
「Network conditions」にある「Select automatically」のチェックを外します。
Network conditionsからUAを変更する
「Network conditions」の「Select automatically」のチェックを外すと、その下のセレクトボックスやテキストボックスの表示されます。ここから、ユーザーエージェント (UA) が変更可能なようになります。
「User agent」のセレクトボックスから、User Agentを設定することが可能です。
セレクトボックスに一覧表示されるUser Agentには、主要なブラウザが一通り用意されています。
また、Googlebotなど特殊なUser Agentもあります。
任意のUser Agentを設定する場合は、セレクトボックス下にあるテキストボックスに直接、設定したいUser Agentを記入します。
User Agentを設定後、目的のページを開いたり、再読込したりして設定を反映させます。