GoogleChromeのUser Agent(ユーザーエージェント)の変更・偽装方法!
GoogleChromeのUser Agent(ユーザーエージェント)の変更・偽装方法を解説します。PCのGoogleChrome上でUser Agent(ユーザーエージェント)を変更・偽装する方法を使って、スマホなどの別端末のwedサイト表示を確認できます。
目次
- 1ChomeのUser Agentを変更・偽装する方法とは?
- ・UA(ユーザーエージェント)はWebサイトの構築に便利
- 2デベロッパーツールでChrome User Agentを偽装
- ・デベロッパーツールを開く
- 3拡張機能User-Agent Switcher for Chromeを偽装
- ・User-Agent Switcher for Chromeをインストール
- 4デバイスエミュレータでChrome User Agentを偽装
- ・スマホをエミュレータする
- 5Network conditionsでChrome User Agentを偽装
- ・Network conditionsを表示
- 6Chrome User Agentは機能性で選ぼう!
- ・GoogleChromeの記事が気になった方にはこちらもおすすめ!
ChomeのUser Agentを変更・偽装する方法とは?
User Agent(ユーザーエージェント、略称UA)とは、ウェブサイトを閲覧する際に開示される、閲覧している端末の種類(PC、スマホ、タブレットなどの種類、またはiPhone、iPadなどの銘柄)やそのOSの種類(Windows、iOS)、アクセスしているブラウザ(Google Chrome、Microsoft Edge、Firefox)などのユーザー情報のことです。
私たちがwebサイトで閲覧するたびに、そのwebサイトに対して自分の端末のこうしたユーザー情報をその都度、開示しています
丁度、他人の家に訪問するときに「どちらさまですか」と聞かれて「〇〇です」と答えることで信用されて家のドアを開けてもらえるようなイメージで、webサイトにアクセスするときは必ずこのUser Agent(ユーザーエージェント、略称UA)をwebサイト側に開示することになっています。
つまり、このUser Agent(ユーザーエージェント、略称UA)からそのwebサイトの利用者の傾向も割り出せます。WindowsPCのユーザーが多い、スマホからの閲覧者が全体の何割、といったユーザー分析にも活用されます。
このUser Agent(ユーザーエージェント、略称UA)は、あえて便宜上、変更・偽装できます。なぜそのようなことをする必要があるのかというと、現在は閲覧する端末に合わせてwebサイトのデザインを用意していることが多いため、普通にwebサイトを閲覧するとその端末に合わせた画面にしかアクセスできません。
これは、User Agent(ユーザーエージェント、略称UA)を基に、webサイト側でその端末に合った画面に切り替えているためです。しかし、User Agent(ユーザーエージェント、略称UA)を変更・偽装することで、別の端末用の画面を閲覧できるのです。
アプリによってはPCとスマホの両方で閲覧できても、スマホの画面からしか使えない機能がある場合があります。こうした場合でも、User Agent(ユーザーエージェント、略称UA)を変更・偽装することで、PCからでもスマホの画面を表示させて操作することが可能です。
Chromeでは、付属のツールや拡張機能を使ってUser Agent(ユーザーエージェント、略称UA)を変更・偽装する方法が複数用意されています。以下、User Agent(ユーザーエージェント、略称UA)に関する情報や変更・偽装の方法について説明します。
UA(ユーザーエージェント)はWebサイトの構築に便利
User Agent(ユーザーエージェント)の変更・偽装の方法を知っておくと、自分がアクセスするWebサイトの構築に大変便利です。
例えばインスタグラムの場合は、普通にPCでWebサイトにアクセスした場合は閲覧しかできません。画像投稿する機能がPC用のwebサイトにはないのです。しかし、User Agent(ユーザーエージェント)の変更・偽装の方法を使って、PCでスマホ用の画面を表示できれば、PCから画像投稿が可能です。
また、webサイトの管理者にとってもUser Agent(ユーザーエージェント)の変更・偽装の方法を知っておくことは大切です。webサイトの実際の見え方・操作性は、webサイトを閲覧する端末環境によって左右されます。PCかスマホかという点だけでなく、OSやブラウザによっても違ってきます。
そうした点を踏まえ、自分のwebサイトの実際の見え方・操作性などを確認するために、自分ですべての端末環境を用意するのは大変な労力です。しかし、このUser Agent(ユーザーエージェント)の変更・偽装の方法を使えば、自分のPC上であらゆる端末環境を再現して、見え方・操作性を確認できます。
webサイトの開発者にとっては、User Agent(ユーザーエージェント)の変更・偽装の方法はさらに重要なスキルになります。webサイトの開発途中段階でそれぞれのOSやブラウザ、端末ごとの見え方・操作性を確認しながら開発を進めていくことで、作業の効率化や作品としてのwebサイトのクオリティを高めていくことが可能です。
レスポンシブルデザインを使ったWebサイト
端末に合わせたwebサイトデザインの傾向としてレスポンシブデザインというものがあります。これはwebサイトの運営は一元管理しながらも、webサイトの見せ方として、アクセスしてくる端末に合わせてデザインを切り替えて表示するという方式のことです。
このデザインの切り替えに利用されているのが、閲覧者がアクセスしてきたときに開示されるUser Agent(ユーザーエージェント)です。
レスポンシブルデザインは、主にスマホ対応としてGoogleも推奨している方式ですが、デメリットも少なからずあります。端末によってwebサイトのデザインは変わるので見やすくなりますが、そもそもPCで閲覧するwebサイトをスマホでも閲覧するということであり、webサイトの情報量が多く、スマホでは読み込みに時間がかかる場合があります。
各種デバイスの表示を確認
そうした点も踏まえて、webサイトの管理者にとって、レスポンシブルデザインを構築した後に実際のスマホからの見え方を確認することは重要なことです。User Agent(ユーザーエージェント)の変更・偽装の方法を使えば、PCでスマホからみたwebサイトの見え方を確認できます。
Twitterでの口コミ
Twitterの口コミ記事でも「PCからスマホのページを表示したい」という声が見受けられます。現在は、webサイトを閲覧できる端末の種類も増え、個人でPCやスマホなど、複数の端末を持つことも多いため、こうしたニーズが生まれているのかもしれません。
デベロッパーツールでChrome User Agentを偽装
Chromeにはデベロッパーツールという機能が付属しています。デベロッパーツールとは、Webサイトをデザインするときに使う「要素の検証機能」ツールです。具体的には、webサイトのHTMLなどを置き換えてテスト表示させたり、他のwebサイトの構造やコードなどを参考に閲覧したりできるツールです。
デベロッパーツールを使えば、User Agent(ユーザーエージェント)の変更・偽装によって、Chrome上でFirefoxやスマホの画面を表示させ、それぞれの画面サイズでの見え方を確認できます。
デベロッパーツールを開く
デベロッパーツールを開く手順を説明します。Chromeの画面右上の「設定アイコン」をクリックします。
開いたウインドウのメニューから「その他のツール」→「デベロッパーツール」をクリックします。
また、コマンドでデベロッパーツールを開く場合は、Windowsでは「F12」キー、もしくは「Control + Shift + I」を押します。Macでは「Control + Option + I」を押します。
デベロッパーツールでUAを変更する
デベロッパーツールが表示されるので、画面右上の「設定マーク」をクリックします。
開いたウインドウから「Setting」を選択します。
切り替わったウインドウ内の左側のメニューから「Devices」を選ぶと、端末の一覧が表示されます。この一覧の中から表示を確認したい端末を選んでチェックを入れます。ここでチェックの入った端末が、後述する「デバイスエミュレータ」で選択できる端末になります。
また、この画面で任意のUAを一覧に加えることもできます。「add custom device」をクリックすると入力欄が表示されるので、UAの名称と任意のUA(ユーザーエージェント文字列)を入力します。入力後に「Add」をクリックします。
ユーザー エージェント文字列とは、UAを識別するための文字列です。例えば、Firefox30.0であれば、「Mozilla/5.0 (Windows NT 6.1; WOW64; rv:30.0) Gecko/20100101 Firefox/30.0」というユーザー エージェント文字列が割り当てられています。
拡張機能User-Agent Switcher for Chromeを偽装
Chromeは、User Agent(ユーザーエージェント)を変更・偽装できる拡張機能として「User-Agent Switcher for Chrome」を用意しています。この拡張機能を使って、スマホや他のブラウザとしてUser Agentを偽装してwebサイトを閲覧できます。拡張機能なので使い勝手も良く便利な機能です。
Chromeの拡張機能は「Chromeウェブストア」で入手できます。Chromeの拡張機能はほとんどが無料ですが、中には有料の拡張機能もあります。「User-Agent Switcher for Chrome」は無料の拡張機能です。「Chromeウェブストア」で拡張機能名で検索することで、ダウンロードページを見つけられます。
User-Agent Switcher for Chromeをインストール
拡張機能「User-Agent Switcher for Chrome」のインストールの手順を説明します。まず、Chromeの新規画面の右上にある「アプリのアイコン」をクリックします。
切り替わった画面で「ウェブストア」をクリックします。
Chromeウェブストアの画面が表示されるので、検索枠で「User-Agent Switcher for Chrome」を検索します。
「User-Agent Switcher for Chrome」が見つかったらページを開いて画面右にある「Chromeに追加」をクリックしてインストールします。
User-Agent Switcher for ChromeでUAを変更する
拡張機能がインストールされると、Chrome画面上方のツールバーにアイコンが表示されます。アイコンをクリックするとメニューが開くので、UAを変更・偽装したいブラウザを選択すれば閲覧できます。用意されているブラウザは「Chrome、Internet Explorer、iOS、Android、Windows Phone、Firefox、Opera、Safari」になります。
「User-Agent Switcher for Chrome」でも任意のUAを入力できます。アイコンを右クリックして、表示されたウインドウから「オプション」を選びます。
入力画面が表示されるので、UAの名称と任意のUA(ユーザーエージェント文字列)を入力します。
デバイスエミュレータでChrome User Agentを偽装
Chromeは前述した「デベロッパーツール」内に搭載された、「デバイスエミュレータ」でUAを変更・偽装したwebサイトの閲覧が可能です。
スマホをエミュレータする
デベロッパーツールの画面を開いて、画面中央上になる「スマホマーク」をクリックします。
デバイスツールバーからデバイスを選択する
「スマホマーク」をクリックすると画面左上に「Responsive」と表示されたデバイスツールバーが表示されるのでタブをクリックします。開いたウインドウから、UAを変更・偽装したい端末を選択すれば閲覧できます。このウインドウの一覧は前述したデベロッパーツールの「Setting」→「Devices」で設定した端末です。
Network conditionsでChrome User Agentを偽装
他にデベロッパーツールを使った方法で、「Network conditions」という設定を使ってUAを変更・偽装して閲覧する方法があります。
Network conditionsを表示
デベロッパーツールの「設定マーク」をクリックし、「More tools」→「Network conditions」を選択します。
Network conditionsからUAを変更する
画面下方に「Network conditions」のウインドウが表示されます。デフォルトでは「Select automatically」にチェックが入っているので、これを外します。
チェックを外すとブラウザを選択できるようになるので、右端のタブをクリックします。
選択できるブラウザ一覧のウインドウが開くので、UAを変更・偽装したいブラウザを選択します。用意されたブラウザは「Android、BlackBerry、Chrome、Edge、Firefox、Googlebot、Internet Explorer、Opera、Safari、UC Browser」です。
また、ブラウザは選択せず、下の入力欄に任意のUA(ユーザーエージェント文字列)を入力することもできます。
設定が完了したら、画面左上の更新マークをクリックすれば、選択したブラウザで閲覧できます。
Chrome User Agentは機能性で選ぼう!
Chromeでは、User Agent(ユーザーエージェント)を変更・偽装してwebサイトを閲覧する方法が数種類用意されています。それぞれの方法に特長があるので、一度一通り体験してみて、自分のニーズに合った方法で閲覧しましょう。