読者です 読者をやめる 読者になる 読者になる

Macでアプリ開発ブログ

MacによるiPhone&Androidアプリの開発・作成に関するブログ。Macの設定からアプリ開発環境構築、おすすめのツールなど

IonicでngCordovaを使う方法

Ionic アプリ開発
スポンサード リンク

ngCordovaとは

JavaScriptでハイブリットアプリを開発する場合、カメラやGPSなどのデバイス特有の機能を制御するためにはCordovaを利用します。

ただし、IonicのようにAngularJSベースで開発するのであれば、AngularJSのプラグインであるngCordovaを利用する方が、より効率的に開発を進めることができます。

それでは具体的にIonicでngCordovaを使う方法を見ていきます。

ngCordovaをインストール

Ionicのプロジェクトがあるディレクトリに移動し、bowerでインストールします。

bower install ngCordova --save

上記コマンドによって、/www/lib/ngCordovaというフォルダが生成され、その中にng-cordova.jsなどがインストールされます。

index.htmlで読み込む

インストールされたng-cordova.jsindex.htmlで読み込みます。この際、ionic.bundle.jsよりも後で、cordova.jsよりも前に読み込みます。

<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>

AngularJSに依存性として注入

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'ngCordova'])

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

ngCordovaではカメラやGPSなどのデバイス特有の機能を利用するために、それぞれのプラグインが用意されています。

利用したい機能から、必要なプラグインをインストールします。(プラグインの一覧はこちら

例えばカメラを制御するためのプラグインをインストールする場合は、下記のコマンドになります。

cordova plugin add cordova-plugin-camera

これでngCordovaとそのプラグインを使用する準備が終了です。あとはAngularJS内でプラグインを実行します。

例:ngCordovaでデバイス情報を取得

例えばcordovaDeviceというデバイス情報を取得するプラグインを使用する場合、cordovaDeviceをインストールし、AndgularJSには下記のように記述します。

.controller('DashCtrl', function($scope, $ionicPlatform, $cordovaDevice) {
  $ionicPlatform.ready(function() {
    $scope.deviceOs = $cordovaDevice.getPlatform();
  });
})

デバイスを操作するためには、先にIonicがデバイス操作の準備を完了している必要があります。そのため、$ionicPlatform.ready(function() {…処理…});としています。

上記では、$cordovaDevice.getPlatform()でデバイスのOSを取得して、$scope.deviceOsに代入していますので、テンプレート側に{{deviceOs}}と記述することで、デバイスのOS(iOS, Android等)が表示されます。

ただし、ngCordovaが正常に動作するためには実機で確認する必要があります。ionic serveをしてPCブラウザ上で動作確認をしても、コンソールで確認するとError: device is not definedというエラーが発生しています。

このPCブラウザ上でのエラーを回避するためには、ngCordovaMocksを利用します。

ngCordovaMocksとは

ngCordovaを利用しても、PCブラウザ上ではデバイス(実機)の情報を取得したりすることができません。そこで、ngCordovaMocksを利用します。

ngCordovaMocksでは、仮のデータをデバイス情報として自由に定義することができます。これによってPCブラウザ上でもAngularJSのエラーが発生することなく、AngularJSにデバイス情報(仮データ)を渡すことができます。

ngCordovaMocksの利用方法

インストール

先の「ngCordovaをインストール」を行っている場合、別途インストールは不要です。ng-cordova.jsと同じディレクトリにng-cordova-mocks.jsというファイルがインストールされています。

index.htmlで読み込む

ng-cordova.jsの後に読み込みます。

<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="lib/ngCordova/dist/ng-cordova-mocks.js"></script>
<script src="cordova.js"></script>

AngularJSに依存性として注入

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'ngCordova', 'ngCordovaMocks'])

デバイスの仮データを定義

ng-cordova-mocks.jsを編集して、各factoryでデバイス情報(仮データ)を定義します。

注意

ngCordovaMocksを利用している場合、実機上でもngCordovaMocksが実行されるので、実機のデバイス情報ではなくngCordovaMocksで定義した仮データが読み込まれてしまいます。

そのため、各プラットフォーム用にビルドする際には、ngCordovaMocksの読み込みや依存性の注入を削除する必要があります。

毎回手動で削除するのが面倒な場合には、/hooks/内でngCordovaMocksの切り替え(追加/削除)を行うscriptを組むと便利です。