Sencha Touch2＋Cordova／PhoneGapの開発環境を作る その４

[前回](http://qiita.com/munyu11/items/58a7215e32fa8b1f964b)までで、大方の環境は揃ったことになる。そこで、今回は総仕上げとしてSencha Touch2のスケルトンアプリにCordova／PhoneGapを組み込み、簡単なデバイスの機能へアクセスするアプリをシミュレータで起動させて、その動作を確認してみたい。

##1 事前準備

Cordova／PhoneGapからデバイスの機能へアクセスするAPIはプラグインという形で配布されており、必要に応じてそれらを追加してやらなければいけない。
そのためにはPCにGitコマンドツールが必要となるので、インストールされていない場合はインストールする必要がある。

### Windowsの場合

まずは[msysgitの公式サイト](http://msysgit.github.io/)よりインストーラをダウンロードする。
その後、インストーラをダブルクリックで起動して、インストールウィザードに従っていけばよい。
ただし、 **「Adjusting your PATH environment (環境変数PATHの設定)」** については **「Run Git from the Windows Command Prompt」を選択すること。** 
インストール時の設定については、下記のサイトが参考になった。
[Windows に msysgit をインストールして git 環境を作る (http://d.hatena.ne.jp/xyk/20130920/1379659991)](http://d.hatena.ne.jp/xyk/20130920/1379659991)

### Macの場合

Macの場合、[その２](http://qiita.com/munyu11/items/fdd4f4e87fc99d8af378)でインストールしたHomebrewを使用してGitをインストールする。
インストールは、黒い画面を開き下記のコマンドを実行するだけ。

```
brew install git
```

### インストールの確認
インストールが終わったら黒い画面を開き、下記のコマンドを実行してバージョン番号が表示されれば、インストールは完了となる。

```
git --verion
```

**※インストールしたPCがプロキシを通してネットへ接続している場合**
プロキシ経由でgitを使うには、黒い画面で下記のコマンドにて設定をする。

```
git config --global http.proxy http://プロキシのアドレス:ポート番号
git config --global https.proxy http://プロキシのアドレス:ポート番号
```

また、必要に応じて下記のコマンドを実行する。

```
git config --global url."https://".insteadOf git://
```

これにより `git clone` にて取得する際、 `git://～` のままでもプロキシを経由してくれるようになる。

##2 Sencha TouchにCordova／PhoneGapを組み込む

まずは、[その１](http://qiita.com/munyu11/items/2d52dd60ff1951752dd0)の1.4に従ってSencha Touchのスケルトンアプリを生成する。
生成した後、そのアプリのトップディレクトリへ移動し、次のコマンドにてCordovaまたはPhoneGapの初期化を行う。

```lang:Cordovaの場合
sencha cordova init [アプリケーションID] [アプリケーション名]
```

```lang:PhoneGapの場合
sencha phonegap init [アプリケーションID] [アプリケーション名]
```

［Cordovaを初期化した例］
![sencha_cordova_init.jpg](https://qiita-image-store.s3.amazonaws.com/0/42834/ed5e6fa7-bd1a-c888-07c2-e0ab03c9a78e.jpeg)

正常に初期化が終了した場合、アプリのトップディレクトリに```cordova```ディレクトリと```cordova.local.properties```ファイルが生成されているはず。
（PhoneGapの場合は、```phonegap```ディレクトリと```phonegap.local.properties```ファイルが生成される）

##3 デバイスのプラットフォームを指定する

Cordova／PhoneGapを初期化した際、対象となるデバイスはデフォルトでiOSになっている。
対象のデバイスを設定するには、```cordova.local.properties```（または```phonegap.local.properties```）ファイルを編集する。

###Cordovaの場合

```lang:cordova.local.properties
# Documentation can be found here (http://cordova.apache.org/docs/en/edge/guide_cli_index.md.html#The%20Command-line%20Interface)
#
# The following combination are supported as of publishing this file
# ios android blackberry10 wp7 wp8
#
# This property can be a single platform or a space delimited list
cordova.platforms=ios
```

上記```cordova.platforms=ios```の```ios```を```android```へ変更する。
なお、半角スペースで複数のプラットフォームを区切ってやると、一度のビルドで全てのプラットフォーム用のアプリがビルドされる。

###PhoneGapの場合

```lang:phonegap.local.properties
# The following are supported platforms for local building (blackberry is version 10)
# android, blackberry, ios, wp7, wp8
#
# The following are supported platforms for remote building (blackberry is version 6)
# android, blackberry, ios, symbian, webos, wp7

# This property can be a single platform or a space delimited list
phonegap.platform=ios

# This determines if build is remote (phonegap build) or local
phonegap.build.remote=false

# Username for PhoneGap Build
phonegap.build.remote.username={username}
# Password for PhoneGap Build
phonegap.build.remote.password={password}
```

上記```phonegap.platform=ios```の```ios```を```android```へ変更する。
PhoneGapの場合はCordovaと違い、指定できるプラットフォームは一つのみとなる。


実は、この段階でSencha TouchとCordova／PhoneGapの連携は完了している。
試しにアプリのトップディレクトリで下記のコマンドを実行すると、デバイスのシミュレータでSenchaアプリが起動することを確認できる。

```
sencha app build -run native
```

［Androidシミュレータの表示］
![SenchaAndCordova_on_AVD.jpg](https://qiita-image-store.s3.amazonaws.com/0/42834/1b4fec77-b09a-bd79-702a-0ab07869777e.jpeg)

これだけでは本当にデバイスの機能を使えるのかイマイチわからないので、何か（例えばデバイスの固有IDを取得するとか）使ってみようと思う。

##4 Cordova／PhoneGapプラグインの追加

最近のCordova／PhoneGapではデバイスのAPIをプラグインという形で配布するようになり、標準では含まれないようなので追加をしてやる必要がある。

###Cordovaの場合
Senchaアプリのトップディレクトリからcordovaディレクトリへ移動し、下記のコマンドを実行する。

```lang:デバイスプラグイン（org.apache.cordova.device）を追加
cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git
```

［実行結果］
![cordova_plugin_add.jpg](https://qiita-image-store.s3.amazonaws.com/0/42834/dc7fc89b-81b9-db74-dc5f-329f297e6654.jpeg)

###PhoneGapの場合
Senchaアプリのトップディレクトリからphonegapディレクトリへ移動し、下記のコマンドを実行する。

```lang:デバイスプラグイン（org.apache.cordova.device）を追加
phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git
```

［実行結果］
![phonegap_plugin_add.jpg](https://qiita-image-store.s3.amazonaws.com/0/42834/b3774eff-420d-6719-f7f9-5f5ad6e12db1.jpeg)

Cordova／PhoneGapの各種プラグインとGitリポジトリについては、[Cordova Plugin Registry（http://plugins.cordova.io/#/）](http://plugins.cordova.io/#/)で検索することができる。

##5 シミュレータによる動作確認

それでは簡単に「アプリが起動したら固有IDをアラートで表示させる」ことで、デバイスのAPIを使用していることを確認してみる。
固有IDについては```device.uuid```でアクセスできる。
まず、アプリのトップディレクトリ配下にある```app.js```ファイルをエディタで開き、その中にある```launch: function(){}```内を以下のように変更する。

```lang:app.js（変更前）
    launch: function() {
        // Destroy the #appLoadingIndicator element
        Ext.fly('appLoadingIndicator').destroy();

        // Initialize the main view
        Ext.Viewport.add(Ext.create('IncludeSample.view.Main'));
    },
```

```lang:app.js（変更後）
    launch: function() {
        // Destroy the #appLoadingIndicator element
        Ext.fly('appLoadingIndicator').destroy();

        // Initialize the main view
        Ext.Viewport.add(Ext.create('Sample.view.Main'));
        
        alert(device.uuid);        // この行を追加
    },
```

変更したら保存し、黒い画面でアプリのトップディレクトリに移動した後、3で行ったようにビルドコマンドを実行するとシミュレータが起動するはずである。

```lang:ビルドコマンド
sencha app build -run native
```

［Androidシミュレータの表示］
![device_uuid.jpg](https://qiita-image-store.s3.amazonaws.com/0/42834/2e796874-74c0-a1da-f1da-9097485ea88d.jpeg)

環境があるならば、プラットフォームの設定を変えてビルドしてみるとよい。
同じソースで別のデバイス用のアプリがビルドされるのが確認できるはずである。

## さいごに

とりあえずこれで、開発環境の構築とアプリをビルドするまでを説明できたと思う。
アプリの開発にJavaScriptを使い、一つのソースでAndroidもiOSもと考えると、確かに簡単にはなったんだろうと思うけど、もっと簡単に開発環境を構築できないものだろうか…。

--------
あと、これは自分用に覚え書き。
Sencha Touch2＋Cordova／PhoneGapアプリ開発の流れを簡単に整理すると次のような手順になる。

>1. SenchaCmdでスケルトンアプリを生成
>2. 生成したスケルトンアプリにCordova／PhoneGapサポートを追加
>3. 対象となるプラットフォームを設定
>4. Cordova／PhoneGapにプラグインを追加
>5. 必要に応じて4をしながら、アプリをコーディング
>6. SenchaCmdでビルド