ionicでngCordovaを使う

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

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

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

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

ngCordovaのセットアップ
ngCordovaプラグインの利用

ngCordovaのセットアップ

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

インストール

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

HTMLソースに記述

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

1	`<span` `class="hljs-tag"><<span` `class="hljs-name">script</span> <span` `class="hljs-attr">src</span>=<span` `class="hljs-string">"lib/ngCordova/dist/ng-cordova.js"</span>></span><span` `class="hljs-tag"></<span` `class="hljs-name">script</span>></span>`

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

<span class="hljs-comment"><!-- ionic/angularjs js --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"lib/ionic/js/ionic.bundle.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"lib/ngCordova/dist/ng-cordova.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-comment"><!-- cordova script (this will be a 404 during development) --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"cordova.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>

JavaScriptソースに記述

JavaScriptに追記します

1	`<span` `class="hljs-selector-tag">angular</span><span` `class="hljs-selector-class">.module</span>(<span` `class="hljs-string">'starter'</span>, [<span` `class="hljs-string">'ionic'</span>,<span` `class="hljs-string">'ngCordova'</span>])`

ngCordovaプラグインの利用

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

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

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

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

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

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

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

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

ソースの記述

module.controller(<span class="hljs-string">'MyCtrl'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">($scope, $cordovaVibration , $ionicPlatform)</span> </span>{
 $scope.runVibration = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{
  $ionicPlatform.ready(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{
    $cordovaVibration.vibrate(<span class="hljs-number">100</span>);
  })
 }
})

おまけ。HTML

1	`<span` `class="hljs-tag"><<span` `class="hljs-name">button</span> <span` `class="hljs-attr">ng-click</span>=<span` `class="hljs-string">"runVibration()"</span>></span>振動<span` `class="hljs-tag"></<span` `class="hljs-name">button</span>></span>`

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

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