PhoneGap Buildでionicを使う準備メモ

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に追加。今回は以下２つ。

```xml:www/config.xml
    <gap:plugin name="org.apache.cordova.device" />
    <gap:plugin name="com.phonegap.plugin.statusbar" />
```

# html、javascriptを修正
こんな感じに修正してビルド。

```html:www/index.html
<!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>
```

```js:www/js/app.js
"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);
	 });
}])
;
```
```js:www/js/controllers.js
"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以下ではなく、同じレベルに配置する。