Firefoxのユーザーエージェント切替えによるスマホサイト表示

スマートフォンサイトのデバッグをする際、Firefoxのユーザーエージェント切替えを使って、開発PC上で表示確認する方法を解説します。

【記事執筆時の環境】
Windows 7 Professional 32bit SP1
Mozilla Firefox 27.0.1
User Agent Switcher 0.7.3

User Agent Switcherを追加する

Firefoxでユーザーエージェントを切り替えるには、アドオン「User Agent Switcher」を使います。

Firefoxを起動し、メニューから、
[ツール]-[Web 開発]-[その他のツールを入手]を選択します。
メニューバーが表示されていない場合は、左上のFirefoxメニューからも選択できます。

あるいは、下記URLをアドレスバーに入力して直接サイトにアクセスしてください。
https://addons.mozilla.org/ja/firefox/collections/mozilla/webdeveloper/

Web Developer's Toolbox

User Agent Switcherの、[Firefoxへ追加]をクリックします。

User Agent Switcher追加

下記ダイアログが表示されますので、[今すぐインストール]をクリックします。

User Agent Switcherインストール画面

アドオンは、Firefoxを再起動してインストールされますので、[今すぐ再起動]をクリックします。

Firefoxを再起動

User Agent Switcherが追加され、アドオンアイコンが表示されます。

アドオンアイコンの表示

次に、下記ページにアクセスして最新のユーザーエージェントリスト(xmlファイル)をインポートします。
http://techpatterns.com/forums/about304.html

[Download via Save As File Dialogue]をクリックしてファイルをダウンロードするか、右クリックで[名前をつけてリンク先を保存]を選択します。

ユーザーエージェントリストダウンロード画面

ファイルをダウンロードしたら、User Agent Switcherアドオンのアイコンをクリックして、[Edit User Agents]を選択します。

下記ウィンドウが表示されますので、[Import]をクリックします。

ユーザーエージェントリストのインポート画面

ファイル指定のダイアログで先ほどダウンロードしたxmlファイルを指定したら、OKをクリックします。

メニューから、[UA List :: About]をクリックすると、ユーザーエージェントリストが最新になっていることがわかります。

ユーザーエージェントリストバージョンの表示

ユーザーエージェントを切り替える

例えば、「iOS 3.0」に切り替えてみます。

User Agent Switcherアドオンのアイコンをクリックして、
[Mobile Devices]-[OS]-[iOS]-[iOS 3.0 - iPhone - Safari 528.16]を選択します。
※メニューの構成はユーザーエージェントリストのバージョンによって若干異なります。

ユーザーエージェントの選択

動作を確認してみるために、例えば日本経済新聞のURL「http://www.nikkei.com/」をアドレスバーに入力してみます。
モバイルサイトのURL「http://mw.nikkei.com/sp/#!/」にリダイレクトされサイト表示はモバイル用になっていますので、ユーザーエージェント切替えが正しく動作していることがわかります。

モバイルサイト画面

スポンサーリンク

ページの先頭へ