Search docs/

iOSでの開発

This guide covers how to run and debug Ionic apps on iOS simulators and devices using Capacitor or Cordova.

There are two workflows for running Ionic apps on iOS:

The Xcode approach is generally more stable, but the Ionic CLI approach offers live-reload functionality.

To develop for iOS, make sure you have followed the iOS Environment Setup.

プロジェクト設定

アプリをiOSシミュレータやデバイスにデプロイする前に、ネイティブのプロジェクトを設定する必要があります。

  1. ネイティブのプロジェクトが存在しない場合は、以下を実行します。

    Capacitorの場合は、以下を実行します。

     $ ionic capacitor add ios

    Cordovaの場合は、以下を実行します。

     $ ionic cordova prepare ios
  2. Package IDを設定

    Capacitorの場合は、capacitor.config.json ファイルを開き、appIdプロパティを変更します。

    Cordovaの場合は、config.xmlファイルを開き、idを変更し<widget>でルートを設定します。要素の属性を変更します。詳しくは the Cordova documentation をご覧ください。

  3. Xcodeでプロジェクトを開きます

    Capacitorの場合は、次のコマンドを実行してXcodeでアプリを開きます。

     $ ionic capacitor open ios

    Cordovaの場合は、Xcodeを起動したあと、File » Openからアプリを探します。アプリのディレクトリplatforms/iosを開きます。

  4. Projectのナビゲーションから、プロジェクトのrootにあるproject editorを開きます。Identityで、設定されている Package ID は Bundle Identifier と一致していることを確認します。

    Xcode Identity Setup

  5. 同じproject editorのSigningで、セクションで、Automatically manage signingが有効になっていることを確認します。 次に、Development Teamを選択してください。Development Teamを選択すると、Xcodeは自動的にプロビジョニングと署名を準備しようとします。

    Xcode Signing Setup

Xcodeで実行する

このワークフローでは、Xcodeは一般的なコンパイルと署名の問題を自動的に修正できます。

  1. Ionicアプリを開発し、それをネイティブプロジェクトと同期させます。

    変更が検知がある度に、iOSシミュレータやデバイスが変更を検知するより前に、IonicアプリをWebアセットにビルドする必要があります。その後、Webアセットをネイティブプロジェクトにコピーします。幸いなことに、このプロセスはIonic CLIコマンドひとつで簡単にできます。

    Capacitorの場合は、以下を実行します。

     $ ionic capacitor copy ios

    Cordovaの場合は、以下を実行します。

     $ ionic cordova prepare ios
  2. Xcodeで、目的のシミュレータまたはデバイスを選択して再生ボタンをクリックします。

    Xcode Play Button Area

Ionic CLIを使用して実行する

Ionic CLIは、コマンドひとつで、Ionicアプリを作成、コピーし、iOSシミュレータやデバイスにデプロイできます。 ionic serveのようなライブリロード 機能を利用するために、開発用のサーバを遅延することもできます。

With live-reload, changes made to the app's source files trigger a rebuild of web assets and the changes are reflected on the simulator or device without having to deploy again.

Warning: For iOS devices, the device and the computer need to be on the same Wi-Fi network. An external URL for the dev server is also required so the device can connect to it. Use --external (or --address=0.0.0.0) to bind to external addresses.

Live-reload with Capacitor

Capacitor does not yet have a way to build native projects. It relies on Xcode to build and deploy app binaries. However, the Ionic CLI can boot up a live-reload server and configure Capacitor to use it with a single command.

Run the following, then select a target simulator or device and click the play button in Xcode:

$ ionic capacitor run ios -l --external

Live-reload with Cordova

Cordova can build and deploy native projects programmatically.

To boot up a live-reload server, build, and deploy the app, run the following:

$ ionic cordova run ios -l --external

Debugging iOS Apps

Once an app is running on an iOS device or simulator, it can be debugged in Safari.

Safari Web Inspectorを使う

Safari has Web Inspector support for iOS simulators and devices. Open the Develop menu and select the simulator or device, then select the Ionic App to open Web Inspector.

If the Develop menu is hidden, enable it in Safari » Preferences » Advanced » Show Develop menu in menu bar.

If the app isn't listed, the Web Inspector may need to be enabled on the device in Settings » Safari » Advanced » Web Inspector.

Safari Web Inspector

ネイティブログの表示

Xcodeで実行している場合、ネイティブログはXcodeの Console にあります。

Console が表示されない場合, View » Debug Area » Activate Consoleを有効化してください。

Xcode Console

Previous
Running Overview
Next
Running on Android