Skip to main content
Version: v7 (beta)

iOSでの開発

このガイドでは、 Capacitor または Cordova を使用して、iOSシミュレータおよびデバイス上でIonicアプリケーションを実行およびデバッグする方法について説明します。iOSアプリは、XcodeがインストールされているmacOS上でのみ開発できます。

iOS上でIonicアプリを実行するためのワークフローは2つあります:

Xcodeアプローチの方が一般的に安定していますが、Ionic CLIを使ったアプローチでは、 ライブリロード 機能が提供されています。

Xcodeのセットアップ

Xcode はネイティブなiOSアプリを作るためのIDEです。これにはiOS SDKとXcodeコマンドラインツールが含まれている。XcodeはAppleアカウントで無料でダウンロードできるし、App Storeからインストールすることもできます。

Xcodeをインストールしたら、使用するコマンドラインツールが選択されていることを確認します:

xcode-select --install

Development Teamの設定

すべてのiOSアプリは、開発用であってもコード署名されていなければならない。幸いなことに、Xcodeは自動コード署名によってこれを簡単にしてくれます。唯一の前提条件はApple IDです。

Xcodeを開き、 Xcode » Preferences » Accounts に移動します。Apple IDが表示されない場合は、追加します。ログインすると、Personal TeamがApple IDのチームリストに表示されます。

Xcode Accounts

iOS Simulatorの作成

iOSシミュレータは、Mac上のiOSデバイスをエミュレートする。次のドキュメントは、iOSシミュレータを簡単にセットアップする方法です。詳細については、 Appleのドキュメンテーション を参照してください。

Xcodeを開き、Window » Devices and Simulators に移動します。iPhone 11シミュレータが存在しない場合は作成します。

iOS Simulators

Cordova のセットアップ

Cordovaがプログラムビルドをサポートするには、追加のセットアップが必要です。 Capacitorには不要です。

ios-sim & ios-deploy

ios-sim と ios-deploy は、開発中にiOSシミュレータとiOSデバイスにアプリをデプロイするユーティリティです。これらは npm を使ってグローバルにインストールすることができます。

$ npm install -g ios-sim
$ brew install ios-deploy

プロジェクト設定

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

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

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

    $ ionic capacitor add ios

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

    $ ionic cordova prepare ios

    1. Package IDを設定

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

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

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

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

    $ ionic capacitor open ios

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

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

    Xcode Identity Setup

  3. 同じ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
    $ ionic capacitor update

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

    $ ionic cordova prepare ios

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

    Xcode Play Button Area

Ionic CLIを使用して実行する

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

ライブリロードを使うと、アプリのソースファイルに加えられた変更がウェブアセットの再構築を引き起こし、その変更は再デプロイすることなくシミュレータやデバイスに反映されます。

caution

iOSデバイスでは、デバイスとコンピュータが同じWi-Fiネットワーク上にある必要があります。デバイスが接続できるように、devサーバーの外部URLも必要です。外部アドレスにバインドするには、--external (または--host=0.0.0.0)を使用します。

Capacitorを使ったライブリロード

CapacitorにはXcodeを利用してアプリケーションバイナリの構築とデプロイを行います。Ionic CLIで、ライブリロードサーバを起動し、Capacitorを設定して1つのコマンドで使用できます。

以下を実行し、ターゲットシミュレータまたはデバイスを選択し、Xcodeの再生ボタンをクリックします:

ionic capacitor run ios -l --external

Cordovaを使ったライブリロード

Cordovaはネイティブプロジェクトをプログラムでビルドしてデプロイすることができます。

ライブリロードサーバを起動し、アプリをビルドしてデプロイするには、以下を実行します:

ionic cordova run ios -l --external

iOSアプリのデバッグ

アプリがiOSデバイスやシミュレーター上で動くようになったら、Safariでデバッグできます。

Safari Web Inspectorを使う

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

note

*Develop メニューが非表示になってる場合は、Safari » Preferences » Advanced » Show Develop menu in menu bar** から有効にします。

アプリがリストにない場合は、 Settings » Safari » Advanced » Web Inspector からデバイスのWeb Inspectorを有効にする必要があります。

Safari Web Inspector

ネイティブログの表示

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

note

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

Xcode Console

Contents

Edit this page