AdobeのPhoneGap Build ( https://build.phonegap.com/ )でionicフレームワーク( http://ionicframework.com/ )を利用できるようにする準備メモ。
iPhone(iOS9.0.2)にて確認。
ベースとなるプロジェクト
minimal-app をダウンロードして使う。
https://github.com/phonegap-build/minimal-app
或いは、phonegap-start を使う。
https://github.com/phonegap/phonegap-start
これらをコピーしたプロジェクトをgithubに登録し、PhoneGap Buildから参照してビルドする。
ビルドしたものは、実機にダウンロードして確認することが可能。
なお、「デバッグ」「Hydration」の設定が可能だが、２つ共チェックすると、「デバッグ」がうまく動作しない気がする。
iOS向けビルドの署名
iOS向けビルドでは開発用証明書及びプロビジョニングファイルの登録が必要。
http://docs.build.phonegap.com/en_US/signing_signing-ios.md.html#iOS%20Signing
ionic及びngCordovaの導入
ionic
以下のページからzipファイルをダウンロード(今回は1.1.0)。
http://ionicframework.com/docs/overview/
解凍後、www/lib/ionic-v1.1.0 にコピー。
ngCordova
AngularaJSプラグインとして、ngCordova を導入する。
http://ngcordova.com/docs/install/
dist/ng-cordova.min.js (或いは dist/ng-cordova.js）を*www/lib/ngCordova/*以下にコピーする。
cordovaプラグイン追加
利用したいプラグインをconfig.xmlに追加。今回は以下２つ。
<gap:plugin name="org.apache.cordova.device" />
<gap:plugin name="com.phonegap.plugin.statusbar" />
html、javascriptを修正
こんな感じに修正してビルド。
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<!-- ionic -->
<link rel="stylesheet" type="text/css" href="lib/ionic-v1.1.0/css/ionic.min.css">
<script src="lib/ionic-v1.1.0/js/ionic.bundle.min.js"></script>
<!-- ngCordova -->
<script src="lib/ngCordova/ng-cordova.min.js"></script>
<!-- 実機ではcorodvaタグを展開する -->
<script type="text/javascript" src="cordova.js"></script>
<!-- アプリケーション用 -->
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/controllers.js"></script>
<title>Hello World</title>
</head>
<body ng-controller="mainCtrl as ctrl">
<ion-header-bar align-title="left" class="bar-positive">
<div class="buttons">
<button class="button">Left Button</button>
</div>
<h1 class="title">Title</h1>
<div class="buttons">
<button class="button">Right Button</button>
</div>
</ion-header-bar>
<ion-content>
model[{{ctrl.model}}]
</ion-content>
</body>
</html>
"use strict";
angular.module('myApp', ['ionic','ngCordova','myApp.controllers'])
.run(['$ionicPlatform','$cordovaStatusbar',function($ionicPlatform, $cordovaStatusbar) {
// どうもうまく動作しない
// $ionicPlatform.ready(function() {
// });
// document.addEventListener("deviceready", function() {
// $cordovaStatusbar.overlaysWebView(true);
// }, false);
ionic.Platform.ready(function(){
$cordovaStatusbar.overlaysWebView(true);
});
}])
;
"use strict";
angular.module('myApp.controllers', ['ngCordova'])
.controller('mainCtrl',['$scope','$cordovaDevice',function($scope,$cordovaDevice){
var _this=this;
// document.addEventListener("deviceready", function() {
// _this.model = $cordovaDevice.getModel();
// $scope.$apply();
// }, false);
ionic.Platform.ready(function(){
_this.model = $cordovaDevice.getModel();
$scope.$apply();
});
}])
;
$ionicPlatform.readyはどうもうまく動作しないので、devicereadyイベントで ionic.Platform.ready で代替。
$ionicPlatform.readyが発火しなくてハマった
http://qiita.com/okmttdhr/items/7a35231e4c98810af5ba
config.xmlの場所(おまけ)
config.xml(www/config.xml)の場所はビルド環境により異なる。
monacaや PhoneGap開発ツール( http://app.phonegap.com/ )の場合、www以下ではなく、同じレベルに配置する。