iPhoneやiPadでのレイアウトを確認したい時に便利なシュミレーター『Electric Mobile Studio』

更新日:

アプリ

武蔵野という冠がついている通り、都内(特に23区外)を活動の拠点としているムサシノウェブの中の人「でーさん」です。
 
ムサシノウェブではパソコン・インターネットに関するお役立ち情報の発信と同時に、私が活動している範囲内で地域情報(美味しいお店やお得なお店など私がオススメしたいもの)についてもブログの記事として発信していきます。
 
今回は私がサイトを制作したりする時に、各端末での表示状況を確認するために使っている便利なiPhoneシュミレーターを紹介したいと思います。WindowsでiPhoneやiPadのブラウザでサイトがどのように表示されているか?を確認することができます!
 
 

Electric Mobile Studio

この記事で紹介するシュミレーターです。ちょっと対応しているiOSのバージョンが古いので?これでも完璧に実機と同じ状態で表示されるわけではなさそうですが、このシュミレーターのおかげでChromeのデベロッパーツールでは気づかなかったレイアウトの問題点なども気づくことができています。(例えば背景として設定した画像がiPhoneやiPadだとやたら拡大されてしまっているなどの問題)
 
リンク:Electric Plum - Power for the Mobile Web
 
 

多摩地区や愛知でウェブ運営・動画配信のサポートをお探しなら【ムサシノウェブ】

使い方

製品の価格は今日時点で$39.99となっていますが7日間は試用期間として使ってみることができるので、取り急ぎ実機がないけど表示状態を検証したいといった時にはトライアルで使ってみると良いかと思います。
 
まずは上記のリンクからページにアクセスして「Download Electric Mobile Studio for Windows - FREE 7 Day Trial」ボタンをクリック→インストーラーをダウンロードします。
 

 
zipファイルをダウンロードしたら中に入っているsetup.exeを実行してアプリケーションをインストールします。インストールが完了したらこのようなアプリケーションの画面が表示されます。
 

 
例えばiPhoneのシュミレーションをしたい場合には、iPhoneの下にあるLaunch New Instanceボタンをクリックします。
 

 
すると、このようなiPhoneの形をしたウィンドウが表示されます。
 

 
あとはこの画面からレイアウトを確認したいウェブページにアクセスすれば、ザックリとiPhoneではどのようにそのサイトが表示されるのか?を確認することができます。
 

 
 

まとめ

今回この記事では使い方のサンプルとしてiPhoneのシュミレーションを紹介しましたが、iPadやレスポンシブ(画面の幅・高さを調整できる)での表示状況も確認することができます。



Electric Plum - Power for the Mobile Web

We are excited to announce that Microsoft® has chosen electric plum technology for iOS web simulation in their popular free Web development tool Microsoft WebMatrix 2. ...

表示する

 
このアプリでも実機とは異なる表示になってしまうこともあるんですが、Chromeのデベロッパーツールよりかは実機に近い表示を確認することができると思います。

でーさん
この記事を書いた人 : でーさん

ムサシノウェブというウェブに関連した事業を個人事業主として細々とやってます。趣味は登山!最近の週末は必ず山登りにいきます。主に奥多摩・奥武蔵・奥秩父の低山を日帰り登山しています。その他、ランニングも趣味というか走らないと気持ち悪くなる感じで月間約400kmをのんびり走っています。家系ラーメン大好き、お酒大好き、多摩湖大好き、夕暮れ大好き。最近は撮影にハマっててタイムラプスとRICOH THETAでよく撮ってます!

Copyright© ムサシノウェブログ , 2020 All Rights Reserved Powered by STINGER.