Macでかんたん！iPhoneのブラウザチェック

こんにちは！
Maromaroフロントエンジニアのgenです。

Web制作で品質担保をするうえで欠かせない工程、それが表示確認です。
私も普段は数種類の実機とChromeの検証ツールを使ってスマホでの表示確認を行っているのですが、
まれにiOS環境だけで起こるトラブルに出会うこともあります…

「Chromeの検証ツールだと問題なかったのにiPhoneで見ると動きが違う！」
「Androidの実機だと問題ないのに…」
「手元で確認したいけどOSのバージョンが…」

そんな経験をされた方も多いのではないでしょうか？

前提として各ブラウザの検証ツールはあくまでPC上でサイズを変更して表示しているだけなので、それを表示しているWebブラウザ上での挙動となります。
制作中のレイアウト確認としてはとても便利なのですが、
例えばSafari独自の表示差分やアドレスバー周り、ブラウザアプリやiOSのバージョンによる細かな挙動の違いなどは、実際にiPhone環境で見てみないと気が付きにくいことがあります。

今回は、そんなときに大活躍する「Xcodeのシミュレーター機能」の使い方をご紹介します！

Xcodeとは？

Xcodeとは、Appleが提供している開発ツールです。
本来はiPhoneアプリやMacアプリなどを開発するために使われるものですが、その中に含まれている「シミュレーター」という機能を使うことで、Mac上でiPhoneやiPadのような環境を起動することができます。

「アプリ開発用のツール」と聞くと少し身構えてしまうかもしれませんが、今回使うのはWebサイトの表示確認に必要な部分だけです。
コードを書いたり、アプリを作ったりする必要はありません。

Xcodeをインストールしておけば、iPhoneのSafariをシミュレーター上で開いて、Webサイトがどのように表示されるかを確認できます。
つまり、手元に確認したいiPhoneがない場合でも、Mac上でiPhone Safariに近い環境を用意できるというわけです。

インストールしてみよう！

それでは早速、Xcodeをインストールしていきましょう！

XcodeはApp Storeから無料でインストールすることができます。

ただし、Xcodeは容量がかなり大きめです。
インストールには少し時間がかかることもあるので、通信環境が安定しているタイミングで行うのがおすすめです。

インストールが完了したら、アプリケーションフォルダやLaunchpadからXcodeを起動します。

初回起動時には、利用規約への同意や追加コンポーネントのインストールを求められる場合がありますが、基本的には画面の案内に沿って進めれば大丈夫です。

iPhoneシミュレーターを起動してみよう！

Xcodeのインストールが完了したら、次は実際にiPhoneシミュレーターを起動していきます。

Xcodeを開いた状態で、画面上部のメニューから
Xcode > Open Developer Tool > Simulator
を選択します。

すると、Mac上にiPhoneの画面が表示されます。
これがXcodeのシミュレーターです。

初めて起動したときは少し時間がかかる場合がありますが、しばらく待つと実際のiPhoneのようなホーム画面が表示されます。

ここまでできれば、Mac上でiPhone環境を立ち上げる準備は完了です！
次は、シミュレーター上のSafariを使って、実際にWebサイトを開いてみましょう。

SafariでWebサイトを開いてみよう！

シミュレーターを起動できたら、次はSafariで実際にWebサイトを開いてみましょう！

シミュレーターのホーム画面にある Safari をクリックすると、iPhoneでおなじみのSafariが起動します。

操作は普段のSafariで行うことをマウスとキーボードで行うだけ！
普段iPhoneでWebサイトを見るときと同じように、シミュレーター上でもページをスクロールしたり、リンクをタップしたりしながら表示を確認することができます。

Chromeの検証ツールでスマホ幅にしたときとは違い、iPhone Safariに近い環境で確認できるので、アドレスバー周りの挙動やSafari特有の見え方や挙動の違いにも気づきやすくなります。

機種を変更して確認してみよう！

SafariでWebサイトを開けたら、次は表示するiPhoneの機種を変更して確認してみましょう！

シミュレーターでは、iPhone SEのような小さめの画面から、iPhone Pro Max系のような大きめの画面まで、さまざまな端末を切り替えて確認することができます。

画面幅や高さが変わることで、
「このサイズだとボタンが窮屈に見える」
「ファーストビューの見え方が思っていたより違う」
「下部固定ボタンがSafariのUIと干渉している」
といった表示崩れに気づけることがあります。

機種を変更するには、シミュレーターを開いた状態で、画面上部のメニューから
File > Open Simulator
を選択します。

その中から確認したいiOSバージョンや端末名を選ぶと、別のiPhoneシミュレーターを起動することができます。

Safariのデベロッパーツールで確認してみよう！

シミュレーター上でWebサイトを確認できるだけでも便利なのですが、実はMac側のSafariと連携することで、デベロッパーツールを使った確認もできます。
普段Chromeの検証ツールでHTMLやCSSを確認するように、シミュレーター上のSafariで開いているページに対して、要素の確認やスタイルのチェックを行うことができます。

まずはシミュレーター上のSafariで確認したいWebサイトを開いた状態で、Mac側のSafariのメニューから

開発 > 開いているシミュレーター > 表示中のページ
を選択します。

これで、シミュレーター上で開いているWebサイトをMac側のSafariのデベロッパーツールで確認することができます。

iPhone Safari上での表示を見ながら、どのHTMLにどんなCSSが当たっているのか、どの要素が原因で表示崩れしているのかを確認できるので、
「iPhoneでだけ崩れるけど、原因がわからない…」
「DOMをみてもっと詳しく調べたい…！」
というときにかなり便利です！
Chromeの検証ツールと同じ感覚で使える部分も多いので、フロントエンドの表示確認をする方はぜひ合わせて覚えておくのがおすすめです。