スマートフォン用ページの制作工程として
・まず「PC上でコーディング」してから
・表示を「実機スマートフォン」で確認する
という流れがあります。
制作途中でちょっと表示を確かめたい・調整したいときなど、PCと実機スマホを何度も往復していては時間がかかってしまいます。
作業中はPCブラウザの幅を縮めたり、何かしらのツールを使って、PC上でスマホ画面に近い環境を作って表示をチェックしているのではないでしょうか。
今回はPCブラウザでお手軽にスマホページを表示する方法を紹介します。
主要ブラウザをリストアップしました。
それぞれ自分の使いやすいブラウザや開発ツールがあると思いますので
各ブラウザでの方法をまとめます。
- 【UA（ユーザーエージェント）の変更】
- 【ブラウザ幅・サイズの変更】
この設定をすることでスマホに近い環境をPCに再現できます。
PCからスマホページのURLにアクセスすると、リダイレクト設定などの自動振り分けによって、
勝手にPCページに転送されてしまい、そもそもスマホ用のページを見れない場合があります。
これはブラウザのUA設定を変更することによって解決できます。
● Firefox
アドオンでUAを切り替えることができるようになります。 ・Fire Mobile Simulator Mobile 用でも使われている有名なアドオンです。 Firefox がバージョンアップしてから対応していない場合もあるらしいです。 使えると便利です。 ・User Agent Switcher ブラウザメニューのツールからUAの変更ができるようになります。 初期設定で使える端末は iPhon 3.0 となっていて、追加もできます。 設定が少し大変そうです。 画面サイズの切り替えにも様々なアドオンがあります。 ・Browsizer 320 × 480 など好きなサイズを登録することができ、 メニューバーに表示させると、右クリックで選択してブラウザの画面サイズを切り替えることができます。 現在の画面サイズも表示されますので手動で画面幅を変えてもサイズがわかります。●Google Chrome
ブラウザの機能で、F12キーを押すと「 Chrome Developer Tools 」が起動します。 画面右下の歯車のマーク「 Settings 」ボタンをクリックすると設定メニューが開きます。 「 Network 」項目の「 Override User Agent 」にチェックを入れて、 プルダウンのメニューからUAを選択できます。 「 iPhone－iOS5 」等を選択したあと、ページを再読み込みすると スマホUAに切り替わった画面が表示されます。 画面サイズの変更には Chrome ウェブストアの拡張機能（アドオン）が使えます。 ・Window Resizer 好きなサイズを登録することができ、 アイコンクリックでサイズ変更ができるようになります。 手動で幅を動かしたとき、右下に現在のウィンドウサイズも表示されます。●Safari
ブラウザの機能でUA切り替えができます。 まずは開発メニューを表示させるために、ブラウザ右上の歯車マークから「設定」を開き、 「詳細」の項目から「メニューバーに開発メニューを表示」にチェックをいれます。 次に歯車マークの隣にあるメニューボタンから「開発」を選ぶと、 「ユーザエージェント」という項目があるので、選択して切り替えることができます。 Safari はブラウザの最小幅が 320px なので、手動で横幅を一番小さくすると iPhone の幅と同じになります。●Internet Explorer
Internet Explorer 9 のブラウザの機能で「F12開発者ツール」を使います。F12キーを押すと起動します。 開発者ツールのメニューバーから「ツール」を選択。 「ユーザーエージェント文字列の変更」→「カスタム」でスマホ用のUA文字列を登録します。 例）iOS 5 のUA文字列は以下になります。Mozilla/5.0 (iPhone; CPU iPhone OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3
登録したUA選択後、ページの再読み込みでスマホページが確認できるようになります。●Opera
ブラウザの機能を使います。 左上メニューから「ページ」→「開発者用ツール」→「 Opera Dragonfly 」を起動します。 Opera Dragonfly のツールバーから「ネットワーク」を選択。 「ネットワークオプション」→「ヘッダを全体的に上書きする」にチェックを入れます。 「プリセット」のプルダウンからUAを切り替えて「保存」をクリックします。- Mobile Safari on iOS4
- Android 2.3.3
その他
画面サイズを変更するフリーソフト
メニューバーやウィンドウ端で右クリックすると、あらかじめ設定したサイズに
ウインドウ幅を選んでリサイズしてくれます。
320px × 480px がすぐに作れます。
まとめ
今回調べてみて、ほとんどのブラウザで設定できることがわかったので、
実機チェックの前に自分の使いやすいブラウザで軽く確認したいときに使えます。
PCブラウザでの確認だと開発ツールの機能と一緒に使えるので、
要素の確認や調整もしやすいです。
Firefox なら Firebugと 合わせて使うこともできます。
もちろん最終的には実機を使って、表示や挙動に問題が無いか確認することが必要です。
javascript の挙動やタッチ・フリックなどスマホ独特のアクションはPCブラウザでは再現できないことも多いです。
その他ツールで。。
Mac であれば X code に iOS シミュレータという機能があります。
バージョンの切り替えもできて、かなり実機に近い再現ができていると思います。
windows でも使えるシミュレーターでは、
Adobe Air アプリに ibb demo というのものがあります。
ちょっとiPhone・iPadでの表示確認がしたいときに便利です。
探してみると他にもたくさんのツールがありました。
ダウンロードしてもうまく起動しないものもありましたが。。
完全にスマホ環境を再現してくれるツールが出来るといいですね。