ionic

ionicでngCordovaを使う

  • このエントリーをはてなブックマークに追加
  • LINEで送る
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の公式サイトのインストールガイドにも書いてあります。

  • このエントリーをはてなブックマークに追加
  • LINEで送る

ionicで「サロンカルテ」アプリを作りました

ionicを使えば、スマートフォンやタブレット向けアプリが簡単に作成できます。
例えば弊社が開発した「サロンカルテ」は、AndroidタブレットやiPad上で動作する、美容室・ネイルサロン向けの施術管理システムです。
ionicはスマートフォン向けの開発環境ですが、工夫することでタブレットでも最適なレイアウトにすることができます

サロンカルテのアプリを見てみる