【ionic】Ionic native pluginの作成

前回、cordova pluginを作成したので、それをionic native pluginから呼べる様にしてみる。
ionic native pluginは、Cordova pluginのwrapperとして動作するので、Cordova pluginの情報を設定ファイルに記述してbuildします。

1.環境の作成

Native pluginの環境は、いくつかのファイルが必要となりますので、https://github.com/ionic-team/ionic-nativeからクローンを作成しテンプレートにします。

$ git clone https://github.com/ionic-team/ionic-native.git

クローンを作成すると、ionic-nativeディレクトが作成されます。
※src/@ionic-native/plugins配下に、既にいくつものpluginファイルが置かれています。邪魔になるので、削除しておく方が良いかと思います。

2.Native pluginファイルの作成

環境が出来たら、ionic-nativeディレクト配下で下記のコマンドを実行しNative pluginファイルを作成します。

$ gulp plugin:create -n WewiCordovaPlugin

コマンドが成功すると、src/@ionic-native/plugins/wewi-cordova-plugin/wewi-cordova-plugin/index.ts が作成されます。
※Error: Cannot find module ' gulp'等のエラーが出た場合は、適宜インストール等を行います。

3.Native pluginファイルの修正

上で作成したファイルを作成した前回作成したCordova pluginに合わせて修正して行きます。

plugin部分を修正しまし。修正は、以下の様に

@Plugin({
pluginName: 'WewiCordovaPlugin',
plugin: 'wewi-plugin-sample', // npm package name, example: cordova-plugin-camera
pluginRef: 'Sample', // the variable reference to call the plugin, example: navigator.geolocation
repo: '', // the github repository URL for the plugin
install: '', // OPTIONAL install command, in case the plugin requires variables
installVariables: [], // OPTIONAL the plugin requires variables
platforms: ['Android', 'iOS' ] // Array of platforms supported, example: ['Android', 'iOS']
})

・pluginName：コマンド実行時に自動で追加されます。今回作成するパッケージ名になります。実際には、wewi-cordova-pluginで読み出します。
・plugin：前回作成したcordova pluginのidです。
・pluginRef：cordova pluginの呼び出し名です。
・platforms：利用するplatformを配列で指定。

次にクラス内にメソッドを追加します。今回作成したメソッドは、helloだけなので下記の様になります。複数ある場合は、同じ様に追加して行きます。

@Injectable()
export class WewiCordovaPlugin extends IonicNativePlugin {

/**
   * This function does something
   * @param arg1 {string} Some param to configure something
   * @param arg2 {number} Another param to configure something
   * @return {Promise} Returns a promise that resolves when something happens
   */
@Cordova()
hello(arg1: string): Promise {
    return; // We add return; here to avoid any IDE / Compiler errors
}
}

最後にlintでエラーが発生するので、不要なimportは削除する。今回のimport文は、下記の通りとになります。

import { Injectable } from '@angular/core';
import { Plugin, Cordova, IonicNativePlugin } from '@ionic-native/core';

4.Versionの設定

持ってきた環境は、coreとかを作る環境なので既に高いVersionが指定されていたりします。気にならない場合は、この作業をスキップして下さい。
ionic-native配下のpackage.jsonを変更します。開くと、versionの設定が有りますので今回は1.0.0に変更します。

{
"name": "ionic-native",
"version": "1.0.0",

4.Native pluginのbuild

index.tsの編集が完了したら、次にbuildしてnpmでインストール出来る形にします。

$ npm run build

コマンドが正常終了すると、下記のディレクトリが出来ているはずです。

dist/@ionic-native/wewi-cordova-plugin
├── index.d.ts
├── index.js
├── index.js.map
├── index.metadata.json
└── package.json

これで準備は完了です。

5.Native pluginのinstall

今回作成したNative pluginをインストールします。と言っても、既にみなさんご存知ですね。。。

$ npm install --save dev/ionic-native/dist/\@ionic-native/wewi-cordova-plugin

npmでリストを確認すると

├── @ionic-native/wewi-cordova-plugin@1.0.0 -> /.../dev/ionic-native/dist/@ionic-native/wewi-cordova-plugin

指定したバージョンでinstallされているのが確認出来ます。後は通常のNative plugin同様、provaiderを定義して呼び出せば完了です。

ブログ

関連記事

カテゴリ