# CordovaからCapacitorへの移行

この記事では、CordovaプロジェクトをCapacitorプロジェクトに変換した後の変更点と確認すべき事項について説明します。

### Capacitorとは？

Cordovaと同様に、Capacitorもクロスプラットフォームのモバイルアプリ開発フレームワークで、モダンなWeb技術を用いてiOSやAndroidなどのプラットフォームで動作する高性能なモバイルアプリを開発できます。

### Monacaユーザーにとっての意味は？

Monacaは現在、CordovaとCapacitorの両方のプロジェクトをサポートしています。ユーザーは新しいCapacitorプロジェクトを作成するか、既存のCordovaプロジェクトをCapacitorプロジェクトに変換することができます。

変換するには、「設定」メニューから「Capacitorに変換」サブメニューをクリックします。

![ja - convert to capacitor.png (40.1 kB)](https://img.esa.io/uploads/production/attachments/19330/2024/06/12/126947/ae691b1e-f073-4199-a1e4-be0d044dbcf4.png)

次に、以下のダイアログが表示されます。

![ja - dialog.png (81.8 kB)](https://img.esa.io/uploads/production/attachments/19330/2024/06/12/126947/4690c0d3-c0c2-4d5f-8d60-1c7c1e316c36.png)

ダイアログを確認すると、プロジェクトがCapacitorプロジェクトに変換されます。

### 変更点は何ですか？

変換後に作成および更新される新しいファイルは以下の通りです。

#### Capacitor設定ファイル

Cordovaでは、プロジェクト設定は「config.xml」に保存されます。Capacitorプロジェクトでは、「capacitor.config.json」に定義されています。移行プロセス中に、一部の設定が「config.xml」から「capacitor.config.json」にコピーされます。

```json
{
  "appId": "jp.co.asial.monaca",
  "appName": "capacitor-basic",
  "webDir": "www"
}
```

#### Trapeze設定ファイル

Capacitorでは、本来XcodeやAndroid Studioで直接設定するネイティブ設定がありますが、MonacaではTrapezeというライブラリを用いてconfig.yamlファイルで一元管理できます。CordovaプロジェクトをCapacitorプロジェクトに変換する際、Monacaは自動的にこのconfig.yamlファイルを作成し、Cordovaのconfig.xmlファイルから対応する設定を抽出して反映します。

```yaml
platforms:
  android:
    versionName: 1.0.0
    manifest:
      -
        file: AndroidManifest.xml
        target: manifest/application/activity
        attrs:
          'android:screenOrientation': unspecified
      -
        file: AndroidManifest.xml
        target: manifest
        inject: |
          <uses-permission android:name="android.permission.READ_MEDIA_IMAGES"/>
      -
        file: AndroidManifest.xml
        target: manifest
        inject: |
          <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
      -
        file: AndroidManifest.xml
        target: manifest
        inject: |
          <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
  ios:
    targets:
      App:
        version: 1.0.0
        xcconfig:
          -
            file: App/Config.xcconfig
            set:
              TARGETED_DEVICE_FAMILY: '1,2'
        plist:
          -
            replace: true
            entries:
              -
                UISupportedInterfaceOrientations:
                  - UIInterfaceOrientationPortrait
                  - UIInterfaceOrientationLandscapeLeft
                  - UIInterfaceOrientationLandscapeRight
              - NSCameraUsageDescription: 'Take photos'
              - NSPhotoLibraryAddUsageDescription: 'Add photos'
              - NSPhotoLibraryUsageDescription: 'Access photos'
```

#### 新しい依存関係

次の依存関係がCapacitorプロジェクトに追加されます。

* @capacitor/core
* @capacitor/android
* @capacitor/ios
* @capacitor/cli
* @trapezedev/configure
* @capacitor/assets

#### Cordovaプラグイン

すべてのCordovaプラグインがCapacitorプロジェクトでサポートされているわけではありません。以下は、既知の非対応プラグインです。

* monaca-plugin-monaca-core（Capacitorプロジェクトでは不要）
* cordova-plugin-add-swift-support（不要、CapacitorにはSwiftサポートが組み込まれている）
* cordova-plugin-admobpro
* cordova-plugin-braintree
* cordova-plugin-code-push
* cordova-plugin-compat
* cordova-plugin-console（不要、Capacitorには独自のコンソールがある）
* cordova-plugin-crosswalk-webview（CapacitorではWebViewの変更が許可されていない）
* cordova-plugin-fcm
* cordova-plugin-firebase
* cordova-plugin-ionic-keyboard（不要、Capacitorには独自のキーボードがある）
* cordova-plugin-ionic-webview（不要、CapacitorはWKWebViewを使用）
* cordova-plugin-music-controls（ビルドエラーを引き起こすためスキップ）
* cordova-plugin-qrscanner
* cordova-plugin-splashscreen（不要、Capacitorには独自のスプラッシュスクリーンがある）
* cordova-plugin-statusbar（不要、Capacitorには独自のステータスバーがある）
* cordova-plugin-wkwebview-engine（不要、CapacitorはWKWebViewを使用）
* cordova-plugin-googlemaps（iOSでビルドエラーを引き起こすため、iOSではスキップ）

プラグインがサポートされていない場合、まずプラグインを最新バージョンに更新してみてください。それでも正常に動作しない場合は、Capacitor公式またはコミュニティのCapacitorプラグインを使用する必要があります。

### 次のステップ

#### 設定ファイルの確認

* 新しいファイル（capacitor.config.jsonとconfig.yaml）にすべての必要な設定と構成が定義されているか手動で確認する必要があります。

#### アプリケーションアイコンとスプラッシュスクリーンの設定

* Capacitorプロジェクトへの変換プロセスでは、アプリアイコンとスプラッシュスクリーンは自動的に設定されません。Monacaの「設定」メニューから「Androidアプリ設定」または「iOSアプリ設定」を開き、それぞれ設定してください。

![Screenshot 2024-06-12 at 12.47.23.png (16.3 kB)](https://img.esa.io/uploads/production/attachments/19330/2024/06/12/126947/42ed85d6-5f1b-4d4a-9d1a-6fee5b76cecd.png)

* アイコン・スプラッシュ画像タブlら設定してます。

![Screenshot 2024-06-12 at 12.47.35.png (91.8 kB)](https://img.esa.io/uploads/production/attachments/19330/2024/06/12/126947/c7f2beaa-ecd5-4cf3-bc4e-96f4f64555cd.png)

#### iOSアプリのプライバシー設定

iOSアプリの場合、PrivacyInfo.xcprivacy ファイルに必要な権限 (カメラ、フォトライブラリなど) が記述されているか確認し、不足している場合は追加してください。

### 参考文献

* <https://capacitorjs.jp/docs/config>
* <https://trapeze.dev/docs/>
* <https://capacitorjs.jp/docs/cordova/migrating-from-cordova-to-capacitor>
* <https://developer.apple.com/documentation/bundleresources/privacy\\_manifest\\_files>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ja.docs.monaca.io/release_notes/migration-from-cordova-to-capacitor.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
