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ディレクトリ（デフォルト：build）を更新するビルド（例：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ファイルを変更する必要があります（詳細はこちら）。これにアクセスするには、「Info」をクリックし、「Custom iOS Target Properties」を展開します。
Info.plistの各設定には、ローレベルのパラメーター名とハイレベルの名前があります。デフォルトでは、プロパティリストエディタにはハイレベルの名前が表示されますが、多くの場合、生のローレベルの名前を表示するように切り替えるのが便利です。これを行うには、プロパティリストエディタの任意の場所を右クリックし、「Raw Keys/Values」を切り替えます。
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のライブリロード機能を使用して、写真の削除を迅速に実装し、フォトギャラリー機能を完成させます。