Search docs/

iOSでの開発

Contents

このガイドでは、Capacitor または Cordovaを使用してIonicアプリをiOSのシミュレータとデバイス上で実行する方法について説明します。

iOS上でIonicアプリケーションを実行するための2つの方法があります。Xcode上で実行することIonic CLIを使って実行することです。 Xcode上での実行は一般的で安定していますが、Ionic CLIを使った方法はライブリロードを利用することができます。

プロジェクト設定

アプリを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 --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 --address=0.0.0.0

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 --address=0.0.0.0

Debugging iOS Apps

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

Safari Web Inspectorを使う

Safariは、iOSシミュレータとデバイスに対してWeb Inspectorをサポートしています。Developメニューを開き、シミュレータまたはデバイスを選択してから、Ionicアプリを選択してWeb Inspectorを開きます。

Develop が表示されない場合は、 Safari » Preferences » Advanced » Show Develop menu in menu bar を有効にしてください。

Safari Web Inspector

ネイティブログの表示

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

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

Xcode Console

Previous
Running Overview
Next
Running on Android