Phonegap+Sencha Touchを使ったハイブリッドアプリケーションの開発

#Phonegap+Sencha Touchを使ったハイブリッドアプリケーションの開発

##1 事前環境構築

```bash
#このマニュアルで使うユーザー名
myusername=soushi
```

- JREは1.7が推奨されている

```bash
export JAVA_HOME=`/usr/libexec/java_home -v 1.7`
```

- Rubyは1.8 or 1.9が推奨

```bash
rbenv global 1.9.3-dev
rbenv versions
#  system
#* 1.9.3-dev (set by /Users/soushi/.rbenv/version)
#  2.2.3
```

###1.1 XCodeおよびAndroid SDKがインストールされていることを確認

- XCodeはコマンドラインツールを使えるようにしておく
- Android SDKはこちらから[開発環境をダウンロード](http://developer.android.com/sdk/installing/index.html?pkg=studio)
- Android Studioによる標準インストールでは、SDKは`/Users/$myusername/Library/Android/sdk`にインストールされる。
- [Adding SDK Packagesのインストラクション](http://developer.android.com/sdk/installing/adding-packages.html)に従って、追加のSDKとツールをインストールする。

```bash
#SDK Managerの起動
cd /Users/$myusername/Library/Android/sdk/tools
bash android sdk
```

![Phonegap1.png](https://qiita-image-store.s3.amazonaws.com/0/9023/0dce8459-0267-b5fa-b802-bee3b090f0bf.png)


###1.2 Phonegap
###1.2.1 Phonegapをインストール
- NodeJSが正しくインストールされていることを確認

```bash
node -v
# v4.2.1
```

- Phonegapをインストール(CLI版をインストールする)

```bash
sudo npm install -g phonegap@latest
```
- [参考]http://phonegap.com/install/

###1.2.2 モバイル端末上でのデバッグに必要なアプリをインストール
- Adobe PhoneGapのサイトから[モバイル端末用のデバッガーアプリをインストール](http://docs.phonegap.com/getting-started/2-install-mobile-app/)

###1.3 Sencha
###1.3.1 Senchaコマンドのインストール

- 公式サイトから[Senchaコマンドをダウンロード](https://www.sencha.com/products/extjs/cmd-download/)、インストールする
- ***必ず、Compassエクステンションを導入すること！***

###1.3.2 Sencha Touch Software Development Kitのインストール

- 公式サイトから[Sencha Touch SDKをダウンロード](https://www.sencha.com/products/touch/)する。

- 解凍後、`~/Library/Sencha/`の中へ保存する。

Sencha SDKの位置は、***/Users/soushi/Library/Sencha/touch-2.4-1.2/***

```bash
#SDKの移動と確認
mkdir ~/Library/Sencha
mv /Users/$myusername/Desktop/touch-2.4-1.2 ~/Library/Sencha
cd ~/Library/Sencha/touch-2.4-1.2
open .
```

##2 Sencha Touchプロジェクトの作成

***バージョン名がtouch-2.4-1.2とハイフンが入っているので注意。(例えば2.4.1.2ではない。)***

```bash
cd ~/OneDrive/phonegap
sencha -sdk ~/Library/Sencha/touch-2.4-1.2 generate app HelloPhonegap ./HelloPhonegap
```

##3 Sencha TouchとPhoneGapとの連携

***エラーが発生する場合は、`phonegap`コマンドと`sencha`コマンドが正しく呼べるかどうか(pathが通っているかどうか)を確認すること。(`phonegap`はCLI版じゃないとうまく動かなかった。)

```bash
#Sencha TouchとPhoneGapもしくはCordovaとの連携
#PhoneGap環境の初期化
cd HelloPhonegap
sencha phonegap init jp.soushi.phonegap.hellophonegap HelloPhonegap
```

##4 サポートするプラットフォームの追加

- このプロジェクトは、そのままではシミュレータで動作させることができない。
- プロジェクトにデバイスのプラットフォームを追加する必要がある。

```bash
phonegap platform add android
```

##5 ブラウザ上での確認

- 次のコマンドを使って、Mac上でサーバーを立ててみる

```bash
sencha fs web -p 3000 start -map ./
```

- ブラウザで`http://localhost:3000`にアクセスする。

![ブラウザ上での動作確認](http://take.ms/KbhIK)

##6 Adobe Phonegap Buildを使ってビルドする

![Phonegap Build上でのアプリ管理画面](http://take.ms/z2Yeic)

###6.0 概要
- **Adobe Phonegap Build**は、Web上でiOS/Android/Win携帯向けのパッケージをビルドできるサービスです。
- 実機でデバッグするためには、別途iPhone Dev Program(iOS)等への加入が必要です。
- ビルド設定を書けば、ローカルビルドもできますが、**証明書(とプロビジョニング)を登録しておけばワンクリックでビルドができる**のでオススメです。
- **GitHubのリポジトリ**を使います。

###6.0.1 利用料金

- プライベートアプリ1つ、月間100ビルドまで無償で利用できます。
- Adobe CC有償ユーザーは、有償プランを無料で利用できます。(CCに含まれる)
- 有償プランのユーザーは、コラボレータとして無償プランユーザーを招待できます。
- 詳しくは[こちら](http://www.adobe.com/jp/devnet/phonegap/articles/phonegap_build_instructions.html)をご覧ください。

|プラン|無償プラン（Free plan）|有償プラン（Paid plan）|
|---|---|---|
|金額|0円|月額1,000円※1|
|プライベートアプリ数|1|25|
|パブリックアプリ数|無制限|無制限|
|コラボレーターの招待数|無制限|無制限|
|ビルド数|月間100ビルドまで|月間1,000ビルドまで|
|Creative Cloud|Creative Cloud無料登録で利用可|Creative Cloud有料会員は無料で利用可|

###6.1 導入の流れ

1. GitHubと[Adobe Creative Cloudの会員登録](https://build.phonegap.com/)をします。
2. iPhone Dev Programに登録した**開発用の証明書(=秘密鍵,p12ファイル形式)**と、iPhone Developer Centerで**プロビジョニングプロファイル**をダウンロードし、Phonegap Buildに登録します。(Android/Win携帯もほぼ同じ)
3. Phonegap Build上で、**新規アプリケーションを作成**し、GitHubのリポジトリ、秘密鍵、プロビジョニングを設定します。

![Phonegap Build上での開発者用秘密鍵及びプロビジョニング登録画面](http://take.ms/sYu1m)

###6.1 開発のサイクル

1. ソースコードをローカルに書く**(好きなエディタを使って！)**
2. **GitHubのリポジトリ**にソースコードを反映する
3. Adobe Phonegap Build上の**ビルドボタンを押下**
4. 作成された**.pkgファイルをダウンロードして、iTunes**で同期(iOSの場合)
5. **iPhone/iPad上で**アプリとして**動作**

- インストールを押すだけで、それぞれの携帯端末用パッケージがダウンロードできる。(これをiTunesでiPhone/iPadに転送すると、iOSアプリとして起動可能になる。)

![Phonegap Buildからアプリをダウンロードする画面](http://take.ms/3tEya)

###6.2 ソースコードをGitHubにアップロードする

```bash
git init
git add .
git commit -m "first commit"
git remote add origin https://github.com/soushiy/HelloPhonegap.git
git push origin master
```

###6.3 Adobe Phonegap Buildでビルドする

- ビルドボタンを押下するだけです。

![Phonegap Build上でのアプリケーションのビルド](http://take.ms/1OkGG)

###6.4 iPhoneに転送する

1. ipaパッケージ(iOS用のパッケージ形式)をダウンロードします。
2. iTunesに登録します。(ダウンロードしたipaパッケージをダブルクリック)
3. 同期します。
4. iPhone/iPad上で起動します。

![ipaパッケージのダウンロード](http://take.ms/lAght)

![iTunes上のアプリ](http://take.ms/CTV9D)

![iPhone上での最初のアプリケーション](http://take.ms/zlrEa)