GoogleChromeのUser Agentの変更方法!【デベロッパーツール、偽装、Webサイトの構築、拡張機能】

スポンサーリンク

ChomeのUser Agentを変更・偽装する方法とは?


User Agent(ユーザーエージェント、略称UA)とは、ウェブサイトを見るときに開示される、見ることしている端末の種類(パソコン、スマホタブレットなどの種類、あるいはiPhoneiPadなどの銘柄)やそのOSの種類(WindowsiOS)、アクセスしているブラウザ(Google ChromeMicrosoft EdgeFirefox)などのユーザー情報のことです。

私たちがwebサイトで見るたびに、そのwebサイトに対して自分自身自身の端末のこうしたユーザー情報をその都度、開示しています

丁度、他人の家に訪問するときに「どっちさまですか」と聞かれて「〇〇です」と答えることで信用されて家のドアを開けてもらえるようなイメージで、webサイトにアクセスするときは必ずこのUser Agent(ユーザーエージェント、略称UA)をwebサイト側に開示することになっています。

要するに、このUser Agent(ユーザーエージェント、略称UA)からそのwebサイトの利用者の傾向も割り出せます。Windowsパソコンのユーザーが多い、スマホからの見ること者が全体の何割、といったユーザー分析にも活用されます。

このUser Agent(ユーザーエージェント、略称UA)は、あえて便宜上、変更・偽装可能です。なぜそのようなことをする必要があるのかというと、現在は見る端末に合わせてwebサイトのデザインを用意していることが多いため、普通にwebサイトを見るとその端末に合わせた画面にしかアクセス可能でせん。

これは、User Agent(ユーザーエージェント、略称UA)を基に、webサイト側でその端末に合った画面に切り替えているためです。しかし、User Agent(ユーザーエージェント、略称UA)を変更・偽装することで、別の端末用の画面を見ること可能なのです。

アプリによってはパソコンとスマホの両方で見ることできても、スマホの画面からしか使えない機能がある場合があります。こうした場合でも、User Agent(ユーザーエージェント、略称UA)を変更・偽装することで、パソコンからでもスマホの画面を出して操作することが可能です。

Chromeでは、付属のツールや拡張機能を使用してUser Agent(ユーザーエージェント、略称UA)を変更・偽装する方法が複数用意されています。以下、User Agent(ユーザーエージェント、略称UA)に関する情報や変更・偽装の方法について説明します。

UA(ユーザーエージェント)はWebサイトの構築に便利


User Agent(ユーザーエージェント)の変更・偽装の方法を知っておくと、自分自身自身がアクセスするWebサイトの構築に大変便利です。

例えばインスタグラムの場合は、普通にパソコンでWebサイトにアクセスした場合は見ることしか可能でせん。画像投稿する機能がパソコン用のwebサイトにはないのです。しかし、User Agent(ユーザーエージェント)の変更・偽装の方法を使用して、パソコンでスマホ用の画面を表示できれば、パソコンから画像投稿が可能です。

また、webサイトの管理者にとってもUser Agent(ユーザーエージェント)の変更・偽装の方法を知っておくことは大事です。webサイトの実ときの見え方・操作性は、webサイトを見る端末環境によって左右されます。パソコンかスマホかという点以外にも、OSやブラウザによっても違ってきます。

そうした点を踏まえ、自分自身自身のwebサイトの実ときの見え方・操作性などをチェックするのでに、自分自身自身ですべての端末環境を用意するのは大変な労力です。しかし、このUser Agent(ユーザーエージェント)の変更・偽装の方法を使えば、自分自身自身のパソコン上であらゆる端末環境を再現して、見え方・操作性をチェック可能です。

webサイトの開発者にとっては、User Agent(ユーザーエージェント)の変更・偽装の方法はさらに重要なスキルになります。webサイトの開発途中段階でそれぞれのOSやブラウザ、端末ごとの見え方・操作性をチェックしながら開発を進めていくことで、作業の効率化や作品としてのwebサイトのクオリティを高めていくことが可能です。

