CapacitorのPluginをパッケージ化して使う方法

Capacitor Pluginのnpm package化に必要な最低限の実装

Junya Kawai

Published in

nextbeat-engineering

7 min readMar 23, 2023

はじめに

こんにちは、ネクストビートでエンジニアをしている川井です。

ネクストビートでは、モバイルアプリ開発にIonic framework, Capacitorを採用していおり、HTML, CSS, JavaScriptなどのWebの技術を使ってクロスプラットフォームアプリの開発を行なっています。

Capacitorにはさまざまなプラグインがあり、それらのプラグインを利用することによって、簡単にネイティブの機能にアクセスすることができます。例えば、端末のカメラを起動したり、push通知に関する処理を実行したり、アプリ内ブラウザでWebページを表示したりすることが可能です。

また、CapacitorのPluginは独自に開発することもでき、自身のアプリに組み込んだり、npmのパッケージとして配布することも可能です。

パッケージ化しておくと、様々なプロジェクトからインストールして利用できるため、同じようなプラグインを何度も作らずにすむので便利ですね。

今回は、CapacitorのPluginを作成し、パッケージとして配布する方法を紹介したいと思います。

Capacitorプラグインの作り方

プロジェクト作成

基本的にはCapacitorの公式ドキュメントの通りに進めていきます。

まずは以下のコマンドでプロジェクトを作成します。

npx @capacitor/create-plugin \
  --name packagename\                  # パッケージ名
  --package-id domain.packagename\     # パッケージID
  --class-name ClassName\              # Pluginのクラス名
  --repo https://github.com/aaa/bbb \  # Githubのリポジトリ
  --author author author_name\         # author
  --license MIT \                      # ライセンス
  --description "description"          # Pluginの説明

上記コマンドを実行すると、「packagename」という名前のディレクトリ配下にプロジェクトが作成されます。

tree packagename -L 1

packagename
├── CONTRIBUTING.md
├── Packagename.podspec
├── README.md
├── android
├── dist
├── example
├── ios
├── node_modules
├── package.json
├── rollup.config.js
├── src
└── tsconfig.json

Capacitor CLIのインストール

次に、プロジェクトにCapacitor CLIをインストールします。

cd packagename
npm i -D @capacitor/cli

これでプラグイン開発の準備は終わりました。

本来であれば、ここから必要な機能を開発していきますが、今回は割愛します。

プラグインを検証・ビルドする

以下のコマンドを実行します。

npm run verify

package.jsonを見ると、以下のような設定になっています。

"scripts": {
  "verify": "npm run verify:ios && npm run verify:android && npm run verify:web",
  "verify:ios": "cd ios && pod install && xcodebuild -workspace Plugin.xcworkspace -scheme Plugin -destination generic/platform=iOS && cd ..",
  "verify:android": "cd android && ./gradlew clean build test && cd ..",
  "verify:web": "npm run build",
  "lint": "npm run eslint && npm run prettier -- --check && npm run swiftlint -- lint",
  "fmt": "npm run eslint -- --fix && npm run prettier -- --write && npm run swiftlint -- --fix --format",
  "eslint": "eslint . --ext ts",
  "prettier": "prettier \"**/*.{css,html,ts,js,java}\"",
  "swiftlint": "node-swiftlint",
  "docgen": "docgen --api ClassNamePlugin --output-readme README.md --output-json dist/docs.json",
  "build": "npm run clean && npm run docgen && tsc && rollup -c rollup.config.js",
  "clean": "rimraf ./dist",
  "watch": "tsc --watch",
  "prepublishOnly": "npm run build"
},

verify:ios verify:android verify:web のそれぞれのコマンドが順次実行され、iOS/Androidプロジェクトのビルドや、TypeScriptのコンパイルが実行されます。

設定も最初から作成されているため、ネイティブやTypeScriptのビルドやコンパイルの知識がなくてもPluginを簡単にパッケージ化することができます。

プラグイン側の準備はこれで完了です。

パッケージを公開する

npm link

Local環境で検証する場合はPluginのディレクトリのrootで以下のコマンドを実行します。

npm link

これにより、Localのnode_moduleを管理しているディレクトリにシンボリックリンクが作成され、他のプロジェクトから参照できるようになります。

参照する側のプロジェクトでは、以下のコマンドを実行します。

npm link packagename

（詳しくはこちら）

npm publish

npmリポジトリにパッケージを公開する場合はPluginのディレクトリのrootで以下のコマンドを実行します。

npm publish

参照する側のプロジェクトでは、いつも通りinstallを実行します。

npm install packagename

（詳しくはこちら）

まとめ

今回は、CapacitorのPluginを作成して、npmのパッケージとして公開する方法について紹介しました。

capacitorのPlugin Generatorを使うことで、package.jsonやrollupの設定も自動で行なってくれるため、とても簡単にパッケージ化することができました。初めてnpmのパッケージを作成する人でも、特に詰まることなく進めることができるようになっているのではないでしょうか。

今後も引き続き情報を発信していければと思います。

We are hiring!

株式会社ネクストビートでは

「人口減少社会において必要とされるインターネット事業を創造し、ニッポンを元気にする。」
を理念に掲げ一緒に働く仲間を募集しております。

https://www.nextbeat.co.jp/recruit