内容は、いつものとおり、タイトルのまま。
ざっくり覚え書きていどに書いた、まだ draft 版です
そのうち、清書します。時間があれば。いつか。
下準備
-
gulpが必要なのでインストールしておきます。
$ npm install -g gulp
- 自分の ionic2 (3,4...) プロジェクトで import している
@ionic-nativeと同じバージョンのソースを取得します。
$ git clone https://github.com/ionic-team/ionic-native -b v4.2.0
@ionic-native に自作プラグインを追加
雛形を作ります。
$ cd ionic-native
$ gulp plugin:create -n MyCoolPlugin
[10:58:20] Using gulpfile ~/ionic-native/gulpfile.js
[10:58:20] Starting 'plugin:create'...
[10:58:20] Finished 'plugin:create' after 73 ms
上の例だと ionic-native/src/@ionic-native/my-cool-plugin に index.ts ファイルが雛形として作成されます。
雛形のコメントとか不要であれば
$ gulp plugin:create -m -n MyCoolPlugin
と、-m ：minimal オプションを付けます。
プラグインのインターフェイスを記述
元になる plugin の www/index.js や、www/index.js 内で exec で呼び出している実装側の関数の CDVInvokedUrlCommand インターフェイスを受けて引数を展開している部分や、CDVPluginResult でレスポンスを詰めている部分を見ながら、 exec で呼び出されている関数のパラメータ／戻り値の型を定義していきます。
私の場合は、連想配列になっていたり key-value で参照しているものは(数が多くなければ) index.ts の中で interface として定義してます。
面倒であれば、www/index.js に書かれているパラメータの名前と数を合わせて any でとりあえずはいいかと。
www/index.js で
myCoolPlugin.greatFunction = function(mode, dic, name, success, failure){
exec(success, failure, "MyCoolPlugin", "nativeFunction", [mode, dic, name]);
};
のように書かれている場合、myCoolPlugin.greatFunction(....,success, failure) の引数の最後2つが success と failure になっていれば、index.ts ファイルでは
@Cordova()
greatFunction( mode: MyModeEnum, dic: {}, name: string ): Promise<GreatResponse> { return ; };
のようにかきます。
(省略していますが、MyModeEnum は extern enum MyModeEnum {...}、GreatResponse は extern interface GreatResponse {...} のように index.ts に宣言しておきます。
同期型の関数の書き方や、succ/fail が引数の先頭にある場合、その他イロイロは ionic-native の Development Guide を参照するとざっと書いてあります。
ここ、頑張るところ
定義が書けていれば、引数やレスポンスの型チェックが動くのでプラグイン連携のツマヅキポイントの 1/3 くらいはクリアするはず。ここがガンバリポイント。
コンパイル
@ionic-native のルートフォルダで
$ npm run build
すればコンパイルが実行されますが、全部のプラグインをコンパイルして時間かかります。
自作の plugin のみコンパイルする場合は
$ npm run build -n my-cool-plugin
-n でプラグイン名を指定します。
テスト、import
dist/@ionic-native/my-cool-plugin/ フォルダを自分の ionic プロジェクトの node_modules/@ionic-native/my-cool-plugin/ にコピーすれば、他の @ionic-native プラグイン同様に呼び出して使えるようになるのでひとまずこれで動作確認。
npm パッケージ化
build したフォルダで npm のパッケージにできます。
$ cd dist/@ionic-native/my-cool-plugin
$ npm pack
$ ls my-cool-plugin-1.0.0.tgz
my-cool-plugin-1.0.0.tgz
できた tgz ファイルを ionic プロジェクトで npm install --save します。
また、このファイルは持ち運び可能なので、非公開プラグインなどの場合でも npm パッケージの形でファイルでチームメンバーで共有したり、社内のリポジトリに登録してイントラの URL で npm install しちゃえば外に公開する事なく@ionic-nativeプラグインを素早く共有・展開できます。
プラグインのnpmインストール
$ npm install ~/ionic-native/dist/@ionic-native/my-cool-plugin/my-cool-plugin-1.0.0.tgz --save
ionic プロジェクトの node_modules/@ionic-native/my-cool-plugin/ にファイルがインストールされます。