この記事は、 PLEX Advent Calendar 2024 の3日目の記事です。
こんにちは
株式会社プレックスでWebアプリケーションの開発をしているtetty0217 です。
はじめに
皆さんはどのようなタイミング・方法でWebフロントエンドアプリケーションのモバイルビューを開発・デバッグ しているでしょうか。
PCブラウザのレスポンシブモードを使って開発したり、QA期間に実機端末でデバッグ したりなど様々でしょう。
本記事はその実機端末に近い環境であるiOS SimulatorとAndroid Emulatorを使用してアプリケーションをデバッグ するための環境をセットアップすることにフォーカスした解説記事です。
まとまった情報が出回っていない中、社内メンバーに対するオンボーディングを一括しておこなうためにもこの記事を執筆したのでぜひご利用いただけると幸いです。
対象読者
「スマートフォン 端末が不足している」「スマートフォン 端末特有の不具合やAPI をローカル環境で再現したい」そんな開発者の方にお役立ちな内容となっております。
知りたい箇所だけピックアップして読んでいただけると良いです。
章立て
前提
大事ですね前提。本記事では下記の環境をデバッグ に使用しております。
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 の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を起動
ようやくインストールが終わりましたね。おめでとうございます。
インストールが完了したらXcode のメニューバーから 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
にアクセスした時の画面
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
から起動できるようになります。
新しいSimulatorの登録ダイアログ
起動したいデバイス を選択
【デバッグ 編】iOS Simulator × Safari Web Inspector
この章の目的
皆さんが普段からDevtoolsなどでアプリケーションをデバッグ しているように、Simulator上で動作するブラウザをDevtoolsでデバッグ します。
今回はiOS Simulatorに初期インストールされたSafari を使用しますのでSafari Web Inspectorを使用します。
PCのSafari の開発者モードを有効化する
Safari にはDeveloper用のメニューが存在し、今回のようにSafari 上で動作するアプリケーションをデバッグ するツールがいくつか搭載されています。
Safari のメニューバーに 開発
メニューがない方は有効化しましょう。
1. 機能の有効化
Safari のメニューバーの設定
から表示されるダイアログのメニューにある 詳細
を選択すると表示される Webデベロッパ用の機能を表示
にチェックを入れます。
有効化するとSafari のメニューバーに 開発
が表示されます。
開発メニューにはセッションのあるデバイス が表示されますので、iOS Simulatorとの接続にもこのメニューを使用することになります。
iOS Simulator上のサンプルアプリケーションをデバッグ する
先ほど起動したiOS Simulator上のSafari で再度 localhost:3000
にアクセスしましょう。
Web Inspectorを開く
localhost にアクセスした状態でSafari のメニューバーの開発
を選択すると下記画像のようにiPhone 15とlocalhost が表示されています。
localhost を選択することでいつものようにWeb Inspectorが起動し、macOS のSafari 上で動作するアプリケーションと同じようにデバッグ をすることが可能となります。
スマートフォン 端末により近い環境でデザインやエラー、パフォーマンスに関して調査することができますのでぜひ使っていきましょう!
Safari Web Inspector
ホームアプリの場合
サービスによってはPWAを動作させていたり、よりネイティブアプリに近しい状態で使用を推奨するものもあるでしょう。
その場合、スマートフォン 端末同様にホーム画面にアイコンを追加することが可能です。
メニューを開き
ホーム画面に追加する
追加するとアプリアイコンが表示されます。
そして、このホームアプリについても上記のようにSafari Web Inspectorと接続することができるわけです。
ホームアプリが追加された
【導入編】Android Emulatorと開発サーバーの接続
この章の目的
Android Emulatorで動作する仮想デバイス (AVD)を登録し、ローカルの開発サーバーにアクセスして画面を表示します。
使用ツール
AVDを管理できるツールはいくつかありますが、今回はその中でもメジャーであるAndroid Studio を使用していきます。
公式サイト から最新のアプリをインストールしておきましょう。
インストールウィザードの選択肢などはデフォルトのままでOKです。
Android Studio のVersionは 2024.2.1 Patch 2
を使用します。
※上記以降のバージョンを使用する場合はUIや手順が多少変わっている場合があることに注意してください。
インストールした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
Android Emulatorから開発サーバーにアクセスしよう
1. 開発サーバーを起動
Next.jsの開発サーバーはデフォルトでhttp://localhost:3000
として起動します。
$ npm run dev
PCのブラウザでhttp://localhost:3000
にアクセスした時の画面
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)なども基本的に機能するのでスマートフォン 端末に非常に近しい環境で開発をすることができます。
皆さんが普段から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 を確認しましょう。
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も動作させることができます。
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をインストールしている方やそれぞれの名称を覚えることが面倒な方はご参考までに。
github.com
まとめ
ローカル環境で開発している時、実機端末で動作するAPI を確認する時、特定のデバイス で不具合が発生した時、様々なケースでSimulator/Emulatorを使った開発環境は役立っていくことでしょう。
チームメンバーに毎回こういった情報をオンボーディングするのも大変ですので、この資料が皆さんに少しでも役立てば嬉しく思います。
最後に
現在プレックスではソフトウェアエンジニア、フロントエンドエンジニア、UIデザイナーなど各業種を募集しています。
メンバー全員で行動や技能の基準値を上げていくことで強い組織を目指しています。
一緒に働いてみたいと思った方がいましたら、是非ご連絡をお待ちしています!
dev.plex.co.jp
関連リンク
developer.apple.com
developer.apple.com
developer.apple.com
developer.android.com
developer.android.com
developer.chrome.com