漫画の地球儀

Chromeで『UserAgent』を変更する方法【Windows、Mac、スマホ、Android、iPhone、UA偽装】

スポンサーリンク

Chromeのユーザーエージェント

f:id:rick1208:20200728101727p:plain
User Agent(ユーザーエージェント )とは、ユーザーがあるサイトにアクセスしたときに伝える、ソフトウェアやハードウェアなどユーザーの使用環境の情報です。

使用している OS(WindowsMac OS)、WebブラウザChromeInternet Explorerなど)、スマートフォンの機種などの情報を伝えます。

どんな時に使うの?

f:id:rick1208:20200728101940p:plain
最近は、レスポンシブデザインが重要視されています。

レスポンシブデザインとは、デバイスの画面サイズに依存しないwebサイトを構築する方法です。パソコンやスマートフォンなど、 ユーザーの インターネットの使用環境に合わせたWebサイトを出しることが可能です。

レスポンシブデザインを採用すれば、パソコン用サイトとスマートフォン用サイトを別々に作る必要がありません。共通のWebサイトを1つ構築して、ページごとに1種類ずつ管理すればいいのです。

User Agent(ユーザーエージェント)により、ユーザーの使用環境を伝えることで、Webサイトはその ユーザーに合わせた情報を送信することが可能です。

選び人は機能性と選べる対象で決めよう

f:id:rick1208:20200728165128p:plain
レスポンシブルデザインを採用してWebサイトを構築するとき、それぞれのデバイスからの表示画面をチェックしたくても、あらゆるデバイスを実ときに用意するのは難しいでしょう。

User Agentを偽装(UA偽装)してデバイスエミュレータを表示可能です。User Agentは、本来のデバイスとは異なる情報を送ることで偽装することが可能です。UA偽装をすることで、パソコン上でも「スマートフォンで見ることしたページ」を表示することが可能です。

UA偽装をするには、Chromeに付属しているデベロッパーツールを使う方法やChrome拡張機能を使う方法などがあります。

ガラケーなど用意されたUA以外のユーザーエージェントが必要になった場合は、デベロッパーツールを使用する必要があるなど、それぞれのメリットデメリットがあります。機能性と選べる対象を考慮して偽装方法を決めましょう。

デベロッパーツールを使用する

f:id:rick1208:20200728142341p:plain
Chromeに付属しているデベロッパーツール(Web開発のための要素の検証機能)を使用し、User Agent(ユーザーエージェント)を偽装をすることが可能です。

User Agentを偽装することで、Chrome上でInternet Explorerの画面やスマートフォンの画面を出したり、デバイスエミュレータとして表示することが可能です。

デベロッパーツールの開き方

f:id:rick1208:20200729070402p:plain
Chromeメニューから、「その他のツール」「デベロッパーツール」の順に押します。

また、Chrome画面上で、Windowsなら「F12」キーを押す、あるいは「Control + Shift + I」を同時に押す、Macなら「Control + Option + I」を同時に押すことで、デベロッパーツールが開きます。

デベロッパーツールでUAを変更する方法

f:id:rick1208:20200729070409p:plain
Chrome画面の左側にデベロッパーツールが表示されます。

デベロッパーツールの「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を使用する

f:id:rick1208:20200728131447p:plain
Chrome拡張機能「User-Agent Switcher for Chrome」で、User Agentを変更することも可能です。Chromeで、スマートフォンIEなどのブラウザにUA偽装をして、ページを見ることが可能です。

Chromeデベロッパーツールよりも、手軽に使用可能です。チェックするページが多い場合は、拡張機能「User-Agent Switcher for Chrome」を使うほうが便利です。

User-Agent Switcher for Chromeをダウンロードしよう

f:id:rick1208:20200729070430p:plain
chrome ウェブストア」から「拡張機能」を開きます。検索ボックスに「User-Agent Switcher for Chrome」を入れます。

ダウンロード画面が表示されます。右端の「Chromeに追加」ボタンを押してChrome拡張機能「User-Agent Switcher for Chrome」をダウンロードします。
f:id:rick1208:20200729070440p:plain
Chrome拡張機能「User-Agent Switcher for Chrome」のアイコンが追加されました。

User-Agent Switcher for ChromeでのUAの変更方法

f:id:rick1208:20200729070448p:plain
追加されたChrome拡張機能「User-Agent Switcher for Chrome」のアイコンをクリックすると、UAを変更可能なブラウザの一覧表が表示されます。

「User-Agent Switcher for Chrome」で変更可能なUAの種類は、
ChromeInternet ExploreriOSAndroidWindows Phone、FirefoxOperaSafari
f:id:rick1208:20200729070501p:plain
偽装したいブラウザをクリックすると、変更可能なブラウザのバージョン一覧が表示されます。ここでは、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も追加することが可能です。

バイスエミュレータを使用する

f:id:rick1208:20200727032720p:plain
ChromeUA偽装方法!~デバイスエミュレータを使用する~
パソコン

Chromeのデバイスエミュレータ機能で、User Agent(ユーザーエージェント)を変更して、Chrome上にブラウザを出しることが可能です。

バイスエミュレータ機能では、UA偽装以外にも、ページの表示領域の再現なども可能です。

スマートフォンエミュレータする

f:id:rick1208:20200729070543p:plain
Chromeデベロッパーツールを起動します。

デベロッパーツールの左上にあるスマートフォンのアイコンを押します。

バイスツールバーからデバイスを選択

f:id:rick1208:20200729070627p:plain
スマートフォンのアイコンをクリックすると、Webページの表示が変わり、デバイスエミュレータが表示されます。

バイスエミュレータの画面上にデバイスツールバーが表示されます。デバイスツールバーから、エミュレートしたいデバイスを選びます。

Network conditionsを使用する

f:id:rick1208:20200726180223p:plain
デベロッパーツールのNetwork conditionsからGoogle Chromeが用意したUserAgentに設定したり、任意のUserAgentを記入して設定することが可能です。

Network conditionsを使用すれば、デバイスエミュレータ機能よりも、細かい粒度の動作チェックが可能です。

Network confitionsを表示する

f:id:rick1208:20200729070648p:plain
Chrome上で、Windowsなら「F12」キーを押す、あるいは「Control + Shift + I」を同時に押す、Macなら「Control + Option + I」を同時に押すことで、デベロッパーツールを出します。

「︙」を押し、「More Tools」→「Network conditions」を押します。

デベロッパーツールに「Network conditions」が追加されます。「Network conditions」にある「Select automatically」のチェックを外します。

Network conditionsからUAを変更する

f:id:rick1208:20200729070656p:plain
「Network conditions」の「Select automatically」のチェックを外すと、その下のセレクトボックスやテキストボックスの表示されます。ここから、ユーザーエージェント (UA) が変更可能なようになります。
f:id:rick1208:20200729070708p:plain
「User agent」のセレクトボックスから、User Agentを設定することが可能です。

セレクトボックスに一覧表示されるUser Agentには、主要なブラウザが一通り用意されています。また、Googlebotなど特殊なUser Agentもあります。

任意のUser Agentを設定する場合は、セレクトボックス下にあるテキストボックスに直接、設定したいUser Agentを記入します。

User Agentを設定後、目的のページを開いたり、再読込したりして設定を反映させます。