User Agentとは、ウェブサイトにアクセスしている時のChromeなどのブラウザやOSの種類などのユーザーの情報です。User Agentを変更することで、Chrome上でIEやスマホのブラウザに偽装してページを確認することができます。
User Agent(ユーザーエージェント )とは、ユーザーがあるサイトにアクセスしたときに伝える、ソフトウェアやハードウェアなどユーザーの利用環境の情報です。
利用している OS(WindowsやMac OS)、Webブラウザ(ChromeやInternet Explorerなど)、スマートフォンの機種などの情報を伝えます。
近年、レスポンシブデザインが重要視されています。
レスポンシブデザインとは、デバイスの画面サイズに依存しないwebサイトを構築する方法です。PCやスマートフォンなど、 ユーザーの インターネットの利用環境に合わせたWebサイトを表示させることができます。
レスポンシブデザインを採用すれば、PC用サイトとスマートフォン用サイトを別々に作る必要がありません。共通のWebサイトを1つ構築して、ページごとに1種類ずつ管理すればいいのです。
User Agent(ユーザーエージェント)により、ユーザーの利用環境を伝えることで、Webサイトはその ユーザーに合わせた情報を送信することができます。
レスポンシブルデザインを採用してWebサイトを構築する際、それぞれのデバイスからの表示画面を確認したくても、あらゆるデバイスを実際に用意するのは難しいでしょう。
User Agentを偽装(UA偽装)してデバイスエミュレータを表示できます。User Agentは、本来のデバイスとは異なる情報を送ることで偽装することができます。UA偽装をすることで、PC上でも「スマートフォンで閲覧したページ」を表示することができます。
UA偽装をするには、Chromeに付属しているデベロッパーツールを使う方法やChromeの拡張機能を使う方法などがあります。
ガラケーなど用意されたUA以外のユーザーエージェントが必要になった場合は、デベロッパーツールを利用する必要があるなど、それぞれのメリットデメリットがあります。機能性と選べる対象を考慮して偽装方法を決めましょう。
Chromeに付属しているデベロッパーツール(Web開発のための要素の検証機能)を使用し、User Agent(ユーザーエージェント)を偽装をすることができます。
User Agentを偽装することで、Chrome上でInternet Explorerの画面やスマートフォンの画面を表示させたり、デバイスエミュレータとして表示することができます。
Chromeメニューから、「その他のツール」「デベロッパーツール」の順にクリックします。
また、Chrome画面上で、Windowsなら「F12」キーを押す、または「Control + Shift + I」を同時に押す、Macなら「Control + Option + I」を同時に押すことで、デベロッパーツールが開きます。
Chrome画面の左側にデベロッパーツールが表示されます。
デベロッパーツールの「Hide drawer」(Settingsボタンの左にある >>ボタン)をクリックします。
「Emulationタブ」をクリックします。タブがない場合は、「Settings」をクリックし、「General」を表示して、「Show 'Emulation' view in console drawer.」をチェックします。
「User Agent」を表示し、「Spoof user agent」をチェックします。
User Agentをセレクトボックスから選択します(Spoof user agentにチェックを入れるとセレクトボックスがアクティブになります)
Chromeの拡張機能「User-Agent Switcher for Chrome」で、User Agentを変更することもできます。Chromeで、スマートフォンやIEなどのブラウザにUA偽装をして、ページを見ることができます。
Chromeのデベロッパーツールよりも、手軽に利用できます。確認するページが多い場合は、拡張機能「User-Agent Switcher for Chrome」を使うほうが便利です。
「chrome ウェブストア」から「拡張機能」を開きます。検索ボックスに「User-Agent Switcher for Chrome」を入れます。
インストール画面が表示されます。右端の「Chromeに追加」ボタンをクリックしてChromeの拡張機能「User-Agent Switcher for Chrome」をインストールします。
Chromeに拡張機能「User-Agent Switcher for Chrome」のアイコンが追加されました。
追加されたChromeの拡張機能「User-Agent Switcher for Chrome」のアイコンをクリックすると、UAを変更できるブラウザの一覧表が表示されます。
「User-Agent Switcher for Chrome」で変更できるUAの種類は、
Chrome、Internet Explorer、iOS、Android、Windows Phone、Firefox、Opera、Safari
1 / 2
続きを読む