Xcodeを使ってスマートフォン用サイトの動作確認をしてみる【Mac】

ホームページの制作で特に面倒なのは、レスポンシブに対応させることではないでしょうか。レスポンシブ対応サイトを作るには、追加でコードを書くことはもちろん実機での動作確認も必要になってきます。

しかし実際は、実機がなくてもソフトを使うことでパソコンだけで動作確認ができます。今回はその中でも特にMacユーザにおすすめな便利ソフト「Xcode」を紹介します。

iosシミュレーターとは

Appleが開発者向けに提供しているIDEツール”Xcode”に含まれている、ios端末の動作をパソコン上でシミュレーションできるソフトです。

Appleが正式に配布・サポートしているため動作が安定して、また再現度がかなり高くメッセージやリマインダーなどの標準アプリも動かすことができます。

iosシミュレーターの使い方

まずはMac Apple StoreからXcodeをダウンロード・インストールします。容量がかなり多く時間がかかるため、有線LANを使ったり他の作業を一旦止めることをおすすめします。僕がダウンロードしたときは6GB以上ありました。

インストールが完了すると利用できるようになるので、クリックして起動します。起動したらメニューバーから下記の通りに開きます。
Xcode > Open Decvelop Tool > Simulator

するとiPhoneの画面が出てくるので、起動したら成功です。僕の場合はiPhoneXRが表示されました。

ブログの動作確認

ブログの動作確認は標準ブラウザーのSafariからできます。使い方はiPhoneと全く同じです。今回は僕が実際に使っているiPhoneSEをシュミレートしてみました。上がシミュレーターの画像、下が実機での画像です。

画像から分かる通りかなり厳密に再現されています。実機での確認は必要ないとまでは言えませんが、かなり実用的だと思います。またサイトの動作確認だけでなく、ホーム画面・ブックマークに追加することでファビコンの確認も可能です。

iosシミュレーターを使う必要がない場合も…

実はブログの動作確認だけならGoogleChromeの検証機能でもできます。これに関してはサルワカさんのブログで紹介されているので、よかったら参考にしてみてください。