👌

Capacitor3プラグインをCapacitor4にアップデートしてプルリクする方法

2022/08/01に公開

Capacitor4がリリースされました🎉

なのですが、実際のところすぐに自分のプロジェクトをCapacitor4にアップデートできるかというと、使っているCapacitorプラグインが対応をしているかどうかを調査し、必要があればアップデートする必要があります。その方法について簡単にまとめようと思います。

Capacitor 4に対応してるかどうかの確認方法

調査自体はとても簡単で、レポジトリの package.json をみて、 @capacitor/core などのバージョンをみるだけです。

"devDependencies": {
    "@capacitor/android": "^3.0.0",
    "@capacitor/core": "^3.0.0",

このように、 ^3.0.0 となっているのはCapacitor3用のプラグインです。v4対応が終わっている場合は、以下のようになっています。

"devDependencies": {
    "@capacitor/android": "^4.0.0",
    "@capacitor/core": "^4.0.0",

とてもわかりにくいのは、バージョンが next や latest になってるプラグインですね。最近つくられたものはほとんどないと思うのですが、もしそういうのがあった場合は、レポジトリの更新が2022年7月31日以降あるかどうかでみれば大体あってます。それでもどうしても微妙だ！ということばあれば、 package-lock.json をみてください。

v4対応が済んでいれば対応は簡単です。そのプラグインの最新版をインストールするだけです。ただ、v4がでて間もないので、私も含めて多くの作者はCapacitor4対応バージョンをpre-releaseでpublishしています。その場合、 npm install plugin-name@latest ではインストールできないので注意が必要です。

などのRelease Noteをみて、v4対応をpre-releaseでだしてる場合は、 npm install plugin-name@next でインストールするようにしてください。

Capacitor 4対応していないプラグインをアップデートする

では、プラグインがv4対応していない場合はどうしたらいいでしょうか。作者の対応を待つのもひとつではあるのですが、せっかくなのでプルリクをつくってみませんか？簡単に検証してプルリクをつくる手順をご案内します。

1. forkして、cloneする

まずはレポジトリをforkして、ローカルにcloneしましょう。ここあたりの説明は割愛します。

2. アップデートしてnpm install

ターミナル（コマンドライン）で、cloneしたフォルダに移動します。そして、以下のコマンドを実行しましょう。

% npx @rdlabo/capacitor-plugin-to-v4
% npm install

そのプラグインの構成がCapacitorプラグインのデフォルトでしたら、これだけでアップデートが完了します🎉

3. npm linkで自分のプロジェクトと紐つける

npmレポジトリは、 npm link することで、自分のプロジェクトと紐つけることができます。まず、プラグインプロジェクトで以下を実行します。

% npm link

ついで、そのプラグインを利用する自分のCapacitorプロジェクトで、以下を実行します。例えば、 @capacitor-community/hoge というプラグインをアップデートするなら以下の通りです。

% npm link @capacitor-community/hoge

これで、あなたのプロジェクトから、ローカルの（アップデートした）プラグインを参照するようになりました。

4. 自分のCapacitorプロジェクトで動作を確認する

動作を確認してください。もし、まだ自分のCapacitorプロジェクトをCapacitor4にアップデートしていなければ、以下を先に実行するようにしてください。

% npm install @capacitor/cli
% npx cap migrate

プロジェクトをアップデートした直後に結構ハマりがちなのは、Androidで動作させようとした時に、Android StudioのJavaのバージョンがCapacitor4とあわないことです。

に書いてありますが、Gradle JDKをJava 11にするのを忘れないようにしてください。

5. プルリクをつくる

無事動きましたか？いろいろ操作してみてプラグインの機能が問題なさそうなら、プルリクをつくってください。お疲れ様でした！

トラブルシューティング

プラグインが利用してるライブラリのバージョンが低くてエラーが起きる

iOSだと、プラグインフォルダの （プラグイン名）.podspec と ios/Podfile でライブラリのバージョンを決定しています。

例）

Androidだと、プラグインフォルダの android/build.gradle です。

例）

ここのバージョンを上げることで、修正することができます。

Androidでライブラリをインストールできない

念の為、プラグインフォルダの android/build.gradle をみてください。もし、以下の2つところに、mavenCentralのレポジトリ登録がなければ追加してください。

まとめ

簡単ですね。ただ、プロジェクトで複数のCapacitor4対応していないプラグインがあってアップデートしないといけない場合、検証用の新プロジェクトをつくった方が原因追求は楽かと思います。

ちなみにプルリクがマージされなくても、 npm link で接続してる時点でCapacitorのビルドは成功しているので、そのままアプリストアにリリースすることも可能です。ぜひ、いいCapacitor4ライフを！