名前:ドレッド
1979年7月29日生まれ。立命館大学理工学部出身。
奈良県にある社会福祉法人にてフロントエンドエンジニアしてます。
WordPressの構築やコーディングが主な仕事です。
マラソン、写真撮影、英語が趣味です。
いろいろなブラウザでUserAgentを偽装する方法
2014年11月時点での最新の各ブラウザでのUserAgentの変更方法をまとめた記事をアップロードしました。
いろいろなブラウザでUserAgentを偽装する方法(2014年11月版)
↑のリンク先が最新の情報になります。以下の記事の内容は1年以上過去の情報となります。
少し更新の間隔が空いてしまいました。12月ということでいろいろとバタバタしていたのですよ。明後日も忘年会だしなー。
さて、タイトルの件ですが、最近スマホサイトの構築の勉強をしています。UserAgentを判別することでPC版とスマホ版でデザインを切り替えるという機能が必要になりました。動作確認の手間を減らすために、PC版のいろいろなブラウザのUserAgentを偽装することで、てっとり早く確認しようと思い、いろいろ調べてみました。
ちなみにUserAgent(ユーザーエージェント)とは何ぞや、というと、これはブラウザやスマートフォンの種類を表示する環境変数のことです。パソコンやスマホからインターネット上のページを見ると、陰でこっそりと「環境変数」という情報をページの存在するサーバーに送信しています。ちまたで見かけるGoogle Analyticsのようなアクセス解析ソフトで集計しているデータも、その環境変数という情報を収集しているんですよ。環境変数には皆さんがインターネットを見るのに使っているパソコンの「IPアドレス」とか、どのページのリンクからジャンプしてきたのかという情報を表す「リファラー」など、いろいろな物があります。そのうちの一つが「UserAgent(ユーザーエージェント)」です。
このUserAgentという環境変数は、実は結構簡単に偽装できてしまいます。本当はGoogle Chromeを使っているのに
「IEを使ってアクセスしてますっ!(キリ」
みたいな事ができます。
この機能を使うとスマートフォンオンリーのページがパソコンで見れちゃうかも・・・! みたいな状況も考えられます。ただし、UserAgentが簡単に偽装可能ということは、Web制作業界では20世紀から伝わる常識なので、ヤバいことはUserAgentを偽装するだけではできないと思います。
さて、本題のUserAgentの偽装の方法について説明します。
ここでは、以下の3つのブラウザについての偽装の方法を紹介します。
・Google Chrome
・Safari
・Internet Explorer
それではまずGoogle Chromeからです。
Google Chromeを立ち上げて右上にある「Google Chromeの設定」ボタンを押します。
そのまま「ツール」→「デベロッパーツール」のメニューをクリックします。
クリックするとブラウザの下部に小さなウィンドウとメニューのアイコンがずらずらと表示されます。
その箇所の一番右下の「setting」ボタンをクリックします。
英語表示ですがデベロッパーツールの設定画面が表示されます。
ここで「Enable」と「User Agent」の2つのチェックボックスにチェックをいれます。
そうすると少し下にあるコンボボックスからUserAgentが選択できるようになります。
ずらずらっとブラウザ名やらスマホ名やらがでてきますね。
これで好きなUserAgentを設定することが可能になります。
それでは次にSafariでのUserAgentの設定方法を紹介します。
SafariでUserAgentを偽装するにはブラウザに「開発」というメニューを表示させる必要があります。
画像のようにSafariの設定画面を表示させます。
設定画面の「詳細」タブを選択し、「メニューバーに開発メニューを表示」にチェックを入れます。
そうすると、Safariのメニューバーに「開発」というメニューが表示されるようになります。
「開発」→「ユーザーエージェント」から好きなUserAgentが選択できるようになります。
最後にInternet ExplorerでのUserAgent変更方法を紹介します。
Internet Explorerを立ち上げてキーボードの「F12」を押します。
そうすると「F12開発ツール」と呼ばれるウィンドウが表示されます。
F12開発ツールの「ツール」→「ユーザーエージェント文字列の変更」から好きなUserAgentを選択することが可能です。
以上3つのブラウザについてUserAgentの偽装方法でした。