ionicでngCordovaを使う

ionicハイブリッドアプリ開発 ionic
ionicハイブリッドアプリ開発

ionicはブラウザでアプリを作る仕組みのため、ハードウェアやソフトウェアにアクセスするには一手間必要です。

ハードウェアとはたとえば、カメラであったり、スピーカーやバイブがあります。
ソフトウェアとはたとえば、SQLite(データベース)や通知バーなどですかね。

こういった機能にアクセスするために、ionicのために?用意されているのがngCordovaです。

ionicでアプリの開発をするには、結構お世話になること間違いなしです。
比較的カンタンな手順で準備ができる上、AngularJSの文法にあった記述ができるので、コードが統一されて見やすくなります。

ngCordovaのセットアップ

さて具体的なセットアップ方法です。

インストール

コマンドラインから行います。
macであれば「ターミナル」ですね。ターミナルから
bower install ngCordova
と入力するだけ

HTMLソースに記述

インストールしただけでは使えませんので、HTMLファイルに追記します

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

cordova.jsより前に読み込んだほうがいいみたいです。とりあえず私はcordova.jsの直前に読み込みました。
こんな感じですね(一部抜粋)

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="lib/ngCordova/dist/ng-cordova.js"></script>
    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

JavaScriptソースに記述

JavaScriptに追記します

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

ngCordovaプラグインの利用

ngCordovaには様々なプラグインが用意されています。
これらのほとんどは、ブラウザの枠を超え、ハードウェアやソフトウェアにアクセスする機能なので、
使い方にも少しお作法が有ります。

実際にバイブレーションを使ってみる

たくさんある中から今回はバイブレーションを使ってみます。これ以外でも、使い方はだいたい同じなので、1回覚えれば大丈夫です。
使用するバイブレーションプラグインのページはこちら

使い方が英語で書いてあります。バイブレーションは特に簡単です。

バイブレーションプラグインのインストール

コマンドラインから行います。まずはバイブレーションをインストールするプロジェクトへコマンドラインから移動します
cd /プロジェクトのルートフォルダ
ルートフォルダは、config.xmlファイルやwwwフォルダが置いてある場所です。

ルートフォルダへ移動したら、コマンドを入力します。
cordova plugin add org.apache.cordova.vibration

自動で登録しているプラットフォーム用のプラグインがインストールされます。

ソースの記述

JS

module.controller('MyCtrl', function($scope, $cordovaVibration , $ionicPlatform) {
 $scope.runVibration = function(){
  $ionicPlatform.ready(function(){
    $cordovaVibration.vibrate(100);
  })
 }
})

おまけ。HTML

<button ng-click="runVibration()">振動</button>

基本的にブラウザを超えた処理なので、ngCordovaから入手するプラグインの全ては、デバイスの読み込みが完了した後で無いと機能しません。そのため、バイブレーションプラグインのページには記載されていませんが、$ionicPlatform.ready()の中に記述します。

以上、これらのことはngCordovaの公式サイトのインストールガイドにも書いてあります。