• RSS

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

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

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

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

iPhoney のダウンロード

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

以下のページよりiPhoney をダウンロードします。


iPhoney で早速確認

iPhoney でスマートホン用のサイトを見てみます。
※当ブログは WordPressのスマホ最適化用プラグイン「WPTouch」を利用しています。
[Mac]スマホサイトの確認に便利なiPhone用の無料シミュレータ「iPhoney」

iPhone 実機との比較

同じページを、iPhone5 の実機で見てみます。
[Mac]スマホサイトの確認に便利なiPhone用の無料シミュレータ「iPhoney」

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


端末の回転

ツールバーより「Window」より「Rotate iPhone」のメニューを選択するか、
[Mac]スマホサイトの確認に便利なiPhone用の無料シミュレータ「iPhoney」

キーボードショートカット Command + T で端末を回転させることができます。
[Mac]スマホサイトの確認に便利なiPhone用の無料シミュレータ「iPhoney」

ユーザーエージェントの変更・カスタマイズ

ツールバーより「iPhoney」から「Custom User Agent」メニューを選択します。
[Mac]スマホサイトの確認に便利なiPhone用の無料シミュレータ「iPhoney」

ユーザーエージェントを指定できるウィンドウが開きますので必要に応じて入力します。
[Mac]スマホサイトの確認に便利なiPhone用の無料シミュレータ「iPhoney」

試しに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
を入れて、先のキャプチャと同じページを見ると、こんな感じになりました。
[Mac]スマホサイトの確認に便利なiPhone用の無料シミュレータ「iPhoney」

ページのソースコードのチェック

ツールバーより「View」から「View Source」メニューを選択します。
実機でのチェックとの違いとして、スマホサイトのソースコードが見れるのが、個人的には嬉しいです。
[Mac]スマホサイトの確認に便利なiPhone用の無料シミュレータ「iPhoney」



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す