端末に合わせたwebサイトデザインの傾向としてレスポンシブデザインというものがあります。これはwebサイトの運営は一元管理しながらも、webサイトの見せ方として、アクセスしてくる端末に合わせてデザインを切り替えて表示するという方式のことです。

このデザインの切り替えに使用されているのが、見ること者がアクセスしてきたときに開示されるUser Agent(ユーザーエージェント)です。

レスポンシブルデザインは、主にスマホ対応としてGoogleもおススメしている方式ですが、デメリットも少なからずあります。端末によってwebサイトのデザインは変わるので見やすくなりますが、そもそもパソコンで見るwebサイトをスマホでも見るということであり、webサイトの情報量が多く、スマホでは読み込みに時間がかかる場合があります。

そうした点も踏まえて、webサイトの管理者にとって、レスポンシブルデザインを構築した後に実ときのスマホからの見え方をチェックすることは重要なことです。User Agent(ユーザーエージェント)の変更・偽装の方法を使えば、パソコンでスマホからみたwebサイトの見え方をチェック可能です。

ツイッターの口コミ記事でも「パソコンからスマホのページを表示したい」という声が見受けられます。現在は、webサイトを見ること可能な端末の種類も増え、個人でパソコンやスマホなど、複数の端末を持つことも多いため、こうしたニーズが生まれているのかもしれません。

デベロッパーツールでChrome User Agentを偽装


Chromeにはデベロッパーツールという機能が付属しています。デベロッパーツールとは、Webサイトをデザインするときに使う「要素の検証機能」ツールです。具体的には、webサイトのHTMLなどを置き換えてテスト出したり、他のwebサイトの構造やコードなどを参考に見ることしたり可能なツールです。

デベロッパーツールを使えば、User Agent(ユーザーエージェント)の変更・偽装によって、Chrome上でFirefoxスマホの画面を出し、それぞれの画面サイズでの見え方をチェック可能です。

デベロッパーツールを開く


デベロッパーツールを開く手順を説明します。Chromeの画面右上の「設定アイコン」を押します。

開いたウインドウのメニューから「その他のツール」→「デベロッパーツール」を押します。

また、コマンドでデベロッパーツールを開く場合は、Windowsでは「F12」キー、もしくは「Control + Shift + I」を押します。Macでは「Control + Option + I」を押します。

デベロッパーツールが表示されるので、画面右上の「設定マーク」を押します。

開いたウインドウから「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に追加」を押してダウンロードします。

拡張機能がダウンロードされると、Chrome画面上方のツールバーにアイコンが表示されます。

アイコンをクリックするとメニューが開くので、UAを変更・偽装したいブラウザを選択すれば見ること可能です。

用意されているブラウザは「ChromeInternet ExploreriOSAndroidWindows Phone、FirefoxOperaSafari」になります。

「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」のウインドウが表示されます。デフォルトでは「Select automatically」にチェックが入っているので、これを外します。

チェックを外すとブラウザを選択可能なようになるので、右端のタブを押します。

選択可能なブラウザ一覧のウインドウが開くので、UAを変更・偽装したいブラウザを選びます。用意されたブラウザは「AndroidBlackBerryChrome、Edge、Firefox、Googlebot、Internet ExplorerOperaSafari、UC Browser」です。

また、ブラウザは選択せず、下の記入欄に任意のUA(ユーザーエージェント文字列)を記入することも可能です。

設定が終了したら、画面左上の更新マークをクリックすれば、選びたブラウザで見ること可能です。

まとめ

Chromeでは、User Agent(ユーザーエージェント)を変更・偽装してwebサイトを見る方法が数種類用意されています。それぞれの方法に特長があるので、1回一通り体験してみて、自分自身のニーズに合った方法で見ることしましょう。