Chromeを使ってユーザーエージェント（通称：UA）を偽装する方法です。
ユーザーエージェントの偽装には、専用の拡張機能（アドオン）類が必要と思われがちですが、Chromeのデベロッパーツールを使えばそれらは一切不要です。
好きなユーザーエージェントに簡単に変更できるので、サイトのデバッグ時などにお役立て下さい。
UA偽装は各ブラウザで可能ですが、この記事ではChromeを例にします。
この記事の目次
Chromeでユーザーエージェントを偽装する
以前ChatGPTのアクセスを確認したい時があり、その時にこのUA偽装が役に立ったので記事にします。
Webサイトを制作しているとUAを変更してサイトを確認したい時が来ます。
- UAを偽装したい
- BOTのアクセスを確認したい
- iPadなどOSのバージョンでUAが異なる端末をテストしたい
などなど...
一昔前はUAの偽装は面倒だったのですが、今のブラウザなら簡単にできます。
一応Google ChromeにはPC、スマホ、タブレットを切り替えてサイトを確認できる「デバイスツールバー」というものが付いているのですが、プリセットがあらかじめ決まっているので、特にユーザーエージェントを変更して使うには向きません。
そんな時は、Chromeのデベロッパーツール（開発者ツール）のUAをオーバーライドできる機能を使いましょう。元々ブラウザに入っている機能なので、アドオンなどは不要です。また、任意の文字列をUAに指定することもできるので便利です。
Edge,FireFoxでも同様にUAを偽装することが出来ますが、今回はChromeで解説。
デベロッパーツールでUAを変更する方法
Chromeでユーザーエージェント（UA）を偽装するには、デベロッパーツールにある「ネットワーク状態（Network conditions）」を使います。
使い方は以下の通り。
まずは右クリックし、その中の「検証」を押してデベロッパーツールを起動します。
（キーボードのF12でも起動可能）
「メニュー＞その他のツール＞ネットワーク状態」に進む
続いて、デベロッパーツール画面の右上あたりにあるメニュー（）を開き、その他のツールから「ネットワーク状態」に進みましょう。
ネットワーク状態（Network conditions）が開いたらユーザーエージェントの項目で
ブラウザのデフォルトを使用
のチェックを外し、その下にあるフォームに自分が使いたいユーザーエージェントを入力するだけです。
今回は自分が使っているiPhoneのユーザーエージェントを入力してみました。
UAが変更できているか確認する
UAを変更できたら、早速変更できているか確認してみます。
今回はローカルに建てたサーバーに以下のphpを配置して確認してみました。
ua-test.php
<?php
echo $_SERVER['HTTP_USER_AGENT'];
?>
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36
ユーザーエージェントの変更前はこの通り、パソコンのUAが出ています。
UAを先ほどの方法で変更してからページをリロードしてみると...
Mozilla/5.0 (iPhone; CPU iPhone OS 17_3_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.3.1 Mobile/15E148 Safari/604.1
バッチリiPhoneのユーザーエージェントが返ってきました～！
それだけのことです。超簡単でしたね・ｗ・
ユーザーエージェント変更時のポイントなど
内容はすごく簡単だったので、使ってみた時の補足なども書いておきます。
まず、ユーザーエージェントの変更タイミングですが、これはお察しの通りUAを変更した時点で反映されているっぽいです。Chromeの再起動も必要ありませんでした。
ただし、UAはphpなどで返してくる場合が多いのでページのリロードは必要です。
そして今回使った「ネットワーク状態（Network conditions）」ですが、他の機能と同じくユーザーエージェントはChromeのデベロッパーツールが起動している状態でしか変更されません。閉じるとデフォルトのUAに戻ります。
どうやらデベロッパーツールを閉じた時点で、
ブラウザのデフォルトを使用
に自動的にチェックが入るようです。
入力したUAは保持される
入力したユーザーエージェントは保持されるので、次に起動した時はチェックを外すだけですぐに使える状態になっていました。
仕組みはあくまでもUAの上書き
UAを変更する仕組みは、デバッグプロトコルの「setUserAgentOverride」メゾットでユーザーエージェントを上書きしているらしいです。
今回のようにユーザーエージェントの文字列だけを変更して、偽装してデバッグするにはもってこいの機能です。
しかし、実機に近い環境でデバッグを行いたいなら拡張機能を使う方が良いです。
そのあたりは以下の拡張機能がお勧めなので最後に紹介しておきます。
外部リンク
【Chrome ウェブストア】
モバイルシミュレーター-レスポンシブテストツール
「モバイルシミュレーター-レスポンシブテストツール」の起動画面
Javascriptのイベントなどを確認するときは出来れば実機が良いのですが、
Windows,Mac,iPhone,Android,iPad…を揃えるのは現実的にキツイですね( ;∀;)
UA偽装はデベロッパーツール。イベント確認はシュミュレーターを使いましょう！
まとめ
以上、Chromeでユーザーエージェントを偽装（変更）する方法でした。
今回紹介した機能は目新しいものではなく、どうもChrome 17（2012/2/8リリース）の時点で実装されていたそうです。そんな前からあったのか！
ユーザーエージェントの偽装（UA偽装）って何だか悪い響きがするのですが...
UA自体ユーザーで自由に設定できる物なので気にしなでおきましょう。
ではではこのへんで・ｗ・
iPadのUA、特にMacintoshだけはキャッシュ作成に難儀するので許さん！！！
