みなさんはChromeでUA偽装、要するにユーザーエージェント(useragent)を変更したいと思ったことはないでしょうか?
UA偽装するパターンとしてはやはり開発時のデバッグが一番多いのではないかと思います。
偽装という言葉がついているので、何か悪い事をしている感じに聞こえますが、UA偽装をして開発機で他のブラウザやスマホやガラケーのユーザーエージェント(useragent)での挙動をチェックするときにはとても便利な方法となります。
ここではChromeでUA偽装する方法をご解説します。ユーザーエージェント(useragent)を変更する方法を把握して、ぜひ開発に役立てましょう。
ユーザーエージェント(useragent)変更方法
ChromeでUA偽装をする方法はいくつかありますので、ご説明していきます。
デベロッパーツールを使用する
Chromeに付属されているデベロッパーツールを利用してUA偽装することが可能です。まず最初はデベロッパーツールを開きましょう。
「Mac」
Command + Option + I
「Windows」
Ctrl + Shift + I
のショートカットでデベロッパーツールを開くことが可能です。
デベロッパーツールが開いたら、右側のメニューを押します。
メニューが開いたら、「More tools」を選び、「Network conditions」を押します。
デベロッパーツールの下部にNetwork conditionsの設定画面が表示されるかと思います。
「User Agent」の項目で「Select automatically」のチェックを外しましょう。
「Custom、、」となっている箇所をクリックすると、UAの選択肢が表示されます。ここで自分自身が偽装したいUAに切り替えましょう。
UAは大体揃っていますが、ガラケーのUAなどで偽装したいUAが無い場合は「Custom」を押して、偽装したいUAを記入する形になります。
これでユーザーエージェントが変更された状態になります。この状態で下記の「UAのチェック」のサイトにアクセスしましょう。
ApricoのUAチェックサイト
上記サイトにアクセスすると、このようにプラットフォームやブラウザの種類、バージョン・UAなどがチェック可能です。
ここではInternet ExplorerにUA偽装しましたがちゃんとと出来ているようです。
また元に戻す方法ですが、「Select Automatically」にチェックを入れると元のUAに切り替わります。
拡張機能を使用する
「User-Agent Switcher for Chrome」という拡張機能を使うことでもUAの切り替えが便利になります。デベロッパーツールでも十分という人は入れなくても大丈夫ですが、デベロッパーツールを開かなくても使用可能なので、より手軽に使用可能な利点はあるかなと思います。
「User-Agent Switcher for Chrome」は下記からダウンロードが可能です。
chrome.google.com
User-Agent Switcher for Chromeをダウンロードすると、ChromeのメニューにUser-Agent Switcher for Chromeのアイコンが追加されます。
クリックすると、UA偽装する、対象のブラウザとブラウザをクリックするとそのバージョンが表示されます。例としてここではIE6を選んでみます。
もちろんiOS、Androidなどスマホのユーザーエージェントも用意されていますので、必要に応じて使用しましょう。
ただしガラケーなど用意されたUA以外のユーザーエージェントが必要になった場合は先に解説したデベロッパーツールの方法を使用するようにしましょう。
IE6で再度UAのチェックをしてみると確かにIE6になっています。
UA偽装した後は、User-Agent Switcher for Chromeを再度開きUAを元に戻すことを忘れないようにしましょう。