このガイドでは、 Capacitor または Cordova を使用して、iOSシミュレータおよびデバイス上でIonicアプリケーションを実行およびデバッグする方法について説明します。iOSアプリは、XcodeがインストールされているmacOS上でのみ開発できます。
iOS上でIonicアプリを実行するためのワークフローは2つあります:
Xcodeアプローチの方が一般的に安定していますが、Ionic CLIを使ったアプローチでは、 ライブリロード 機能が提供されています。
Xcode はネイティブなiOSアプリを作るためのIDEです。これにはiOS SDKとXcodeコマンドラインツールが含まれている。XcodeはAppleアカウントで無料でダウンロードできるし、App Storeからインストールすることもできます。
Xcodeをインストールしたら、使用するコマンドラインツールが選択されていることを確認します:
すべてのiOSアプリは、開発用であってもコード署名されていなければならない。幸いなことに、Xcodeは自動コード署名によってこれを簡単にしてくれます。唯一の前提条件はApple IDです。
Xcodeを開き、 Xcode » Preferences » Accounts に移動します。Apple IDが表示されない場合は、追加します。ログインすると、Personal TeamがApple IDのチームリストに表示されます。
iOSシミュレータは、Mac上のiOSデバイスをエミュレートする。次のドキュメントは、iOSシミュレータを簡単にセットアップする方法です。詳細については、 Appleのドキュメンテーション を参照してください。
Xcodeを開き、Window » Devices and Simulators に移動します。iPhone 11シミュレータが存在しない場合は作成します。
Cordovaがプログラムビルドをサポートするには、追加のセットアップが必要です。 Capacitorには不要です。
ios-sim と ios-deploy は、開発中にiOSシミュレータとiOSデバイスにアプリをデプロイするユーティリティです。これらは npm を使ってグローバルにインストールすることができます。
$ npm install -g ios-sim
$ brew install ios-deploy
アプリをiOSシミュレータやデバイスにデプロイする前に、ネイティブのプロジェクトを設定する必要があります。
ネイティブのプロジェクトが存在しない場合は、以下を実行します。
Capacitorの場合は、以下を実行します。
$ ionic capacitor add ios
Cordovaの場合は、以下を実行します。
$ ionic cordova prepare ios
Package IDを設定
Capacitorの場合は、capacitor.config.json ファイルを開き、appIdプロパティを変更します。
Cordovaの場合は、config.xmlファイルを開き、idを変更し<widget>でルートを設定します。要素の属性を変更します。詳しくは the Cordova documentation をご覧ください。
Xcodeでプロジェクトを開きます
Capacitorの場合は、次のコマンドを実行してXcodeでアプリを開きます。
$ ionic capacitor open ios
Cordovaの場合は、Xcodeを起動したあと、File » Openからアプリを探します。アプリのディレクトリplatforms/iosを開きます。
Projectのナビゲーションから、プロジェクトのrootにあるproject editorを開きます。Identityで、設定されている Package ID は Bundle Identifier と一致していることを確認します。
同じproject editorのSigningで、セクションで、Automatically manage signingが有効になっていることを確認します。 次に、Development Teamを選択してください。Development Teamを選択すると、Xcodeは自動的にプロビジョニングと署名を準備しようとします。
このワークフローでは、Xcodeは一般的なコンパイルと署名の問題を自動的に修正できます。
Ionicアプリを開発し、それをネイティブプロジェクトと同期させます。
変更が検知がある度に、iOSシミュレータやデバイスが変更を検知するより前に、IonicアプリをWebアセットにビルドする必要があります。その後、Webアセットをネイティブプロジェクトにコピーします。幸いなことに、このプロセスはIonic CLIコマンドひとつで簡単にできます。
Capacitorの場合は、以下を実行します。
$ ionic capacitor copy ios
$ ionic capacitor update
Cordovaの場合は、以下を実行します。
$ ionic cordova prepare ios
Xcodeで、目的のシミュレータまたはデバイスを選択して再生ボタンをクリックします。
Ionic CLIは、コマンドひとつで、Ionicアプリを作成、コピーし、iOSシミュレータやデバイスにデプロイできます。 ionic serveのようなライブリロード 機能を利用するために、開発用のサーバを遅延することもできます。
ライブリロードを使うと、アプリのソースファイルに加えられた変更がウェブアセットの再構築を引き起こし、その変更は再デプロイすることなくシミュレータやデバイスに反映されます。
iOSデバイスでは、デバイスとコンピュータが同じWi-Fiネットワーク上にある必要があります。デバイスが接続できるように、devサーバーの外部URLも必要です。外部アドレスにバインドするには、--external (または--host=0.0.0.0)を使用します。
CapacitorにはXcodeを利用してアプリケーションバイナリの構築とデプロイを行います。Ionic CLIで、ライブリロードサーバを起動し、Capacitorを設定して1つのコマンドで使用できます。
以下を実行し、ターゲットシミュレータまたはデバイスを選択し、Xcodeの再生ボタンをクリックします:
ionic capacitor run ios -l --external
Cordovaはネイティブプロジェクトをプログラムでビルドしてデプロイすることができます。
ライブリロードサーバを起動し、アプリをビルドしてデプロイするには、以下を実行します:
ionic cordova run ios -l --external
アプリがiOSデバイスやシミュレーター上で動くようになったら、Safariでデバッグできます。
SafariはiOSシミュレータとデバイスのWeb Inspectorをサポートしています。Developメニューを開いてシミュレータまたはデバイスを選択し、Ionic Appを選択してWeb Inspectorを開きます。
*Develop メニューが非表示になってる場合は、Safari » Preferences » Advanced » Show Develop menu in menu bar** から有効にします。
アプリがリストにない場合は、 Settings » Safari » Advanced » Web Inspector からデバイスのWeb Inspectorを有効にする必要があります。
Xcodeで実行している場合、ネイティブログはXcodeの Console にあります。
Console が表示されない場合, View » Debug Area » Activate Consoleを有効化してください。
