[Mac]スマホサイトの確認に便利なiPhone用の無料シミュレータiPhoney

Macアプリケーション

2013.04.29

スマホサイトを構築する上で厄介なのが「実機での動作検証」です。

細かい動きは実機を使って厳密にチェックする必要がありますが、レイアウトが崩れていないか？のチェックをするのであれば、iPhone用の無料シミュレータiPhoneyを使うと便利です。

iPhoneyのダウンロード

以下のページよりiPhoneyをダウンロードします。
http://www.marketcircle.com/iphoney

iPhoneyでスマートホン用のサイトを見てみます。
※当ブログは WordPressのスマホ最適化用プラグイン「WPTouch」を利用しています。

同じページを、iPhone5の実機で見てみます。

微妙な違いはやはりありると思いますが、大きなレイアウト崩れかないか？どうかなど、都度実機で確認するよりは

ツールバーより「Window」より「Rotate iPhone」のメニューを選択するか、

キーボードショートカット Command + T で端末を回転させることができます。

ツールバーより「iPhoney」から「Custom User Agent」メニューを選択します。

ユーザーエージェントを指定できるウィンドウが開きますので必要に応じて入力します。

試しにAndroidのユーザーエージェント

Mozilla/5.0 (Linux; U; Android 4.0.1; ja-jp; Galaxy Nexus Build/ITL41D) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30

1	Mozilla/5.0 (Linux; U; Android 4.0.1; ja-jp; Galaxy Nexus Build/ITL41D) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30

を入れて、先のキャプチャと同じページを見ると、こんな感じになりました。

ツールバーより「View」から「View Source」メニューを選択します。
実機でのチェックとの違いとして、スマホサイトのソースコードが見れるのが、個人的には嬉しいです。