モバイルサイトをPCで見るためのツールやFirefoxアドオン
（http://blog.livedoor.jp/ld_directors/archives/51079649.html より）
Web サーバは一般的に2つの方法でアクセスがモバイルからかどうかを判定します。1つはアクセス元のIP、そしてもう1つは HTTP ヘッダ中にある User-Agent です。そのため、携帯キャリアのゲートウェイ経由からのアクセスのみ閲覧を認めるサイト(つまりアクセス元の IP で閲覧制限するサイト)を除けば、モバイルコンテンツはPCから閲覧できます。User-Agent は申告制のため、PC からのアクセスでもモバイルブラウザーのUser-Agent に偽装することが可能だからです。
HTTP リクエストの User-Agent を変えたり、HTTP レスポンスを処理する方法は大きく
１．モバイルシミュレータを使う方法
２．(InternetExplorer や Firefox のような)汎用の Web ブラウザ＋プロキシを使う方法
３．ブラウザそのものの機能やアドオンやプラグインを使う方法
の3つの方法がありますので、順に紹介します。
【01】モバイルシミュレータを使う方法
モバイルのシミュレータは携帯キャリア各社のサイトからダウンロードができます。それぞれの詳細は『携帯シミュレータ入門』で紹介されていますので、こちらをご覧ください。
また、現在は有償ですがネットファームさんから高機能なシミュレータ『P1 Emulator～ケータイマルチキャリア高機能テスター』も出ていますね。
これらはモバイルに特化していますので、お手軽に絵文字の表示など文字通り忠実に再現を行い、また仕様に照らし合わせた構文チェックなどもしてくれるところが便利です。ただ、使用できるOSは現在のところ Windows のみです。
個人的には、iモード HTML シミュレータIIの全体画面をキャプチャする機能が資料作成の際に便利なので重宝しています。
【02】汎用のWebブラウザ＋プロキシを使う方法
HTTP リクエストやレスポンスの変換処理をプロキシに任せる方法です。プロキシが全てやってくれるので、汎用の Web ブラウザを表示に使えるのが利点です。
この方法には、モバイル専用のプロキシサーバを立てる方法と、自分のPC内にプロキシを立てる方法があります。ライブドアでは、社内で独自のモバイルプロキシサーバを立てています。ポート別に User-Agent やサブスクライバID を設定しておくことで、機種別での細かい挙動の差を見ることができます。モバイル関係の企業にはこのような専用プロキシがあることが多いのではないでしょうか。ただ、別途サーバが必要のため、個人ユースには向きません。
その場合には、Windows 上で動作するローカルプロキシソフトウェアである『Proxomitron』が利用できます。Proxomitron は非常に高機能で便利ですが、モバイルに特化したプロキシーではないので、モバイル向け設定を各自で行う必要があり、その分使いこなすのには時間が掛かるかもしれません。『パソコン遊戯』さんの『Proxomitron 入門』に詳しくインストールから使い方まで載っています。後ほど Proxyomitron を使用した例をご紹介します。
プロキシを使用した方法は、モバイルシミュレータと違って絵文字の表示はできませんが、どうしても絵文字を表示したい場合には、携帯電話用絵文字を Windows 外字ファイルとして登録するという方法があります。
詳しくは、
・伝伝ＰＣ倶楽部
・けーたい絵文字
・i-mode絵文字対応外字データ
などのサイトが参考になると思います。
プロキシを使う方法は使用するブラウザを選びませんので、自分の使い慣れたブラウザを使えて便利です。
【03】ブラウザそのものの機能やアドオン/プラグインを使う方法
最後はブラウザそのものの機能やアドオン/プラグインを使う方法です。
できる/できないはブラウザに依存しますが、IE, Firefox, Opera, Safari, Sleipnir, Lunascape には User-Agent を変更する方法があるので、殆どのブラウザでこの方法を取ることができるようです。
以下では様々なプラットフォームで利用することができ、アドオンの充実しているFirefoxでの方法を紹介したいと思います。(以前のディレクターズブログ『仕事を加速する FireFox アドオン』)でも書いていますように、ウェブ制作の現場では、私もFirefoxをオススメしたいと思います)
※http://firemobilesimulator.org/ FIREFOXのモバイルシミュレーター。こちらを使えば、携帯端末ごとの表示シミュレーションもできる。現状、これと、Ｕｓｅｒ アｇｅｎｔSwitcherをしようするとテストは便利。
User-Agentを変えるのには、HTTP リクエストヘッダを変更する『Modify Headers』アドオンを利用してもいいですが、User-Agentを簡単に切り替えられる『User Agent Switcher』アドオンを利用する方が楽にできますのでオススメです。携帯用のUser-Agentは、『我流天性 – がらくた屋』さんのサイトで『User Agent Switcher の携帯用のXML』を公開して下さっているので、それをimportするといいでしょう。
「Modify Headers」では、User-Agent だけではなく、HTTP ヘッダ全般を書き換えることができますので、端末 ID の設定など他の応用も可能です。『端末IDを設定でき、ケータイサイトの開発に便利な Firefox アドオン「Modify Headers」』でその方法が紹介されています。
【04】User-Agentを偽装しても、XML パースエラーでページが表示できない場合について
例えば、『http://mobile.nifty.com/i/index.xhtml(http://mobile.nifty.com/i/index.xhtml)』や『モバイルgoo(http://mobile.goo.ne.jp/)』のように、User-Agentを偽装してもFirefoxで閲覧しようとすると、以下のようなパースエラーでページが表示できないことがあります。
HTTP レスポンスヘッダの Content-Type が application/xhtml+xml の場合には、Firefox は XML 整形式のチェックを行うため、モバイルページ自体は HTML で書かれているサイトでは、整形式になっていないと判定し、今回のような XML パースエラーを起こすようです。
正統的な方法ではありませんが、これを強引でも表示させる方法として、レスポンスの Content-Type を text/html に変えて上記パースエラーを回避することができます。先ほど紹介した Proxomitron を使ってやってみましょう。
まず、「フィルタの編集」の「ヘッダ」を押して、「オプション」の「新規」を押します。
次に、ヘッダ値のマッチと置換するテキストをセットします。
最後に「In」にチェックを入れれば完了です。
proxomitron のプロキシを有効にすると、閲覧できるようになります。プロキシの設定には、切り替えを簡単に行えるアドオン『SwitchProxy Tool』が便利です。
SwitchProxy Toolアドオンのプロキシの設定画面と内容
SwitchProxy Toolアドオンのプロキシ設定の切り替え画面
また、実際にContent-Typeがtext/htmlになっているかをHTTPヘッダ情報を確認する『Live HTTP Headers』アドオンで確認してみましょう。
ちゃんと Content-Type が変わっていることが確認できました。
【05】最後に
上記の方法でPC上でモバイルサイトを見ていても、最後は実機で確認したい！ということになります。そのような時、今まではメールでURLを送っていましたが、Firefoxアドオンの『Mobile Barcoder』を使うと現在表示しているURLのQRコードを表示できるので、メール送信が不要になり便利です。以前はURLが長いと表示できないという問題がありましたが、バージョンアップして問題なく使えるようになりました。
ステータスバーの右下の Barcode 部分にカーソルを載せるとQRコードがポップアップします。これを携帯の QR コードリーダーで読み取りましょう。
以上、PC でモバイルサイトを見る方法を書いてきました。全てを端末からチェックするのは膨大な時間が掛かりますので、開発の場合には、最初は PC を使って効率的にデバッグを行い、最後に実機で最終確認をするという方法がよく用いられると思います。その中で、状況やニーズに合わせて3つの方法をうまく使い分けられればいいのではないかと思います。