スマートフォンのテストにSafariブラウザを使う

Read More

smartphone用のサイト開発に際してどうしてもエミュレータが必要になるが、このエミュレータ中々良いものがない。


そこで今回はsmartphoneのエミュレート機能がついているブラウザを紹介したいと思う。
# 正確にはスマホの中のiPhoneとなるわけだが


ブラウザの名はSafari
はいiPhoneと同じアップル製。


本来SafariはMac用だがWindows用のものも出ているのでこれを使ってsmartphone向けの開発を行う。


まずブラウザをダウンロードしてインストール。
http://www.apple.com/jp/safari/download/
# 2013/05/25 追記
現在このページからのDLリンクはなくなったもよう。
DLリンクを直リンしても変わる可能性が高いので手順のみ書いておく。
1.サイト上部のタブから「サポート」をクリック。
2.次にページ中部の「ダウンロード」をクリック。
3.「ダウンロードを検索」から「safari windows」と入力しエンター
4.ページにwindows用のsafariが表示されるのでそれをDL


# 2013/05/25 修正: 今は求められないみたい
いきなりメールアドレス入力を求められますが、

メールアドレス形式のチェックは大体どこでもhoge@hoge.hogeの形式になっているので、
@(アットマーク)と.(ドット)が入っていれば通ります。

これを踏まえてtest@test.comとでもしておきましょう。
アップルもこれで通ります。
アップルからメールが来ても迷惑なだけなので。



インストール後ブラウザを起動して、
設定アイコン->メニューバーを表示
を選択します。




メニューバーより「編集」->「設定」をクリックすると、
詳細というウィンドウがポップアップされるので「詳細」タブをクリックし、「メニューバーに"開発"メニューを表示」にチェックを入れる。




これでブラウザ設定でユーザエージェントを偽装することができるようになる。
開発->ユーザエージェント->Safari iOS 4.1 - iPhone
を選択。




こうすることでサイトにアクセスした時、サイト側ではiPhoneからのアクセスしたように判断されるようになる。
Google先生アクセスの例
スマートフォン用のものに表示が変わっている。

自分は上記のようにsmartphoneの操作感を強く出す為にブラウザの横幅を狭めて使ってる。




例のjQuery mobile frameworkを使って作ったサイト。



うん、それっぽいぽい。






--
ちなみに自分のデスクトップに置いてあるブラウザへのショートカットは現在こんな感じになってる。


うーん…




--
# 2013/05/25 修正:
改めてSafariをDLする機会があったのでそれに合わせてサイトの情報を一部修正。