アプリカンはJavaScriptフレームワークとなっており、UIについては自由に選択できるようになっています。また、JavaScriptについても他のフレームワークと被らないようになっており、既存のJavaScriptフレームワークと組み合わせた開発が行えるようになっています。
そこで今回はスマートフォン、タブレットデバイス向けのHTML5フレームワークとして知られるIonicと組み合わせてアプリカンアプリを開発してみたいと思います。
Ionicのインストール
Ionicはnode.jsのパッケージ管理で知られるnpmを使ってインストールできます。
$ npm install -g ionic
なお、node.jsのバージョンは 0.11.12 または 0.10系である必要があります。執筆時点の最新版である0.11.13ではファイルのウォッチに関してバグがあります。例えばnodebrewを使っている場合は次のようにインストールできます。
$ nodebrew install 0.11.12 $ nodebrew use 0.11.12
テンプレートの生成
Ionicをインストールしたらアプリのテンプレートを生成します。
$ ionic start NewApplican tabs cd NewApplican
今回はタブ機能があるモックアプリをベースにしています。
ファイルの配置
アプリカンのライブラリを配置します。
applican.js : www/lib に
applican-config.xml : www 直下に
whitelist.xml : www 直下に
これで準備は完了です。
今回のアプリ
今回はカメラ機能を使ったアプリにします。
まず index.html を以下のように修正します。IonicはデフォルトでCordovaを読み込むようになっていますので、applican.jsを読み込むように変更します。
<script src="cordova.js"></script> ↓ <script src="lib/applican.js"></script>
次にテンプレートの修正です。
# templates/tabs.html <ion-tab title="Account" icon="icon ion-gear-b" href="#/tab/account"> <ion-nav-view name="tab-account"></ion-nav-view> </ion-tab> ↓ <ion-tab title="Camera" icon="icon ion-camera" href="#/tab/camera"> <ion-nav-view name="tab-camera"></ion-nav-view> </ion-tab>
アカウントタブをカメラタブに変更します。それに合わせて templates/tab-camera.html を作成します。
# templates/tab-camera.html
<ion-view title="Camera">
<ion-content class="padding">
<h1>Camera</h1>
<button class="button icon-left ion-camera" ng-click="getPhoto()">Photo</button>
<img ng-src="{{lastPhoto}}" style="max-width: 100%">
</ion-content>
</ion-view>
IonicはAngularJSを使っていますので、それに合わせて書いています。
続いてJavaScriptです。まず js/app.js を修正します。
.state('tab.camera', { // 追加ここから
url: '/camera',
views: {
'tab-camera': {
templateUrl: 'templates/tab-camera.html',
controller: 'CameraCtrl'
}
}
}) // 追加ここまで
.state('tab.account', {
url: '/account',
views: {
'tab-account': {
templateUrl: 'templates/tab-account.html',
controller: 'AccountCtrl'
}
}
});
/cameraにアクセスした時にカメラタブを表示するようにしています。その際にはコントローラとして CameraCtrl を指定しています。
コントローラの処理はちょっと長いですが、次のようになります。
.factory('CameraService', function($q, $timeout) {
var takePhoto = function() {
var deferred = $q.defer();
var options = {
quality: 70,
destinationType: applican.camera.DestinationType.FILE_URI,
sourceType: applican.camera.PictureSourceType.CAMERA,
encodingType: applican.camera.EncodingType.JPEG,
targetWidth: 220,
targetHeight: 220,
saveToPhotoAlbum: false,
correctOrientation: true,
allowEdit: false
};
applican.camera.getPicture(function(res) {
deferred.resolve(res);
},
function (res) {
deferred.reject(res);
},
options);
return deferred.promise;
};
return {
takePhoto: takePhoto
}
})
.controller('CameraCtrl', function($scope, $ionicLoading, CameraService) {
$scope.getPhoto = function() {
CameraService.takePhoto().then(function(imageURI) {
$scope.lastPhoto = imageURI;
});
}
});
まずサービスとしてCameraServiceを作成しています。optionsはカメラ起動時に渡すオプションで、今回は画像をファイル URI として取得できるように指定しています（applican.camera.DestinationType.FILE_URI）。
実際にカメラで撮影している処理は applican.camera.getPicture で、返却値をPromiseで処理しています。アプリカンでは基本的に成功時と失敗時のコールバック関数を指定するようになっていますので、Promise方式にする場合はこのような記述で対応が可能です。
web.zipを作成する
プログラムを書き終わったら実機でのテストになります。その際にはアプリカンの管理画面でファイルをアップロードする必要があります。例えば次のようなコマンドで生成が可能です。
$ cp -r www web $ zip -r web.zip web $ rm -R web
こうしてできあがった web.zip を管理画面でアップロードし、アプリカンシミュレータを使ってテストできます。
こちらが実際に試したところです。
Photoボタンをタップするとカメラが起動します。撮影後、写真が画面上に表示されます。
いかがでしょうか。Ionicとアプリカンを組み合わせるとHTML5アプリケーションでは難しかったデバイス特有の機能が容易に使えるようになります。技術的にも既に習得されているAngularjsが使えるなど、開発がスムーズに行えるでしょう。ionicコマンドではファイル更新時に自動再読込（ライブリロード）を行ってくれるionic serveも用意されており、開発がスピーディーに行えるようになります。ぜひアプリカンと組み合わせてご利用ください！