メインコンテンツへスキップ
バージョン: v8

iOS および Android へのデプロイ

プロジェクト作成時に Capacitor を追加したので、Photo Gallery アプリをデバイスにインストールするまで、あとわずかな手順しか残っていません！このアプリの完全なソースコードはこちらで見つけることができます。

Capacitor の設定​

Capacitor は、Ionic の公式アプリランタイムであり、iOS、Android などのネイティブプラットフォームにウェブアプリを簡単にデプロイできます。過去に Cordova を使用したことがある場合は、違いについて詳しくはこちらをご覧ください。

ターミナルで `ionic serve` を実行している場合は、キャンセルしてください。Ionic プロジェクトを新規にビルドし、報告されるエラーをすべて修正してください。

ionic build

次に、iOS プロジェクトと Android プロジェクトの両方を生成します。

$ ionic cap add ios
$ ionic cap add android

プロジェクトのルートに android フォルダと ios フォルダが作成されます。これらは完全に独立したネイティブプロジェクトであり、Ionic アプリの一部と考える必要があります（つまり、ソース管理にチェックインし、ネイティブツールを使用して編集するなど）。

ウェブディレクトリ（デフォルト: `build`）を更新するビルド（例: `ionic build`）を実行するたびに、これらの変更をネイティブプロジェクトにコピーする必要があります。

ionic cap copy

注: ネイティブ部分のコードを更新した後（新しいプラグインの追加など）、`sync` コマンドを使用してください。

ionic cap sync

iOS​

注

iOS アプリをビルドするには、Mac コンピューターが必要です。

Capacitor iOS アプリは、Xcode（Apple の iOS/Mac IDE）を使用して設定および管理され、依存関係は CocoaPods によって管理されます。このアプリを iOS デバイスで実行する前に、いくつかの手順を実行する必要があります。

最初に、ネイティブ iOS プロジェクトを Xcode で開く Capacitor の `open` コマンドを実行します。

ionic cap open ios

一部のネイティブプラグインが機能するには、ユーザー権限を設定する必要があります。写真のギャラリーアプリでは、これには Camera プラグインが含まれます。iOS は、`Camera.getPhoto()` が初めて呼び出された後に自動的にモーダルダイアログを表示し、アプリがカメラを使用することを許可するようユーザーに促します。これに関わる権限は、「プライバシー - カメラの使用」と呼ばれます。これを設定するには、`Info.plist` ファイルを変更する必要があります（詳細はこちら）。アクセスするには、「Info」をクリックし、「カスタム iOS ターゲットプロパティ」を展開します。

The Info.plist file in Xcode showing the NSCameraUsageDescription key added for camera access.

`Info.plist` の各設定には、低レベルのパラメーター名と高レベルの名前があります。デフォルトでは、プロパティリストエディターには高レベルの名前が表示されますが、生の低レベルの名前を表示する方が便利な場合がよくあります。これを行うには、プロパティリストエディター内の任意の場所を右クリックし、「生のキー/値」を切り替えます。

`NSCameraUsageDescription` キーを追加し、アプリがカメラを使用する必要がある理由を説明する値（例：「写真撮影のため」）を設定します。値フィールドは、権限プロンプトが開かれたときにアプリユーザーに表示されます。

Camera プラグインに必要な他の 2 つのキーである `NSPhotoLibraryAddUsageDescription` と `NSPhotoLibraryUsageDescription` も同じ手順で追加します。

次に、左側のプロジェクトナビゲーターで `App` をクリックし、「署名と機能」セクションで開発チームを選択します。

The Xcode interface displaying the Signing and Capabilities tab for an iOS app project.

権限を設定し、開発チームを選択したら、実機でアプリを試す準備ができました！iOS デバイスを Mac コンピューターに接続し、デバイスを選択します（私の場合は「App -> Matthew の iPhone」）。次に、「ビルド」ボタンをクリックして、アプリをビルド、インストール、およびデバイスで起動します。

Xcode toolbar highlighting the Build button used to compile and run an iOS app.

Photo Gallery タブのカメラボタンをタップすると、権限プロンプトが表示されます。「OK」をタップして、カメラで写真を撮ります。その後、写真がアプリに表示されます！

Two iPhones side by side, one showing the camera permission prompt and the other displaying a photo taken with the app.

Android​

Capacitor Android アプリは、Android Studio を使用して設定および管理されます。このアプリを Android デバイスで実行する前に、いくつかの手順を実行する必要があります。

最初に、ネイティブ Android プロジェクトを Android Studio で開く Capacitor の `open` コマンドを実行します。

ionic cap open android

iOS と同様に、カメラを使用するための正しい権限を有効にする必要があります。`AndroidManifest.xml` ファイルでこれらを設定します。Android Studio はこのファイルを自動的に開く可能性がありますが、開かない場合は、`android/app/src/main/` で探してください。

Android Studio editor showing the AndroidManifest.xml file with camera permissions.

`Permissions` セクションまでスクロールし、これらのエントリが含まれていることを確認します。

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

ファイルを保存します。権限を設定したら、実機でアプリを試す準備ができました！Android デバイスをコンピューターに接続します。Android Studio で「実行」ボタンをクリックし、接続されている Android デバイスを選択して、「OK」をクリックして、アプリをビルド、インストール、およびデバイスで起動します。

The Android Studio interface with arrows pointing to the Run button and the connected device.

再び、Photo Gallery タブのカメラボタンをタップすると、権限プロンプトが表示されます。「OK」をタップして、カメラで写真を撮ります。その後、写真がアプリに表示されます。

Two Android phones side by side, one showing the camera permission prompt and the other displaying a photo taken with the app.

Photo Gallery アプリが Android と iOS デバイスにデプロイされました！🎉

このチュートリアルの最後の部分では、Ionic CLI のライブリロード機能を使用して写真の削除をすばやく実装し、Photo Gallery 機能を完成させます。

目次

このページを編集する