ionic3のNative pluginを作る #ionic #cordova

シェアする

この記事はIonic Advent Calendar 2017の12/10のエントリーです。

2016年6月に『最新のテクノロジーを使って、新しい音楽の体験を生み出し、「音楽を演奏する人」「音楽を聴く人」にとって、より幸せな世界をつくる』というミッションを胸に会社を2人で起業しました。

今は、弦楽器の練習をサポートするシステムBowingVisionを自社開発していて、世にリリースするべく開発に励んでいます。

最近、ionicを使ってモバイルアプリを作ることがよくあります。ionicには色々なプラグインが用意されていてスマートホンの様々な機能を使うことができるようになっています。また、Cordovaのプラグインもそのまま使うことができるので、大抵のことは既存のプラグインで実現できます。

しかし、それでも、独自の機能を入れたプラグインがあれば、さらに便利になることもあります。そこで、ionic3でNative pluginを作って見ました。

ionicは進化が激しいので、pluginの作り方も少しずつ変わっています。今回の作成方法も現時点での作り方ですので、将来変更になる可能性はあります。今回使用したバージョンは3.19.0です。

また、開発環境はMac OSX 10.13.2を使っています。

Native pluginとは

Ionicで使えるプラグインには、Ionic native pluginとCordovaプラグインの2つがあります。この2つの主な違いは呼び出し方にあります。

Cordova plugin

Cordovaのプラグインは、グローバルオブジェクトとしてインストールされるので、使用するときにはプラグインのオブジェクトを使います。ただし、TypeScriptでは未定義のオフジェクトを使おうとするとコンパイルエラーになりますので、定義が必要となります。

例えば、ExamplePluginという名前のプラグインを使用する場合には、以下のようにdeclareなどで宣言する必要があります。

Ionic native plugin

Ionic native pluginはCordova pluginのラッパーです。プラグインの実体はCordova pluginですが、ブラグイン用のオブジェクトを無理やり?定義することなく、使用できるようにするためのものです。ExamplePluginがNative pluginになっていれば以下のように使うことができます。

Cordova Pluginの作成

Ionic Native PluginはCordova Pluginをラップしたものなので、まず、Cordova Pluginを作成します。

プロジェクトの作成

プラグイン開発のためのプロジェクトを作ります。プロジェクト名を”my-plugin”とします。

Pluginのテンプレートのダウンロード

ionic-teamがプラグインのテンプレートを公開していますので、今回はこれを利用します。プラグイン開発用のディレクトリとしてplugins-devを作成し、その中にmy-cordova-pluginというパッケージ名でテンプレートをクローンします。

テンプレートの修正

今日の時点でのテンプレートにはいくつか問題があるので、最低限それらを直す必要があります。

package.jsonの修正

以前のpluginには必要ありませんでしたが、現在はこのファイルがないとプラグインとして追加することができません。package.jsonの内容は以下の通りです。

 8行目の”ios”の後の”,”を削除します。これを削除しないとプラグインを追加するときにエラーとなります。また、”name”と”id”を今回のパッケージ名”my-cordova-plugin”に変更します。特に、”name”はパッケージ名と一致していないと、後でプラグインを更新できなくなります。修正したファイルは以下になります。

plugin.xmlの修正

最初のplugin.xmlは以下のようになっています。

今回はテンプレートで使っているパッケージ名”my-cordova-pugin”やプラグイン名”MyCordovaPlugin”と同じにしているので、修正するところはほとんどありません。別の名前を使う場合はそれに合わせてプラグイン名を全部修正します。

今回修正したplugin.xmlは以下の通りです。

plugin.jsの修正

wwwディレクトリの下にあるplugin.jsもプラグイン名に合わせて編集します。今回はプラグイン名を変更しませんでしたので、そのまま使います。plugin.jsは次のようになっています。

MyCordovaPluginを使ってみる

ここまでできればテンプレートのプラグインを動かすことができます。

Pluginの追加

最初にプラグインをプロジェクトに追加します。

以下のようにしてプラグインが追加されたことを確かめることができます。

Pluginの更新

プラグインを修正するなどして更新したい場合は、一旦削除して再度インストールします。

削除するときはプラグインのパッケージ名を指定します。パッケージ名は上記のlsコマンドで確認できます。

