iOSシミュレーターを使ってWebサイトを開発者ツールを見ながら実機表示で開発する方法

2018年1月17日 2019年1月1日

最近Web制作をしていると、iPhone5で表示した時にWebページに謎の縦線が入っていました。「何がおかしいんだろう？」と思ってChromeの開発者ツールでiPhone5の表示に切り替えたのですが、そのおかしな表示が再現されない…

僕はWeb制作を行う際にいつもChromeの開発者ツールを使っていたのですが、どうやらChromeの開発者ツールは完璧にスマホデバイスを再現してくれるわけではないので、ある程度の表示はしてくれるものの本当に細かい微細な部分までは再現してくれないみたいです。

だからこそ実機テストが重要とされてるわけです。

実機で見て何が原因かすぐ判断できるようなものなら良いのですが、流石にパッと見何が原因かも分からないコードを少しづついじって、その都度実機確認というのはかなり面倒です。

そこでふとXcodeのiOSシミュレーター（エミュレーター）を思い出し、それならちゃんと表示されるのかと思い確認してみるときちんと再現されている。
あとは開発者ツールをここに表示できれば万々歳。今回は備忘録も兼ねてiOSシミュレーターでのWeb制作の方法についてまとめてみます。

iOSシミュレーター使用の流れ

XcodeからiOSシミュレーターの起動

iOSシミュレーターを使用するためにはXcodeが必要です。まだXcodeをインストールしていない方はこちらからインストールしましょう（かなりサイズが大きいのでネット環境の安定した場所でダウンロードするように注意しましょう）。

インストールしたらXcodeを起動して、メニューの[Xcode]から[Open Developer Tool]、[Simulator]を開きます。

これでiOSシミュレーターが開きます。通常のiPhoneと同様にSafariを開いて検索したり、Webページを開いたりできます。これでiPhoneXを持っていない人でも表示の確認を行うことだってできます。

iOSシミュレーターの基本設定

基本操作

基本は指の動きがそのままマウスカーソルに切り替わったと考えれば操作する事ができますが、慣れるまで少し不便かもしれません。
マウスのスクロールが効かないので基本的にクリックとドラッグでの操作となります。

言語設定

デフォルトの状態だと英語なので[Settings]→[General]→[Language & Region]→[iPhone Language]で「日本語」を選択して「Done」を押せば日本語に切り替わります。

画面回転

画面の回転を行いたい場合はメニューの[Hardware]→[Rotate Left]もしくは[Rotate Right]から回転させる事が可能です。ショートカットキーはCommand + ← →なのでそれで回転させる事も可能です。

iPhone Xは、カメラなどがある「センサーハウジング」と呼ばれる部分や画面下にある「ホームインジゲータ」などによって意図したデザインが再現されてあるかどうか確認する必要があるので、特に画面を横向きにして確認した方が良いですね（そもそもiPhoneを横向きにしてWeb閲覧をしているユーザーがどれだけいるのかという話ですが…）。

デバイスの変更

デバイスの変更を行いたい場合はメニューバーの[Hardware]→[Device]→[iOS ○○]から変更ができます。

ちなみに古いiOSで検証したい場合はXcodeの環境設定（Preferences）の[Components]を開くと今までOSのシミュレーターがダウンロードできます。ただサイズを見てもらって分かるように、結構サイズが大きいので本当に必要なもののみダウンロードするようにしましょう。

Safariで開発者ツールを使用できるようにする

iOSシミュレータの設定は出来ましたが、やはり開発者ツールを見ながら開発を行いたいですよね。そのためにはまずSafariで開発者ツールを使用できるようにする必要があります。

実はSafariでも開発者ツールを使用する事ができるのですが、デフォルトではオフになっているので、それをオンにします。
やり方はSafariの[環境設定]→[詳細]→[メニューバーに”開発”メニューを表示]にチェックを入れます。

するとメニューバーに「開発」という項目が追加されています。これでChromeやFirefox同様にSafariでも開発者ツールが使えるようになりました。

しかもそれだけではなく、Safariの開発者ツールはSafariで開いたページだけでなく、iOSシミュレーターで開いたページの検証も行う事ができるのです。

iOSシミュレーターで開いたページをSafariの開発者ツールで検証する

iOSシミュレーターで目的のページを開いた状態で、Safariに切り替えます。
Safariに切り替えたらメニューバーから[開発]→[Simulator]で目的のサイトを選択します。

すると、iOSシミュレータで表示しているページの開発者ツールが開きます。Command + Rで画面のリロードもできますし、実機の表示を見ながら調整を行う事ができます。

MAMPを使って開発を行う

iOSシミュレーターでは基本的にURLを入力してサイトの表示を行う必要があるのですが、ローカル開発環境のIPを入力してもきちんと表示されるのでMAMPを利用しすることで、公開前の段階のローカルでのサイトもきちんと実機で表示させる事が可能です。

まとめ

今回はiOSのシミュレーターを利用したWebの制作方法の手順について一通りまとめました。基本的にはChromeやFirefoxを使って開発がやりやすいとは思いますが、完全に実機の表示を再現できるわけではないので、実機で何か表示がおかしくて尚且つ普段使っているブラウザの開発者ツールだとその症状が再現できない場合には試してみてください。

しかも、今の時代にそのような表示に異変が起こるという事は大抵の場合パッと見で何が原因なのか判断できるような事ではないと思うので尚更開発者ツールが必要になってくると思いますし、覚えておくと役に立つ事があると思います。