Ionicでモバイルアプリを作ろう！(19)アプリのバージョン情報を取得する

inoue

クロスプラットフォーム対応のモバイルアプリ開発フレームワークであるIonicの使い方を紹介していきます。

アプリのバージョン情報や、アプリ名などの固有情報をコードで取得して使いたいという場合があります。
そのような場面の実装方法を紹介します。

App Versionプラグイン

プラグインのインストール

バージョン情報の取得はCordovaプラグインのひとつであるcordova-plugin-app-versionを用いることで簡単に実装できます。

まず以下のコマンドを実行してインストールを行います。

$ ionic cordova plugin add cordova-plugin-app-version
$ npm install --save @ionic-native/app-version

ionic-nativeというのはCordovaプラグインのTypeScriptラッパーです。Ionicのコード上ではこのラッパーを経由してCordovaプラグインを操作します。

モジュール追加

/src/app/app.module.tsのNgModuleに以下のようにパッケージを追加します。

...
import { AppVersion } from '@ionic-native/app-version';

@NgModule({
...
  providers: [
...
    AppVersion
  ]
})
export class AppModule {}

以上で下準備は完了です。

AppVersionクラスを使う

import { AppVersion } from '@ionic-native/app-version';

export class Hoge {

  constructor(private appVersion: AppVersion) {
  }

  logAppInfo() {
    this.appVersion.getAppName().then(appName => console.log(appName)); // SampleApp
    this.appVersion.getVersionCode().then(versionCode => console.log(versionCode)); //1
    this.appVersion.getVersionNumber().then(versionNumber => console.log(versionNumber)); //1.0.0
    this.appVersion.getPackageName().then(packageName => console.log(packageName)); //jp.tech.sample
  }
}

コンストラクタの引数に指定することでAppVersionオブジェクトをDIできます。あとは各種メソッドを呼ぶことでアプリの情報が得られます。
各メソッドの戻り値はPromiseであることに注意してください。
なお、この出力結果はconfig.xmlに記述されている設定が下記の場合です。

<?xml version='1.0' encoding='utf-8'?>
<widget android-versionCode="1" id="jp.tech.sample" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>SampleApp</name>
...
</widget>