（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で閲覧しようとすると、以下のようなパースエラーでページが表示できないことがあります。

ﾓﾊﾞｲﾙ@niftyにアクセス時のエラーメッセージ

ﾓﾊﾞｲﾙgooにアクセス時のエラーメッセージ

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を変換する前のヘッダ情報

↓
Content-Typeを変換した後のヘッダ情報

ちゃんと Content-Type が変わっていることが確認できました。

【05】最後に

上記の方法でPC上でモバイルサイトを見ていても、最後は実機で確認したい！ということになります。そのような時、今まではメールでURLを送っていましたが、Firefoxアドオンの『Mobile Barcoder』を使うと現在表示しているURLのQRコードを表示できるので、メール送信が不要になり便利です。以前はURLが長いと表示できないという問題がありましたが、バージョンアップして問題なく使えるようになりました。

ステータスバーの右下の Barcode 部分にカーソルを載せるとQRコードがポップアップします。これを携帯の QR コードリーダーで読み取りましょう。

以上、PC でモバイルサイトを見る方法を書いてきました。全てを端末からチェックするのは膨大な時間が掛かりますので、開発の場合には、最初は PC を使って効率的にデバッグを行い、最後に実機で最終確認をするという方法がよく用いられると思います。その中で、状況やニーズに合わせて3つの方法をうまく使い分けられればいいのではないかと思います。

（http://blog.livedoor.jp/ld_directors/archives/51091303.html　より）

PC 用の画像を用意する場合は Photoshop で用意するだけで大丈夫なことが多いですが、モバイルサイトではそうはいきません。
Photoshop で容量を減らしてもキレイにはできないからです。

容量の減らす方法は2つあります。

・psdデータを Fireworks を使って減色する方法
・最初から Photoshop の鉛筆ツールを使ってドットで描いていく方法。

イラストを描いたものや写真、デコメ等、何を減色するかによって作業方法は変わります。

【01】 psdデータをFireworksを使って減色する方法

「livedoor Blog モバイル版」のデザインテンプレートのヘッダ画像を使って説明したいと思います。

ヘッダ画像の容量は4k 以内、拡張子は gif と jpg というレギュレーションとなっています。
今回は gif バージョンの説明をします。

1.まず photoshop で画像を作ります。

この時点で容量は9k 程度あります。

2.その後に Fireworks を使って減色作業に入ります。

大まかに青丸の部分で色数を減らした後、赤丸の様に、ひとつひとつ色を選択して類似した色を捨てて
容量を減らしていきます。

3.完成した画像はこちらです。

大体はこの作業で問題なく減色することができます。

ですが今回の場合は、最初の psd データと比べると花や小鳥の立体感が無くなってしまいましたね。。

そんな時は、

Fireworksである程度作業をした後、一度Photoshopで作業して下さい。

2の工程で類似した色を消しても思い通りいかない場合があります。
そういった場合は、一度大まかに減色をした後に、Photoshop の鉛筆ツールで色を付け加えたり、
同系色は同じ色に塗りつぶしたりします。
ある程度整えたら、もう一度 Fireworks で減色作業をします。

完成した画像がこちらです。

3番目の画像と4番目の画像を比べると容量は同じでもクリエイティブが違いますよね。

この2つのソフトを何度も使うことによって容量の少ないキレイな画像ができます。
ちょっとした手間をかけることが大事です。

【02】最初からPhotoshopの鉛筆ツールを使ってドットを描いていく方法

バナーやデコメではこういった作業を行います。
特にバナーでは2k 以内が多いため、最初からドットで絵を描かないと厳しいです。

鉛筆ツールを使って絵をドットで描くことによって、アンチがかからず余計な容量が増えません。

上の画像の絵は全てドットで描いたものです。

フォントも MS ゴシックなどアンチなしで書くか、ドットで直接描きます。
小さい画像サイズの場合は特にこういった作業が必要です。

上の画像もフォントを使って描いたものや手書きで描いたものです。

いかがですか？
少しの手間をかけることでキレイで容量の少ない画像を作ることができます。

様々な端末たくさんがあり、キャリアごとに仕様も違います。
上位端末、下位端末それぞれ表示できる容量も違ってきます。
１つの画像に対して様々なサイズ、拡張子は gif,png,jpg、いくつも必要になります。
そのため、最初に説明した作業を繰り返し行います。
意外に地味な作業が多いです。