![[Ď] WebDirector Memo](http://directormemo.sub.jp/wp-content/uploads/2016/04/logo4.jpg){kind=logo}
[Ď] Firefoxのプラグイン「User Agent Switcher」を使って、ユーザーエージェントを変更する方法
お疲れ様です。@Micchy_R
ユーザーエージェント(以降UA)によって判定しているプログラムが実装されている場合、実機での検証はなかなか出来ないものです。
特にレスポンシブWebデザインなどを採用していると、UAによって表示/非表示にしたり、CSSを変更したりなど、様々な検証が必要になってきます。
そもそもUAとは？
ユーザーエージェントとは、Webサイトへのアクセスの際に使用されるプログラムのことである。
HTMLを解釈して画像化し、Webサイトとしてディスプレイに映し出すためのレンダリングを行い、ディスプレイに画像・文字などを表示するためのWebブラウザや、検索用データベースを作成するためにWebサイトを巡回するクローラ、利用しているOSなども、ユーザーエージェントに含まれる。携帯電話向けサイトを閲覧する場合にも、この用語が使われる。
HTTPではリクエスト中に、クライアント側から使用しているWebブラウザ、バージョンなどの情報を申告する。アクセス解析ツールにおいて、Webサイトにアクセスしたユーザーのブラウザが分かってしまうのはこのためである。ただ、あくまでクライアント側からの自己申告の情報であるため、文字列を書き換えることにより、これを偽装することも可能である。
Weblio辞書より引用
ここでも書いてあるとおり、UAを偽装してPCのみで検証するアドオンがあるので、今回紹介したいと思います。
User Agent Switcher
UAを偽装することによって、あたかもそのデバイスを使用して閲覧している環境を作り出すことができます。
Firefoxからアドオンから「User Agent Switcher」を検索します。
右側の「インストール」ボタンからインストールを実行します。
インストールが完了すると、Firefoxを再起動することになります。
↑ あらかじめ、他に何も作業していない状態にしておく方が良いです。
メニューバーから[ツール]-[Default User Agent] というメニューが追加されています。
辿っていくと、少ないですが、いくつかのUAが追加されているのが分かります。
この状態でも使えないことはないのですが、デバイスの数が足りなすぎます。。。
データが古すぎて、今の実機検証とかけ離れてますね。
ですので、ここから新たに追加していきます。
個別に追加するのはかなり面倒なので、xml形式のファイルで追加できるようになっています。
で、そのxml形式のファイルを提供してくださっているサイトが以下になります。
我流天性 がらくた屋
以下のURLにアクセスします。
http://blog.cgfm.jp/garyu/archives/2357
わりと最初の方にzipファイルのダウンロードがあるので、ローカルに保存して解凍しておきます。
メニューバーから[ツール]-[Default User Agent]-[User Agent Switcher]-[Options...]と辿りクリックすると、次のようなオプション画面が表示されます。
左下の「Import」ボタンをクリックして、先ほど解凍しておいたxmlファイルを指定します。
すると、先ほどは少量でしたが、かなりのボリュームが増えてるのが分かります。
試しに、UAを「iPhone (Safari / iOS7)」にして、Googleから「Yahoo」と検索してみました。
上がデフォルト(=UAはFirefox)での結果、下は、iPhone(Safari / iOS7)での結果です。
UAがiPhone (Safari /iOS7)だと、表示が違っているのが見て分かると思います。
このような感じで、UAを偽装しての検証が出来るようになりました。
実機ではないので、デバイス固有のエラーなど、細かいところまでは再現されないと思いますが、試しに使ってみてはいかがでしょうか？
By Micchy_R
