はじめに
Web開発をしていると、
スマホ表示になっているか確認したい
特定のクローラー向けの挙動を確認したい
APIやサーバー側の分岐をテストしたい
といった場面に遭遇します。
そんなときに便利なのが User-Agent Switcher です。
https://chromewebstore.google.com/detail/user-agent-switcher-for-c/djflhoibgkdhkhhcedjiklpkjnoahfmg?hl=ja
本記事では、User-Agentの活用方法を記載しております。
User-Agentとは？
User-Agentとは、ブラウザやデバイスの情報をサーバーに伝える文字列のことです。
例えば、以下のような情報が含まれます。
ブラウザ（Chrome / Safari など）
OS（Mac / Windows / iOS / Android）
デバイス（スマホ / PC）
例：
Mozilla/5.0 (iPhone; CPU iPhone OS 15_0 like Mac OS X)
AppleWebKit/605.1.15 (KHTML, like Gecko)
Version/15.0 Mobile/15E148 Safari/604.1
User-Agent Switcherとは？
User-Agent Switcherは、ブラウザのUser-Agentを任意のものに変更できるツール（拡張機能）です。
これを使うことで、実際の端末を用意しなくても
スマホとしてアクセス
特定のブラウザとしてアクセス
クローラーとしてアクセス
が可能になります。
何ができるのか？
① スマホ表示の確認
レスポンシブ対応の確認だけでなく、
サーバー側でUser-Agent判定している場合の挙動確認ができます。
② SEO・クローラー対策の検証
例えば以下のようなケース：
Googlebotだけに出し分けしているページ
クローラー用のHTMLが正しいか確認
User-Agentをクローラーに変更することで検証できます。
例：
Googlebot/2.1 (http://www.google.com/bot.html)
③ 不具合調査
特定の環境だけで起きるバグの再現にも使えます。
iPhoneだけで発生するレイアウト崩れ
特定ブラウザのみのエラー
などの再現性確認に便利です。
実際の使い方（Chrome拡張）
手順
１：Chromeウェブストアから拡張機能を追加
２：拡張機能アイコンをクリック
３：任意のUser-Agentを選択
４：カスタムUser-Agentの設定
自分で追加することも可能です。
例：
Mozilla/5.0 (Linux; Android 13; Pixel 7)
AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/120.0.0.0 Mobile Safari/537.36
注意点（重要）
① 完全な再現ではない
User-Agentを変えても、
画面サイズ
実際の端末挙動
JSの細かい差異
までは完全に再現できません。
→ あくまで「簡易検証ツール」
② robots.txt対策には使えない
User-Agentは簡単に偽装可能です。
そのため：
robots.txt
bot制御
はUser-Agentだけでは防げません。
（→ IP制限やWAFが必要）
③ セキュリティ用途には不向き
User-Agentは信頼できる情報ではないため、
認証
アクセス制御
には使うべきではありません。
実務での使いどころまとめ
フロントの表示確認
SEO検証（クローラー確認）
バグ再現
APIレスポンスの分岐確認
→「軽く試す・再現する」用途に最適
まとめ
User-Agent Switcherは、
環境再現を手軽にする
検証スピードを上げる
SEOやバグ調査に役立つ
といった、便利なツールです。
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！