Angular4 アプリに Cordova プラグインのラッパーを提供してくれる IonicNative

AngularJS 時代は ngCordova というラッパーを使って、Cordova プラグインを AngularJS モジュールとして取り込んで使っていた。Cordova プラグイン自体が提供する API だとコールバック地獄になりやすかったところ、ngCordova は Promise を返す API に統一していたため、使い勝手が良かった。

Angular2 以降で同様のラッパーを提供してくれるのが Ionic Native というツール。Ionic という Angular + Cordova なフレームワーク向けのツールだが、Ionic でなくとも導入できる。

今回はステータスバーを制御する cordova-plugin-statusbar を例にとって、Ionic Native を使わない場合と使った場合との違いを見てみる。

事前準備

ベースとなる Angular + Cordova プロジェクトは、以下でそれぞれの雛形を作成してマージしておく。

出来上がった Angular + Cordova プロジェクトに cordova-plugin-statusbar をインストールしておく。

$ cordova plugin add cordova-plugin-statusbar

Before : Cordova プラグインを直接使う場合

Cordova プラグインを直接触る場合、TypeScript の型定義ファイルをインストールしておかないとコンパイルエラーになってしまう。

# Cordova 本体とプラグインの型定義ファイルをインストールする
$ npm i -D @types/cordova @types/cordova-plugin-statusbar

次に適当なコンポーネント app.component.ts でステータスバープラグインを使用してみる。

@Component({ /* 省略 */ })
export class AppComponent {
  // この関数は画面からボタンクリックなどで呼び出すイメージ
  statusBarPluginTest() {
    // ステータスバーの表示状態をコンソールに出力する
    console.log( StatusBar.isVisible );
  }
}

グローバル変数 window.StatusBar を触っている感じが若干気持ち悪い…。また、プラグインごとに @types を用意するのが面倒だ。

After : Ionic Native を使ったサンプル

次に Ionic Native で同じ処理を行ってみる。

# Ionic Native のコアをインストールする
$ npm i -D @ionic-native/core

# cordova-plugin-statusbar プラグインのラッパーとなる
# Ionic Native のモジュールをインストールする
$ npm i -D @ionic-native/status-bar

Ionic Native が提供するのは Angular モジュールなので、ルートモジュールの providers に指定してやる必要がある。

// app.module.ts

// ルートモジュールで StatusBar のラッパーを providers に設定する
import { StatusBar } from '@ionic-native/status-bar';

@NgModule({
  // 省略
  providers: [ StatusBar ]  // ← ココ
})
export class AppModule { }

そして適当なコンポーネントである app.component.ts を書き換える。

// Ionic Native 提供の StatusBar ラッパーを import する
import { StatusBar } from '@ionic-native/status-bar';

@Component({})
export class AppComponent {
  // DI するためにフィールドを用意する
  statusBar: StatusBar;
  
  // コンストラクタで DI する (この辺は AngularJS と同様)
  constructor(statusBar: StatusBar) {
    this.statusBar = statusBar;
  }
  
  // フィールドに DI した StatusBar を介して使用する
  statusBarPluginTest() {
    console.log( this.statusBar.isVisible );
  }
}

どの Cordova プラグインのラッパーが用意されているかは Ionic Native 公式を参照のこと。主要な Cordova プラグインは大抵サポートされており、インストール方法・使用できる API も分かる。

基本的にはただのラッパーなので、元のプラグインと同名の API が用意されていることがほとんどだが、戻り値が Promise に変えられている。また、一部のラッパーには便利な追加メソッドもあったりするので、内部で実際の Cordova プラグインをどのように使っているか、ソースを確認しておくと良い。

また、今回は試していないが、公式によると Ionic Native が提供するクラスを継承してモックを作成することが可能な様子。これは便利。