Webサイト表示確認にも!iOSシミュレータをアプリ開発以外で使おう!

ios017

どうも。しゃけです。

今回は、Xcodeをインストールするとそのパッケージの中に含まれているiOSシミュレータについてです。

iOSシミュレータは、例えばXcodeでiPhoneアプリを開発した時に、Mac上で動作の確認やデバッグ等に使うイメージが強いかと思います。

しかし、それ以外にも、iOSシミュレータには、今回の記事はMac持っているけどXcodeで普段開発なんてしないよ、という方にもぜひ活用して欲しい、意外と知られていない使い方があります。

それは、Webアプリ開発やWebサイト制作している際、iOSシミュレータにインストールされているSafariブラウザで、あたかも実際のiPhoneを使って閲覧しているかのごとく、実際のWebページを表示確認をすることができる、という使い方です。

それでは、実際に使ってみましょう!

①まずはXcodeをインストール

まずは、Xcodeをダウンロード・インストールされていない方は、Xcodeをインストールするところから始めて下さい。

AppStoreで「Xcode」と検索すると出てきます。※インストールには結構時間がかかるので暇な時にこれだけはやってしまいましょう。

②iOSシミュレータがインストールされた場所へ行く

Xcodeをインストールしたら、「Simulator.app」つまりiOSシミュレータがインストールされている場所を探しましょう。

※デフォルトではFinderの「アプリケーション」フォルダには出ないのです・・・

Finderを開き、Xcodeを右クリック →「パッケージの内容を表示」をクリック
ios002

「Contents」→「Developper」→「Applications」
ios003

今後使いたい時にいちいち探すのは面倒なので、iOSシミュレータはDockもしくはアプリケーションフォルダにでも入れておきましょう。

そして「Simulator.app」ダブルクリックで起動!

③実際にSafariブラウザを起動

iPhoneユーザならお馴染みのリンゴマークの起動画面が出ると思います。

ここで、気づいた方もいらっしゃると思いますが、デバイスの種類がデフォルトでiPadになっていることが多いです。

でも大丈夫。もちろん設定で変えられます。
「Device」→「iOS〜〜」→「iPhone〜〜」※任意のOSのバージョンと端末の種類を選んで下さい。
ios004

すると選んだ端末・OSで再起動されリンゴマークが出た後に・・・
ios005

ホーム画面が立ち上がります!!!
ios006

そしてサファリを起動して、ためしにGoogleを立ち上げます。※Macがインターネットに接続している必要があります。
ios007

Googleさんいらっしゃいました〜
ios012

後は、URLを入力する欄に、ブラウザで表示確認したいサイトやWebアプリのURLを貼り付けるだけ・・・

なのですが、「Command+C」だけでは貼り付けられません!

URL欄にカーソルを合わせ入力状態にし、一度「Command+C」を押してから、右クリックして「Paste(ペースト)」を選びます。

すると無事にURLをコピペすることが出来たかと思います。

あとは、トラックパッドやマウスでドラッグすればスワイプ操作を再現できます。

④その他の便利機能

その他にも、iOSシミュレータは普通にiPhone, iPadのように使うことが出来ます。

・デバイスの縦横の向きを変える
ios013

ios014

・スクリーンショットを取る
ios011

・起動中のアプリの確認、停止
ios010

※ちなみに、iOSシミュレータ内のAppStoreからアプリをダウンロードしてインストールすることは出来ません。

おわりに

いかがでしたか?

私は特にWebアプリやサイトを開発している時、iPhoneでの表示を確認したかったら、これまではChrome等ブラウザに付いている開発者向け機能・DeveloperToolを使っていました。

しかしなんだかんだ本当にスマホやタブレットと同じ表示がされるかといえば、微妙なところでした。

でも、iOSシミュレータを使えば、iPhoneやiPad実機端末そのままの表示を確認することができるので、わざわざサーバにアップして実機で確認する、なんて手間を省くことができるので、効率的に制作や開発をすすめることが出来ます。

その他、Macでプログラミングやスマホアプリ開発、Webサイト作成・Webアプリ開発をはじめる際におすすめのMacアプリケーションをこちらの記事(「スマホ・Webアプリ開発・プログラミングデビュー者向けMacおすすめアプリと使い方」)で紹介していますので、あわせて一読していただくといいかと思います。

さてさて今回はこんなところで。ではまた次回!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です