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の公式サイトのインストールガイドにも書いてあります。