Capacitorの情報まとめとnative-pluginの作り方

はじめに

CapacitorとはクロスプラットフォームWebアプリケーションのネイティブブリッジ。
1つのコードベースでiOS、Android、Electron、Web上でNative SDKを起動出来る。Ionic Frameworkアプリ用に最適化されていて、あらゆるWebアプリフレームワークで使用できる。
公式ドキュメント

Cordovaとの相違点

CordovaのようにWebView上にWebページを表示するが、ページの一部、たとえばトーストだけはネイティブUIを利用するといった、ネイティブとWebViewの共存を行える点が特徴。
Web アプリケーション用のPWA。

オリジナルnative-plugin作成手順(Web版)

プロジェクト作成

ionicを使いプロジェクトの生成。

$ ionic start hoge blank

ここでionicのSDKを使うか聞かれるのでnを選択。

プロジェクトに移動

$ cd [project-name]

$ npm install

Capacitorのインストール

下記のコマンドでインストール。

$ npm install --save @capacitor/core @capacitor/cli

Capacitorの下記コマンドで初期設定

アプリ名とバンドル名を聞かれるので入力

$ npx cap init

お好みのプラットフォームの追加

$ npx cap add android

$ npx cap add ios

$ npx cap add electron

オリジナルnative pluginの作成

下記のコマンドを入力してplugin を作成する。

$ npx @capacitor/cli plugin:generate

これにより、新しいプラグインに関する情報の入力を求めるウィザードが起動するので入力する。

例:

✏️  Creating new Capacitor plugin

//npmで使用する名前の設定

? Plugin NPM name (snake-case): LogDasu

//ドメインの識別子。用途はJavaのパッケージ名

? Plugin id (domain-style syntax. ex: com.example.plugin)com.example.plugin

//JavaとSwiftで使用されるクラスの初期名。

? Plugin class name (ex: AwesomePlugin) LogDasuNen

//pluginの説明

? description: log dasuyo

//PluginのソースコードがホストされるgitリポジトリのURL

? git repository:

//作者

? author: Shinjiro Suzuki

//デフォでOKそのままEnter

? license: MIT

//Yで作成される。

? package.json will be created, do you want to continue? Y/n

pluginをいじる

ここでいじるファイルは下記のファイルです。

LogDasu/src/web.ts

自分はログ出すだけでいいので下記だけ追記しました。

console.log('ログだしたよ！');

pluginをnpm publishするorローカルでインストールして使う

自身で作ったpluginはそのままimportして使用しようとするとpluginがroot配下にないからダメとエラーがでます。

pluginをnpm publishする

このパターンは特にpublishしても良いよーという奴専用です

npm publishしてnpm install [plugin name]してnode_modulesの中に入れてimportして使用する必要があります。

初めてnpm publishしたが、npmでめっちゃ詰まりました。

この件は今度また別でブログあげます…

ローカルでインストールして使う

これは簡単で下記の様にインストールするとnode_modulesに入ってくれます。

例：

$npm install /Users/s-suzuki/Desktop/hoge/LogDasu

home.tsにインポートしてちゃんと動くか確認する

エラーが出ずログを出してれば成功！！

不具合

5月9日現在Beta版になっておりGW中にテコ入れがあった為、公式のドキュメントとnpmでインストールした物とでは相違点がありドキュメント通りにiosとandroidのプラグインを作成しようとすると失敗する。

(確認出来ている物でyour-plugin/ios/Plugin/Plugin.xcworkspaceが無くなっておりX-codeで開く事が出来ない。

Androidに関してもyour-plugin/android/your-pluginが無いのでAndroid Studioが開けない。)

おわりに

CapacitorはBeta版なんだなと。

実用化するにはちょっと早い気がします。

いつの日かまたCapacitorを使いnative-pluginを作ってみたいと思います。