PhoneGap Builderを使ってHTMLでモバイルアプリを作る


PhoneGapとPhoneGap Buildは違うので注意。
OSSのcordovaをAdobeが製品化したのがPhoneGapで、PhoneGap BuildはPhoneGapのビルドツール。

参考：http://phonegap.com/getstarted/

# 1.Phonegapのインストール

```
npm install -g phonegap
```

# <span id="mobile">2.スマホにデバッグツールをインストール</span>

* [iOS用](https://itunes.apple.com/app/id843536693)
* [Android用](https://play.google.com/store/apps/details?id=com.adobe.phonegap.app)
* [Windows用](http://www.windowsphone.com/en-us/store/app/phonegap-developer/5c6a2d1e-4fad-4bf8-aaf7-71380cc84fe3)


# 3.プロジェクトを作成
次のコマンドでプロジェクトを作成する。
`<AppName>`を自分のものに変える。

```
phonegap create <AppName> --template blank
```

オプションは次を参照。

http://docs.phonegap.com/references/phonegap-cli/create/

また、上記の場合、templateオプションを指定しないとデフォルトのhello-worldテンプレートが適用される。
その他のテンプレートは次を参照。

http://docs.phonegap.com/references/phonegap-cli/templates/

# 4.開発
`www/index.html`がトップ画面になるので、www配下を好きなように編集し、ブラウザでindex.htmlの動作を確認する。
ただし、次の部分は削除してはいけない。
ローカルで確認するとこの部分でエラーになるが、モバイルアプリに変換するときにphonegapが生成するため、気にしなくてよい。

```
<script type="text/javascript" src="cordova.js"></script>
```

# 5.モバイルでの確認
プロジェクトルートで次のコマンドを実行する。

```
phonegap serve
```

次のように表示される。

```
$ phonegap serve
[phonegap] starting app server...
[phonegap] listening on xxx.xxx.xxx.xxx:yyyy
[phonegap] 
[phonegap] ctrl-c to stop the server
```

[スマホにデバッグツールをインストール](#mobile)でインストールしたデバッグツールを起動し、`Server Adress`部分に上記の`xxx.xxx.xxx.xxx:yyyy`を入力し、`Connect`ボタンを押す。

# 6.スマホの機能（カメラなど）を使った開発
## プラグインを探す
以下のサイトでCameraなど使いたいプラグインを探し、Plugin IDと使い方などを調べる。

https://build.phonegap.com/plugins

## プラグインを適用する

```
phonegap plugin add [Plugin ID]
```

# 7.設定の修正
## アプリ情報の修正

以下の`id`、`name`、`description`、`author`を自分のものに編集する。

```config.xml
<widget id="com.phonegap.helloworld" version="1.1.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">
    <name>Hello World</name>
    <description>
        A blank PhoneGap app.
    </description>
    <author email="support@phonegap.com" href="http://phonegap.com">
        PhoneGap Team
    </author>

```

## 各種設定
次のサイトのConfiguringをみて、必要な設定を追加する。

http://docs.build.phonegap.com/en_US/configuring_basics.md.html#The%20Basics

なお、hello-worldテンプレートのconfig.xmlを参考にするとよい。

https://github.com/phonegap/phonegap-template-hello-world/blob/master/www/config.xml

# 8.アイコンの変更
config.xmlでアイコンを指定したら、アイコンを作成する。

[Icons and Splash Screens](http://docs.build.phonegap.com/en_US/configuring_icons_and_splash.md.html#Icons%20and%20Splash%20Screens)


アイコンは、次のサイトなどを利用して、全てのサイズを作成するとよい。

http://realfavicongenerator.net/

作成したアイコンは、`www/res/icon`配下におくとよい。

参考：https://github.com/phonegap/phonegap-template-hello-world/tree/master/www/res/icon


# 9.PhoneGap Buildでアプリを作成する
## PhoneGap Buildのアカウントを作成する
以下で、アカウントを作成してログインする。

https://build.phonegap.com/

## GitHubにアプリをpushする
PhoneGap BuildはGitHubと連携するので、GitHubにリポジトリを作成して、作成したアプリをGitHubにpushする。

## PhoneGap Buildでアプリを作成する
[+ new app]ボタンを押し、GitHubのURLを入力してアプリを作成する。

# 10.PhoneGap Buildに鍵を登録する
参考：https://github.com/amirudin/build/wiki/Android-Signing

## 鍵を生成する
Javaのkeytoolを使い、以下のコマンドで鍵を生成する。

```
keytool -genkey -v -keystore [keystore_name].keystore -alias [alias_name] -keyalg RSA -keysize 2048 -validity 10000
```

## 鍵を登録する

https://build.phonegap.com/people/edit

の[Signing Keys]で[add a key]をクリックし、鍵を登録する。
このとき、titleはなんでもよく、Aliasは鍵を生成したときの[alias_name]にする。

※Statusが[locked]になったときは、クリックしてunlockする。

# 11.PhoneGap Buildでビルドして、アプリをダウンロードする
アプリ画面で登録した鍵を設定し、[Update code]をクリックしてコードを最新化した後に、[Rebuild all]でビルドする。
ビルドが完了したら、スマホから、二次元バーコードでURLをよみとって、アプリをダウンロードする。

# 12.各種サイトで公開する
Androidの場合であれば、[Google Play Developer Console](https://support.google.com/googleplay/android-developer/answer/6112435?hl=ja)などの要領に従って、アプリを後悔する。