最近、Reproなるアナリティクスツールの存在を知りました。なんでも、イベントだけじゃなくて動画も取れたりするとのこと。
早速ionicでも試してみようと思ったんですが、ReproのCordovaプラグインにd.tsがなかっったので、せっかくなのでionic-nativeでReproのTypeScriptラッパーを作ってみることにしました。

作成したラッパーと使い方

作成したラッパーはgithubにあげてあります。
https://github.com/scrpgil/repro

使い方はgithubのREADMEにざっくりと書いてありますが上手くReproを動かせれば下のgifのようにアプリ操作の様子を動画で確認できるようになります。

※画質悪くてすいません。

ionic-nativeについて

ionic公式のTypeScriptラッパーです。各種corodvaプラグインのjsをTypeScriptから呼びやすくしたものです。日本のサービスのものはまだ少ないですが、ない時は自分で作成することも可能です。

ionic-nativeのデベロッパーズガイド

作り方

基本はDevelopersGuideにそって作ります。まずは、ionic-nativeをcloneします。

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

次に、新規プラグインテンプレートの作成です。

gulp plugin:create -m -n repro

上記コマンドを実行すると「src/@ionic-native/plugins/repro/index.ts」が出来上がります。

index.tsを開くとPluginの情報を記載するところがあるので、以下のように記載します。

@Plugin({
  pluginName: 'Repro',
  plugin: 'repro-cordova-plugin',
  pluginRef: 'Repro',
  repo: 'https://github.com/reproio/repro-cordova-plugin',
  platforms: ['Android', 'iOS']
})

そして、後は、ひたすらもととなるcordova-plugin-reproのwww/Repro.jsに記載されている関数を書いていきます。大体下のような感じです。

  @Cordova()
  setup(key: string): Promise<any> {
    return;
  }

  @Cordova()
  setLogLevel(logLevel: any): Promise<any> {
    return;
  }

〜〜〜以下略〜〜〜

全て書き終わったらビルドします。

npm run build

※この時、lintで怒られる可能性ありです。私は引数と型名の間にスペースがないって怒られました。

ビルドが終わると「dist/@ionic-native/repro」フォルダができますのでそのフォルダをreproを使いたいアプリのnode_modules/@ionic-nativeの下に移動させれば完成です。

まとめ

・ionic-nativeに欲しいプラグインのラッパーがなければ自分で作る
・作るの事態は簡単。10分くらいあれば作成可能です。
・Repro便利

ionic nativeでreproのcordovaプラグインのTypeScripラッパーを作る

作成したラッパーと使い方

ionic-nativeについて

作り方

まとめ