この記事は、 PLEX Advent Calendar 2024の3日目の記事です。
こんにちは
株式会社プレックスでWebアプリケーションの開発をしているtetty0217 です。
はじめに
皆さんはどのようなタイミング・方法でWebフロントエンドアプリケーションのモバイルビューを開発・デバッグしているでしょうか。
PCブラウザのレスポンシブモードを使って開発したり、QA期間に実機端末でデバッグしたりなど様々でしょう。
本記事はその実機端末に近い環境であるiOS SimulatorとAndroid Emulatorを使用してアプリケーションをデバッグするための環境をセットアップすることにフォーカスした解説記事です。
まとまった情報が出回っていない中、社内メンバーに対するオンボーディングを一括しておこなうためにもこの記事を執筆したのでぜひご利用いただけると幸いです。
対象読者
- 「スマートフォン端末が不足している」「スマートフォン端末特有の不具合やAPIをローカル環境で再現したい」そんな開発者の方にお役立ちな内容となっております。
- 知りたい箇所だけピックアップして読んでいただけると良いです。
章立て
- 【導入編】iOS Simulatorと開発サーバーの接続
- 【デバッグ編】iOS Simulator × Safari Web Inspector
- 【導入編】Android Emulatorと開発サーバーの接続
- 【デバッグ編】Android Emulator × Chrome Devtools
- 【Tips】特定のデバイスをCLIから起動する
前提
大事ですね前提。本記事では下記の環境をデバッグに使用しております。
デバッグに使うPC
Macbook Apple M3 Pro, Sonoma version 14.6
デバッグに使うアプリケーション
例として今回はcreate-next-app@latestを使用しています。
Terminal実行
公式に沿って実行します。
$ npm i -g create-next-app $ npx create-next-app ✔ What is your project named? … simulator-app ✔ Would you like to use TypeScript? … No / Yes ✔ Would you like to use ESLint? … No / Yes ✔ Would you like to use Tailwind CSS? … No / Yes ✔ Would you like your code inside a `src/` directory? … No / Yes ✔ Would you like to use App Router? (recommended) … No / Yes ✔ Would you like to use Turbopack for next dev? … No / Yes ✔ Would you like to customize the import alias (@/* by default)? … No / Yes ✔ What import alias would you like configured? … @/*
dependencies
※package.jsonの一部を抜粋
"dependencies": { "react": "19.0.0-rc-66855b96-20241106", "react-dom": "19.0.0-rc-66855b96-20241106", "next": "15.0.3" }, "devDependencies": { "typescript": "^5", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18" }
【導入編】iOS Simulatorと開発サーバーの接続
この章の目標
iOSが動作するSimulatorを登録しローカルの開発サーバーにアクセスして画面を表示します。 今回はiPhone15（iOS 17.5）と接続します。
Xcodeでデバッグ用デバイスを登録しよう
XcodeのVersionは15.4を使用します。
※上記以降のバージョンを使用する場合はUIや手順が多少変わっている場合があることに注意してください。
1. XcodeのSimulator管理パネル
- Xcodeを開いたらメニューバーから
Settingsを選択しましょう。 - 表示されたダイアログのメニューから
Platformsを選択すると下のようなダイアログの画面が表示されます。
※環境やリリースされているiOS Versionよっては表示が多少異なります。
2.iOSのRuntimeをインストール
初期表示では最新のiOS Versionと各種デバイスが表示されていますが、特定のバージョンを必要とする場合は+からバージョンをDownload & Installしましょう。
本記事ではiOS 17.5を選択します。
こちらをインストールすることでiOS 17.5が動作するiPhone / iPadをシミュレートすることが可能になります。
〜しばし待たれよ〜
3.Simulatorを起動
ようやくインストールが終わりましたね。おめでとうございます。
Open Developer Tool > Simulator を選択します。
起動したSimulatorアプリのメニューバーからFile > Open Simulator > iPhone 15を選択するとデバイスが起動します。
次回以降の起動をスムーズにするため、Simulator AppをDockに登録しておきましょう。
Simulatorから開発サーバーにアクセスしよう
1.開発サーバーを起動
今回はNext.jsを使用しているのでnext serverを起動します。
Next.jsの開発サーバーはデフォルトでhttp://localhost:3000として起動します。
$ npm run dev
PCのブラウザでhttp://localhost:3000にアクセスした時の画面
2.iOS Simulatorからローカル環境にアクセス
基本的にSimulatorのブラウザからローカル環境のURLへアクセスできます。
試しにUser-Agentを表示してみましたが実機同様のものとなっていますね。 これでiOS Simulatorからローカルの開発サーバーへ接続することができました！
HMR（Hot Module Replacement）なども基本的に機能するのでスマートフォン端末に近しい環境で開発をすることができます。
別のモデルでSimulatorを起動する方法
特定の機種で不具合が発生するといったことは時折あるでしょう。
そんな時も対象のモデルを用意してローカルで確認することができます。
モデルを登録
SimulatorアプリのメニューバーからFile > New Simulatorを選択すると新しいSimulatorの登録ダイアログが表示されますので、必要なモデルとOS Versionを選択して登録するとFile > Open Simulatorから起動できるようになります。
【デバッグ編】iOS Simulator × Safari Web Inspector
この章の目的
皆さんが普段からDevtoolsなどでアプリケーションをデバッグしているように、Simulator上で動作するブラウザをDevtoolsでデバッグします。
今回はiOS Simulatorに初期インストールされたSafariを使用しますのでSafari Web Inspectorを使用します。
PCのSafariの開発者モードを有効化する
SafariにはDeveloper用のメニューが存在し、今回のようにSafari上で動作するアプリケーションをデバッグするツールがいくつか搭載されています。
Safariのメニューバーに 開発 メニューがない方は有効化しましょう。
1. 機能の有効化
設定から表示されるダイアログのメニューにある 詳細 を選択すると表示される Webデベロッパ用の機能を表示 にチェックを入れます。
有効化するとSafariのメニューバーに 開発が表示されます。
開発メニューにはセッションのあるデバイスが表示されますので、iOS Simulatorとの接続にもこのメニューを使用することになります。
iOS Simulator上のサンプルアプリケーションをデバッグする
先ほど起動したiOS Simulator上のSafariで再度 localhost:3000 にアクセスしましょう。
Web Inspectorを開く
localhostにアクセスした状態でSafariのメニューバーの開発を選択すると下記画像のようにiPhone 15とlocalhostが表示されています。
localhostを選択することでいつものようにWeb Inspectorが起動し、macOSのSafari上で動作するアプリケーションと同じようにデバッグをすることが可能となります。
スマートフォン端末により近い環境でデザインやエラー、パフォーマンスに関して調査することができますのでぜひ使っていきましょう！
ホームアプリの場合
サービスによってはPWAを動作させていたり、よりネイティブアプリに近しい状態で使用を推奨するものもあるでしょう。
その場合、スマートフォン端末同様にホーム画面にアイコンを追加することが可能です。
追加するとアプリアイコンが表示されます。
そして、このホームアプリについても上記のようにSafari Web Inspectorと接続することができるわけです。
【導入編】Android Emulatorと開発サーバーの接続
この章の目的
Android Emulatorで動作する仮想デバイス（AVD）を登録し、ローカルの開発サーバーにアクセスして画面を表示します。
使用ツール
AVDを管理できるツールはいくつかありますが、今回はその中でもメジャーであるAndroid Studioを使用していきます。
公式サイトから最新のアプリをインストールしておきましょう。
インストールウィザードの選択肢などはデフォルトのままでOKです。
Android StudioでAVDを登録しよう
Android StudioのVersionは 2024.2.1 Patch 2 を使用します。
※上記以降のバージョンを使用する場合はUIや手順が多少変わっている場合があることに注意してください。
1. Android Studioで端末管理パネルを開く
インストールしたAndroid Studioを起動しましょう。
初期ダイアログが表示されたらMore Actions > Virtual Device Managerを選択するとデバイスマネージャーパネルが表示されます。
2. AVDを作成する
AVDを作成するためにパネルメニューの ＋ から作成パネルを開きます。
次に作成したいデバイスを選択します。
今回は比較的新しい「Pixel 9」を使用しましょう。
Next を選択しEmulator動作させるハードウェアプロファイルを選択します。
今回は初期インストールされているAndroid 15.0のVanilla Ice Creamを利用しましょう。
※デバッグに使用したいプロファイルがインストールされていない場合、このパネルで対象のインストールボタンを選択しインストールをしておきましょう。
最後にイメージの設定パネルが表示されますが特に変更せずに Finish を選択してAVDの作成が完了します。
3. Emulatorを起動
AVDの作成が完了すると端末管理パネルに戻り、作成したデバイスが端末一覧に追加されていることがわかります。
早速 ▶︎ を選択し起動してみましょう！
しばらく待つとEmulatorが起動しPixel 9が表示されます。
Android Emulatorから開発サーバーにアクセスしよう
1. 開発サーバーを起動
Next.jsの開発サーバーはデフォルトでhttp://localhost:3000として起動します。
$ npm run dev
PCのブラウザでhttp://localhost:3000にアクセスした時の画面
2. Android Emulatorからローカル環境にアクセス
デバイスにはGoogle Chromeが初期インストールされていますので、アプリを起動してURL欄に 10.0.2.2:3000 を入力すると開発サーバーにアクセスすることができます。
Android Emulatorの仮想デバイスは開発マシン（今回はmacOS）から分離されたネットワーク環境で動作しているため、いわゆるループバックアドレス（ 127.0.0.1 ）は 10.0.2.2 にフォワードされています。
よって、開発サーバーである http://localhost:3000 にEmulatorからアクセスする際はhttp://10.0.2.2:3000を見る必要があるのです。
詳細はAndroid DevelopersのNetwork address spaceを参照してください。
試しにUser-Agentも表示してみましたが実機同様のものとなっていますね。 これでAndroid Emulatorで動作するデバイスからローカルの開発サーバーへ接続することができました！
HMR（Hot Module Replacement）なども基本的に機能するのでスマートフォン端末に非常に近しい環境で開発をすることができます。
【デバッグ編】Android Emulator × Chrome Devtools
皆さんが普段からDevtoolsなどでアプリケーションをデバッグしているように、Emulator上で動作するブラウザをDevtoolsでデバッグします。
今回はEmulatorに初期インストールされたGoogle Chromeを使用しますのでChrome Devtoolsを使用します。
Emulatorで動作するデバイスの開発者モードを有効化する
DevtoolsとEmulatorを接続するためにEmulator側のデバイスで開発者モードを有効化する必要があります。
開発者モードの有効化をする方法はデバイスによって異なりますが今回はPixelの例を記載します。
Settings > About emulated deviceメニューを開きます。- 最下部にある「Build number」を7回タップします
- 「You are now a developer!」が表示されたら完了
※他機種の開発モード有効化の例はAndroid DevelopersのConfigure on-device developer optionsを確認しましょう。
PCのGoogle Chromeでデバイス接続設定をする
1. 準備
先ほど起動したAndroid Emulator上のChrome Appで再度 10.0.2.2:3000 にアクセスしておきましょう。
PCのGoogle Chromeでchrome://inspect/#devices アクセスしましょう。
2. 設定
環境によって異なりますが、下記のような画面が表示されます。
Discover USB devices にチェックを入れ Port forwarding…. を選択して表示されるダイアログに開発サーバーの情報を入力します。
- Port: 3000
- IP address and port: localhost:3000
Enable port forwardingにチェックを入れる
Discover network targets にチェックを入れ Configure…. を選択して表示されるダイアログの Enable port forwarding にチェックを入れます。
設定を終え接続可能なデバイスが表示されたら成功です！
Android Emulator上のサンプルアプリケーションをデバッグする
先ほど表示されたデバイスのInspectを選択します。
接続が成功した場合、いつも我々が見ているChrome Devtoolsがウィンドウ表示されてAndroidで動作するアプリケーションに関する様々デバッグが可能となります。
インストールしたChrome Extensionも基本的には利用することが可能ですので、スマートフォン端末でより近い環境で精度の高いデバッグをしていきましょう！
PC画面の開発時同様にEmulator上のブラウザで動作するアプリケーションに対してLighthouseも動作させることができます。
【Tips】特定のデバイスをCLIから起動する
私は基本キーボードで操作をしている人間なので、SImulator/Emulatorの起動をCommand lineから実行したいです。 ここではインストールされているデバイスをCommand lineから起動する手段を共有します。
iOS Simulator編
例としてiOS17.5が動作するiPhone15を起動してみます。
1. デバイスのIDを確認する
インストールしてあるデバイス情報を出力し該当のiOS VersionのデバイスのIDを確認します。
まず、xcrunコマンドを使用しSimulatorに関する情報を出力してみます。
出力フォーマットは${DeviceName} (${DeviceID}) (${Launch Status}) ... なのでiOS 17.5で動作するiPhone 15のIDは F8220220-F8EA-4E78-B963-02B499C5CA2C のようです。
$ xcrun simctl list devicetypes
...
== Devices ==
-- iOS 17.5 --
iPhone SE (3rd generation) (8539CB79-7931-4284-978A-3C46EA69315C) (Shutdown)
iPhone 15 (F8220220-F8EA-4E78-B963-02B499C5CA2C) (Shutdown)
iPhone 15 Plus (FF11D10B-BBEF-45E2-9EF3-0A3240A3AB56) (Shutdown)
iPhone 15 Pro (18082B41-EEDD-4A44-AF82-37A5D4BBFB08) (Shutdown)
iPhone 15 Pro Max (9ED779BA-F500-4CAC-8250-FDB36C85F6BC) (Booted)
iPad (10th generation) (B6460D49-C26B-446B-BD49-B47D226DE8E9) (Shutdown)
iPad mini (6th generation) (FF5B67AF-076C-4804-AD83-F75CAD235D61) (Shutdown)
iPad Air 11-inch (M2) (24C94583-82DB-49BF-986D-C99FAFB2C3B5) (Shutdown)
iPad Air 13-inch (M2) (3563CE6B-DF57-4940-8E12-5756CCF1F76D) (Shutdown)
iPad Pro 11-inch (M4) (B9EE1571-B15E-4FD9-9383-6B1C84AB6B56) (Shutdown)
iPad Pro 13-inch (M4) (DD13C38F-FAF6-4B0F-B474-B1DAA2A42644) (Shutdown)
...
2. デバイスを起動する
先ほど確認したデバイスIDをbootしてからSimulatorを開きます。
$ xcrun simctl boot F8220220-F8EA-4E78-B963-02B499C5CA2C $ open -a Simulator
開きました！
Terminalで再度リストを出力するとiOS 17.5のiPhone 15が起動状態（Booted）となっていることがわかります。
$ xcrun simctl list devicetypes
...
== Runtimes ==
iOS 17.5 (17.5 - 21F79) - com.apple.CoreSimulator.SimRuntime.iOS-17-5
== Devices ==
-- iOS 17.5 --
iPhone SE (3rd generation) (8539CB79-7931-4284-978A-3C46EA69315C) (Shutdown)
iPhone 15 (F8220220-F8EA-4E78-B963-02B499C5CA2C) (Booted)
iPhone 15 Plus (FF11D10B-BBEF-45E2-9EF3-0A3240A3AB56) (Shutdown)
iPhone 15 Pro (18082B41-EEDD-4A44-AF82-37A5D4BBFB08) (Shutdown)
iPhone 15 Pro Max (9ED779BA-F500-4CAC-8250-FDB36C85F6BC) (Shutdown)
iPad (10th generation) (B6460D49-C26B-446B-BD49-B47D226DE8E9) (Shutdown)
iPad mini (6th generation) (FF5B67AF-076C-4804-AD83-F75CAD235D61) (Shutdown)
iPad Air 11-inch (M2) (24C94583-82DB-49BF-986D-C99FAFB2C3B5) (Shutdown)
iPad Air 13-inch (M2) (3563CE6B-DF57-4940-8E12-5756CCF1F76D) (Shutdown)
iPad Pro 11-inch (M4) (B9EE1571-B15E-4FD9-9383-6B1C84AB6B56) (Shutdown)
iPad Pro 13-inch (M4) (DD13C38F-FAF6-4B0F-B474-B1DAA2A42644) (Shutdown)
...
対話型スクリプトで更に楽をしたい
私は対話型のスクリプトを作成してiOS SimulatorとAndroid Emulatorを起動しています。 大量のDeviceとRuntimeをインストールしている方やそれぞれの名称を覚えることが面倒な方はご参考までに。
まとめ
ローカル環境で開発している時、実機端末で動作するAPIを確認する時、特定のデバイスで不具合が発生した時、様々なケースでSimulator/Emulatorを使った開発環境は役立っていくことでしょう。
チームメンバーに毎回こういった情報をオンボーディングするのも大変ですので、この資料が皆さんに少しでも役立てば嬉しく思います。
最後に
現在プレックスではソフトウェアエンジニア、フロントエンドエンジニア、UIデザイナーなど各業種を募集しています。
メンバー全員で行動や技能の基準値を上げていくことで強い組織を目指しています。
一緒に働いてみたいと思った方がいましたら、是非ご連絡をお待ちしています！
関連リンク
iOS
developer.apple.com developer.apple.com developer.apple.com
Android
developer.android.com developer.android.com developer.chrome.com