もし、万一、プラグインのpackage.jsonのnameを直し忘れ、パッケージ名と事なってしまった場合は、削除した後の追加がエラーになります。その場合は、アプリの方のpackage.jsonを見て、間違ったパッケージ名をnpm コマンドでアンインストールします。

そうすれば、再度プラグインを追加できるようになります。

アプリの作成

このプラグインは2つのメソッドを持っています。

確認するアプリを作るためにsrc/pages/homeの中のファイルを修正してきます。まず、home.htmlを以下のように変更します。

次にhome.tsを以下のようにします。今回のプラグインは”MyCordovaPlug”という名前でグローバルオブジェクトとして登録されます。したがって、 window.MyCordovaPluginまたは MyCordovaPlugin という名前で呼び出すことができます。以下のコードでは、MyCordovaPluginを宣言して、呼び出せるようにしています。

また、constructorが呼ばれたたいみんぐでプラグインが読み込み終わっているとは限らないので、 platform.ready() を使ってプラグインが読み終わったタイミングで呼び出すようにしてます。

アプリを動かす

それではiPhoneでアプリを動かしてみます。ionicにiosのプラットフォームを追加して、Xcodeを起動します。

Xcodeが起動したら、singingの設定を行い、”Build and Run”します。問題なく起動すれば、Xcodeのコンソールにechoした文字列が表示されます。

また、画面上にも現在の時間が表示されます。

プラグインのコード

今回はテンプレートのコードをそのまま利用しましたが、独自の機能を実装するには、以下の”*”印がついたファイルを修正します。

Ionic native pluginの作成

準備

先ほど作成したCordova pluginをIonic native pluginとして使えるようにします。まず、最初にnative pluginに必要なコードをhttps://github.com/ionic-team/ionic-nativeからクローンします。ディレクトリはどこでも良いのすが、plugins-devの下に置くことにします。

ionic-native/src/@ionic-native/pluginsの下には既存のIonic native pluginのソースコードが置いてあります。ビルドするときに邪魔になるので一旦pluginsの下を全て削除します。

Native Plugin用のファイルの生成

今回のNative Pluginを作るためのファイルを生成します。ionic-nativeのディレクトリの下で以下のコマンドを実行します。

正常に終了すると以下のファイルが生成されます。

ファイルの編集

上で生成したファイルは以下のようになっています。

まず、プラグインの定義部分を以下のように変更します。

pluginNameはその下のクラス名と一致していなければなりません。pluginはパッケージ名、pluginRefはプラグイン名にします。最後にサポートするプラットフォームを記述します。

次にクラス内に必要なメソッドを追加します。今回のプラグインは2つのメソッドを持っているのでそれを記述します。

最後に使用していないモジュールを削除して、import文は以下のようになります。

Native Pluginのビルド

作成したNative Pluginラッパーをビルドして利用できるファイルを生成します。ビルドはNative Pluginのトップディレクトリ(プロジェクト/plugins-dev/ionic-native)で行います。

ビルドが終了すると以下のディレクトリが作られ、その中に必要なファイルが生成されます。

Native Pluginのインストール

作成したNative Pluginをインストールします。単純にプロジェクトのnode_modules/@ionic-nativeの下にコピーしても使えますが、アプリのビルドなどをしていると消えることがあるので、インストールした方が良いようです。インストールはプロジェクトのトップで以下のコマンドを実行します。

これでNative Pluginもインストールされました。

Native Pluginの更新

インストールしたNative Pluginを更新するには一旦削除して、再度インストールします。

Native Pluginを使う

次に今作成したNative Pluginを使用します。まず、アプリのファイルsrc/pages/home/home.tsを以下のように修正します。

また、src/app/app.modue.tsにもプラグインを使用するための設定を追加します。

これで準備はできました。Cordova Pluginの時と同様にビルドすればアプリが動作するが確認できます。

結果は、先ほどと全く同じです。

まとめ

  • Cordovaのプラグインは、手順さえ分かってしまえば、作るのはそれほど難しいものではありません。
  • プラグインの構造が分かれば、既存のプラグインを改造することも簡単にできます。
  • Ionic Native Pluginは、Cordovaのプラグインのラッパーなので、かなり簡単に作成できます。
スポンサーリンク
スポンサーリンク
スポンサーリンク

シェアする

フォローする

スポンサーリンク
スポンサーリンク