MacのXcode Simulatorがwebサイト開発で超便利って話

今まで、webサイト開発のモバイル動作確認をChomeのディベロッパーツールで行っていました。しかし、Chomeのディベロッパーツールのモバイルシュミレーターと実際のモバイル画面では、多少表示に違いがあり正確なモバイル動作テストはできないのが悩みでした。それが、MacのxcodeのiOSシミュレータを使えば、Macの画面上にリアルな動くデバイス環境ができて、いくつものデバイス切り替えも可能でとても感動したので記事にしてみました。

 

【前提条件】

MacOS(MacOS X)

Xcodeインストール済み

 

iOSシミュレータの起動手順

  1. Xcodeアプリケーションを起動
  2. 画面上部メニューバーの「Xcode」から[OpenDeveloperTool]→[Simulator]をクリック
  3. 以下のようなシュミレーター画面がデスクトップに表示されます。

 

※ iPhoneXのシュミレーター

 

次に、他のデバイスで動作確認したい場合のデバイス変更の手順を解説していきます。

iOSシミュレータのデバイス変更手順

  1. 画面上部メニューバーの「Hardware」から[Device]にカーソルを合わせる
  2. [iOS]・[tvOS]・[watchOS]とデバイスの種類が表示されるので、変更したいデバイスを選び変更。

※ iPhoneやiPadなどのスマホ・タブレット類は[iOS]から選択できます。

 

 

まとめ

この記事が皆さんの活動を手助けになれば幸いでございます。