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/#!/」にリダイレクトされサイト表示はモバイル用になっていますので、ユーザーエージェント切替えが正しく動作していることがわかります。

モバイルサイト画面

スポンサーリンク

特集記事

  • WordPress Image

    WordPress の基礎から応用まで
    Webサイト制作ツールとして圧倒的な人気を誇るWordPress。利用するにあたって必要な知識を体系的にまとめた記事です。
  • jQuery Mobile Image

    jQuery Mobile を基本から覚える
    スマホサイト制作に最適なフレームワークの利用方法を解説。DEMOページ・サンプルコードで動作を確認できます。

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