PCブラウザで携帯サイトのテストをする

PCブラウザを使ってテストする

　前回（http://www.thinkit.co.jp/article/142/1/）は、携帯テストを行う上でのポイントを見てきました。今回は、携帯サイトのテストをPCのWebブラウザを使って行う方法について紹介します。

　携帯サイトは携帯キャリアによる仕様が違うといえども、基本的には一部を除きHTMLやXHTMLを利用しているWebサイトには違いありません。そのため通常のブラウザでPC向けのWebサイトと同じように表示することができます。そのため一般的な画面が表示できるかのテストはPCブラウザで行うことができます。

　また、PCブラウザは携帯端末ではできないテストも行うことができます。それは「ソースコードのチェック」や「HTTPの通信ログ」の確認などです。通常のPCブラウザでは表示されているHTMLのソースコードを見ることが簡単にできますが、携帯端末ではソースコードを見ることができません。そのため「タグが正しく出力されているか？」など細かいチェックをするにはPCブラウザでしか確認することはできません。それ以外にもHTTPのリクエストやレスポンス情報と言った詳細な内容を見ることができるのも特徴です。

そのため携帯でテストをする前に、PCブラウザで細かくチェックしていくことは非常に有効な手段となります。利用するPCブラウザは何でも良いのですが、便利なアドオンが多く用意されているMozilla Firefox（http://mozilla.jp/firefox/）がオススメです。以降では携帯サイトのテストをする際に便利なアドオンとその使い方を中心にご紹介していきます。

携帯からアクセスしているように見せかける

　FireFoxを使って携帯サイトのテストする際に、最初に入れたいアドオンが「User Agent Switcher（https://addons.mozilla.org/ja/firefox/addon/59）」です。これはユーザーエージェントを自由に切り替えることができる便利なアドオンです。

　携帯サイトの構築で必要となる大きな情報として「キャリア／機種情報」があります。前回にも紹介したとおり、携帯サイトの見え方や挙動はキャリアや機種によって変わってしまうため、アクセスしてきた端末情報を元に動的に出力するデータなどを変更する必要があります。

　そのアクセスしてきた携帯端末の「キャリア／機種情報」の情報が書き込まれているのが、ユーザーエージェントになります。PCブラウザであるFireFox 2のユーザーエージェントの場合「Mozilla/5.0 (Windows; U; Windows NT 5.1; ja; rv:1.8.1.16) Gecko/20080702 Firefox/2.0.0.16」といった表記になっています。これを携帯特有の文字列に書き換えることによって、あたかも携帯の特定の機種からアクセスしているように見せかけることができます。携帯のユーザーエージェントには次のようなものがあります。

・docomo F905i「DoCoMo/2.0 F906i(c100;TB;W24H12)」
・au W51SA「KDDI-SA39 UP.Browser/6.2.0.7.3.129 (GUI) MMP/2.0」
・SoftBank 911T「KDDI-SA39 UP.Browser/6.2.0.7.3.129 (GUI) MMP/2.0」

　こういった携帯のユーザーエージェントを自由に追加することができ、瞬時に切り替えることができるアドオンが「User Agent Switcher（https://addons.mozilla.org/ja/firefox/addon/59）」になります。テストをする前に携帯サイトで対象になっているキャリアや端末のユーザーエージェントを登録しておき、切り替えながら正しい動作をしているかを簡単にチェックしていくことができます。また、ユーザーエージェントはキャリアの開発者向けサイトなどに記載されています。

　次は、携帯でしか持っていない端末固有の情報をFireFox上に持たせてテストする方法を紹介していきます。