iOSおよびAndroidへのデプロイ
プロジェクトの作成時にCapacitorを追加したため、フォトギャラリーアプリをデバイスにインストールするまで、残りの手順はわずかです。このアプリの完全なソースコードはこちらにあります。
Capacitorの設定
Capacitorは、Ionicの公式アプリランタイムであり、WebアプリをiOS、Androidなどのネイティブプラットフォームに簡単にデプロイできます。過去にCordovaを使用したことがある場合は、こちらで違いについて詳しくご覧ください。
ターミナルで ionic serve を実行している場合は、キャンセルしてください。Ionicプロジェクトを新たにビルドし、報告されたエラーを修正してください。
ionic build
次に、iOSとAndroidの両方のプロジェクトを作成します
$ ionic cap add ios
$ ionic cap add android
プロジェクトのルートにandroidとiosのフォルダが作成されます。これらは完全にスタンドアロンのネイティブプロジェクトであり、Ionicアプリの一部と見なす必要があります（つまり、ソース管理にチェックインし、ネイティブツールを使用して編集するなど）。
Webディレクトリ（デフォルト：www）を更新するビルド（例：ionic build）を実行するたびに、それらの変更をネイティブプロジェクトにコピーする必要があります。
ionic cap copy
注：コードのネイティブ部分を更新した（新しいプラグインの追加など）場合は、sync コマンドを使用します。
ionic cap sync
iOSのデプロイ
iOSアプリをビルドするには、Macコンピュータが必要です。
Capacitor iOSアプリは、Xcode（AppleのiOS/Mac IDE）で設定および管理され、依存関係はCocoaPodsによって管理されます。このアプリをiOSデバイスで実行する前に、完了する必要のある手順がいくつかあります。
まず、Capacitorの open コマンドを実行して、XcodeでネイティブiOSプロジェクトを開きます。
ionic cap open ios
一部のネイティブプラグインを動作させるには、ユーザー権限を設定する必要があります。フォトギャラリーアプリでは、これにはカメラプラグインが含まれます。iOSでは、Camera.getPhoto()が最初に呼び出された後、アプリがカメラの使用を許可するようにユーザーに求めるモーダルダイアログが自動的に表示されます。これを駆動する権限には、「プライバシー - カメラの使用」というラベルが付いています。これを設定するには、Info.plistファイルを変更する必要があります（詳細はこちら）。アクセスするには、[情報]をクリックし、[カスタムiOSターゲットプロパティ]を展開します。
Info.plistの各設定には、低レベルのパラメータ名と高レベルの名前があります。デフォルトでは、プロパティリストエディターには高レベルの名前が表示されますが、多くの場合、未加工の低レベルの名前を表示するように切り替えると便利です。これを行うには、プロパティリストエディターの任意の場所を右クリックし、「生のキー/値」を切り替えます。
NSCameraUsageDescriptionキーを追加し、値を「写真を撮るため」など、アプリがカメラを使用する必要がある理由を説明するものに設定します。値フィールドは、権限プロンプトが開いたときにアプリユーザーに表示されます。
カメラプラグインに必要な他の2つのキー、NSPhotoLibraryAddUsageDescriptionとNSPhotoLibraryUsageDescriptionを追加する際も同じプロセスに従います。
次に、左側のプロジェクトナビゲーターでAppをクリックし、Signing & Capabilitiesセクション内で開発チームを選択します。
権限を設定し、開発チームを選択したら、実際のデバイスでアプリを試す準備ができました！iOSデバイスをMacコンピュータに接続し、それを選択して（私の場合は App -> Matthew's iPhone）、[ビルド]ボタンをクリックして、デバイスにアプリをビルド、インストール、起動します。
フォトギャラリータブの[カメラ]ボタンをタップすると、権限プロンプトが表示されます。[OK]をタップしてから、カメラで写真を撮ります。その後、写真がアプリに表示されます！
Androidのデプロイ
Capacitor Androidアプリは、Android Studioで設定および管理されます。このアプリをAndroidデバイスで実行する前に、完了する必要のある手順がいくつかあります。
まず、Capacitorの open コマンドを実行して、Android StudioでネイティブAndroidプロジェクトを開きます。
ionic cap open android
iOSと同様に、カメラを使用するための適切な権限を有効にする必要があります。これらの権限はAndroidManifest.xmlファイルで設定します。Android Studioはおそらくこのファイルを自動的に開きますが、開かない場合は、android/app/src/main/の下にあります。
Permissionsセクションまでスクロールし、次のエントリが含まれていることを確認します
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
ファイルを保存します。権限を設定したら、実際のデバイスでアプリを試す準備ができました！Androidデバイスをコンピュータに接続します。Android Studio内で、[実行]ボタンをクリックし、接続されているAndroidデバイスを選択して、[OK]をクリックして、デバイスにアプリをビルド、インストール、起動します。
もう一度、フォトギャラリータブの[カメラ]ボタンをタップすると、権限プロンプトが表示されるはずです。[OK]をタップしてから、カメラで写真を撮ります。その後、写真がアプリに表示されるはずです。
フォトギャラリーアプリがAndroidおよびiOSデバイスにデプロイされました。🎉
このチュートリアルの次の部分では、Ionic CLIのライブリロード機能を使用して、写真の削除を迅速に実装し、フォトギャラリー機能を完成させます。