Apache Cordova と AngularJS

Cordova アプリでも AngularJS のようなフレームワークを使うことはよくあります。(むしろアプリを作るので、出番が多いかも)

Cordova アプリは deviceready イベントが発火して初めてプラグインなどの機能が使えるようになります。アプリを deviceready イベントの発火後に描画をするのか、発火前なのかを選択する必要があります。

• deviceready より後 - Cordova やプラグインの初期化が終わってからアプリを描画します。アプリが利用できるようになるのが少し遅れます。
• deviceready より前 - Cordova やプラグインの初期化が終わる前にアプリを描画します。いち早くアプリが利用できるようになりますが、利用者に対し Cordova の機能を一時的に使わせないようにする工夫が必要です。

deviceready イベント発火後に描画をする

簡単な方から!

ng-app ディレクティブを使うと deviceready イベントより前に画面が描画されます。ng-app ディレクティブを使うのをやめ、angular.bootstrap 関数を deviceready イベント後に呼び出します。

js/index.js

document.addEventListener('deviceready',ｆ function () {
  var appContainer = document.getElementById('app-container');
  angular.bootstrap(appContainer, ['app']);
}, false);

angular.module('app', ['ngCordova'])
  .component('myComponent', { /* ... */ });

プラグインを Browserify

cordova build の際に --browserify とつけると Cordova プラグインをまとめてひとつの JavaScript ファイルにしてくれます。少しだけパフォーマンスが向上するようです。

Compile plugin JS at build time using browserify instead of runtime.

$ cordova build --browserify

スプラッシュスクリーンでごまかす

スプラッシュスクリーンプラグインを使って、deviceready イベントが発火後までスプラッシュスクリーンを表示する方法です。

$ cordova plugin add cordova-plugin-splashscreen

デフォルトではスプラッシュスクリーンを 3 秒間表示します。config.xml ファイルに追記してスプラッシュスクリーンの自動非表示を OFF にします。

config.xml

    <preference name="AutoHideSplashScreen" value="false" />

js/index.js

document.addEventListener('deviceready', function () {
  navigator.splashscreen.hide();
}, false);

deviceready イベント発火前に描画をする

deviceready イベントより前で描画することで、アプリをいち早く使えるようにします。しかし、そのままでは初期化が済んでいない Cordova の機能を利用者が呼び出せてしまうため、一時的にボタンを無効化するなどの対策が必要になります。

AngularJS モジュール、ng-deviceready.js を作りましたのでこれを利用します。

deviceReady.isDeviceReady プロパティを提供していて、この値を見ることで deviceready イベントが発火された後かどうかを調べることができます。このプロパティをボタンの ng-disabled に設定することで、deviceready イベント発火後にボタンが有効になる仕組みです。

js/indexjs

angular.module('app', ['ngCordova', 'deviceready'])
  .component('myCamera', {
    controller: function ($cordovaCamera, deviceReady) {
      var that = this;

      // Until deviceready fired, button is disabled.
      that.disabled = function () {
        return !deviceReady.isDeviceReady;
      };

      that.take = function () {
        var options = {
          sourceType: Camera.PictureSourceType.CAMERA,
          destinationType: Camera.DestinationType.DATA_URL
        };

        $cordovaCamera.getPicture(options)
          .then(function (image) {
            that.image = 'data:image/jpeg;base64,' + image;
          });
      }
    },
    template: '<div>\n' +
    '<button ng-disabled="$ctrl.disabled()" ng-click="$ctrl.take()">take</button>\n' +
    '<img src="{{$ctrl.image}}">\n' +
    '</div>\n'
  });

まとめ

いろいろと方法がありますが、アプリの起動時間が許容範囲内なら、deviceready の後で初期化、プラグインの Browserify 有効化、スプラッシュスクリーンでごまかすのが楽です!