こんばんは！開発の林です。
Bootstrap, from Twitter いいですよね！サクサク作れちゃうあたり今気に入っています。
本記事でもエントリー部分だけ Bootstrap にしてみました。
さて、話を戻します。
他所のスマートフォン向けサイトに PC からアクセスしたい、
ソースを見てみたい、解析やデバッグを行いたいことってありませんか？
本日はスマートフォン向けサイトを PC からでも解析できるよう簡単に偽装する方法をご紹介します。
Mac / Windows 対応です。
スマートフォン向けサイトにアクセスするには
はじめに、スマートフォン向けサイトにアクセスするにはいくつかの方法があります。
- スマートフォン向けのアドレスにアクセスする
ex. http://b.hatena.ne.jp/touch - ユーザーエージェントを偽装してアクセスする
- Android SDK や iPhone シミュレータなどを使ってアクセスする
それでもだめなら…
- リクエストヘッダー（製造固有番号など）を偽装してアクセスする（難易度：高）
- DOM を偽装してアクセスする（難易度：高）
- テザリングで携帯キャリアの IP を使ってアクセスする（難易度：高）
このように偽装はいろいろとあるのですが、
本記事では、 『ユーザーエージェントを偽装する方法』 を２つ紹介します。
目次
1. Firefox + User Agent Switcher を使う
Firefox と User Agent Switcher を使ってユーザーエージェントを偽装することができます。
入手先
- Firefox 本体
Firefox はなるべく最新版を使ってください。
最新版でないと、HTML5 の解釈ができなかったりスマホ偽装ができないためです。
Get Firefox - User Agent Switcher
ユーザーエージェントを偽装します。
Get User Agent Switcher
ユーザーエージェントの偽装方法
例として Android 2.3.6 の標準ブラウザに偽装してみます。
User Agent Switcher は、インストールし立ての時はどこにあるのかわかりません。
Firefox 本体の「ツールバーのカスタマイズ」で、User Agent Switcher アイコンを適当な場所に設置します。
このボタンからユーザーエージェントを切り替え（偽装し）たり、ユーザーエージェントリストの編集を行えます。
ボタンをクリックして「Edit User Agents」から新たにユーザーエージェントを追加できます。
オプションから「New User Agent」を選択します。
オプションから「Description:（好きな名前をどうぞ）」と「User Agent:」を編集します。
他の項目は使わないので何もしなくて良いです。
「User Agent:」欄には下のテキストを入力します。
Mozilla/5.0 (Linux; U; Android 2.3.6; ja-jp; SC-03D Build/GINGERBREAD) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
「OK」ボタンを押してすべて閉じてください。これで偽装の準備が整いました。
偽装を開始しましょう。
ボタンをクリックして、先ほど「Description:」に入力した名前を選択します。
もう偽装されています。早速 Yahoo! JAPAN にアクセスしてみます。
http://www.yahoo.co.jp/
とっても崩れていますが、成功です！
Yahoo! JAPAN の場合はアドレスも変わりましたね。
デバッグしたい場合は別途 Firebug で似るなり焼くなり中身をじっくり見てみてください。
- Firebug
DOM やスクリプトのデバッグに必須です。
Get Firebug
Cookie を管理できる Firecookie もセットでおすすめです。
Get Firecookie
2. Safari の開発ツールを使う
Safari は標準でユーザーエージェント偽装を搭載しています。
そして、さすが WebKit エンジン。スマートフォンサイトの再現度が半端ないです。
Firefox でうまく表示できない場合や、偽装してるのに動作しない場合は Safari を使うことをおすすめします。
なぜ Safari だけを使わないのかというと、Firebug のようなデバッグツールが Safari にはあるにはあるのですが非常に使いづらいからです。
また、ユーザーエージェントを保存してくれないようなのでそこが残念です。
入手先
- Safari 本体
Get Safari
ユーザーエージェントの偽装方法
例として先ほどと同じく Android 2.3.6 の標準ブラウザに偽装してみます。
※ もちろん、iPhone に偽装もできます。（すごい再現度で）
まずは、ユーザーエージェント偽装機能をオンにします。
設定の「詳細」タブから「メニューバーに“開発”メニューを表示する」にチェックを入れます。
メニューに「開発」が表示されているので、「ユーザーエージェント」から「その他」を選択します。
※ ここで、一覧にあるブラウザを選択すればそのブラウザに偽装します。
iPhone や iPad はここから直接選んで偽装すると簡単です。（ただし、まだ iOS 4 ）
ダイアログが表示されるので偽装したいユーザーエージェントを入力します。
今回は下のテキストを入力します。
Mozilla/5.0 (Linux; U; Android 2.3.6; ja-jp; SC-03D Build/GINGERBREAD) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
もう偽装されています。早速 Yahoo! JAPAN にアクセスしてみます。
http://www.yahoo.co.jp/
Android 向けの Yahoo! JAPAN が表示されました。
完璧です。
デバッグしたい場合はメニュー「開発」にある「Web インスペクタ」なりで似るなり焼くなり中身をじっくり見てみてください。（慣れが必要）
良く使う User-Agent を３つほど
Android 2.3.6 Galaxy S2 LTE
Mozilla/5.0 (Linux; U; Android 2.3.6; ja-jp; SC-03D Build/GINGERBREAD) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
iPhone iOS 5.1
Mozilla/5.0 (iPhone; CPU iPhone OS 5_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9B179 Safari/7534.48.3
iPad iOS 5.1
Mozilla/5.0 (iPad; CPU OS 5_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9B179 Safari/7534.48.3
おしまい
デバッグ手法についても言及したかったのですが、長々とやっちゃいました。
ウェブ開発者には基礎の基礎かなぁと思うのですが、他所のスマホサイトを見ることは参考になると思います。
それから Sleipnir Mobile for Android 用エクステンション の開発でも偽装テクニックは活躍するので、慣れてきたら開発してみてください（＾＾）
次のブログはそういった方法で作成された Sleipnir Mobile for Android 用エクステンション を紹介できるかなと思います。
どうぞよろしくお願いします。
—
フェンリルのオフィシャル Twitter アカウントでは、フェンリルプロダクトの最新情報などをつぶやいています。よろしければフォローしてください！
関連記事
