前回までで、大方の環境は揃ったことになる。そこで、今回は総仕上げとしてSencha Touch2のスケルトンアプリにCordova／PhoneGapを組み込み、簡単なデバイスの機能へアクセスするアプリをシミュレータで起動させて、その動作を確認してみたい。
1 事前準備
Cordova／PhoneGapからデバイスの機能へアクセスするAPIはプラグインという形で配布されており、必要に応じてそれらを追加してやらなければいけない。
そのためにはPCにGitコマンドツールが必要となるので、インストールされていない場合はインストールする必要がある。
Windowsの場合
まずはmsysgitの公式サイトよりインストーラをダウンロードする。
その後、インストーラをダブルクリックで起動して、インストールウィザードに従っていけばよい。
ただし、 「Adjusting your PATH environment (環境変数PATHの設定)」 については 「Run Git from the Windows Command Prompt」を選択すること。
インストール時の設定については、下記のサイトが参考になった。
Windows に msysgit をインストールして git 環境を作る (http://d.hatena.ne.jp/xyk/20130920/1379659991)
Macの場合
Macの場合、その２でインストールした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を組み込む
まずは、その１の1.4に従ってSencha Touchのスケルトンアプリを生成する。
生成した後、そのアプリのトップディレクトリへ移動し、次のコマンドにてCordovaまたはPhoneGapの初期化を行う。
sencha cordova init [アプリケーションID] [アプリケーション名]
sencha phonegap init [アプリケーションID] [アプリケーション名]
［Cordovaを初期化した例］
正常に初期化が終了した場合、アプリのトップディレクトリにcordovaディレクトリとcordova.local.propertiesファイルが生成されているはず。
（PhoneGapの場合は、phonegapディレクトリとphonegap.local.propertiesファイルが生成される）
3 デバイスのプラットフォームを指定する
Cordova／PhoneGapを初期化した際、対象となるデバイスはデフォルトでiOSになっている。
対象のデバイスを設定するには、cordova.local.properties（またはphonegap.local.properties）ファイルを編集する。
Cordovaの場合
# 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の場合
# 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シミュレータの表示］
これだけでは本当にデバイスの機能を使えるのかイマイチわからないので、何か（例えばデバイスの固有IDを取得するとか）使ってみようと思う。
4 Cordova／PhoneGapプラグインの追加
最近のCordova／PhoneGapではデバイスのAPIをプラグインという形で配布するようになり、標準では含まれないようなので追加をしてやる必要がある。
Cordovaの場合
Senchaアプリのトップディレクトリからcordovaディレクトリへ移動し、下記のコマンドを実行する。
cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git
［実行結果］
PhoneGapの場合
Senchaアプリのトップディレクトリからphonegapディレクトリへ移動し、下記のコマンドを実行する。
phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git
［実行結果］
Cordova／PhoneGapの各種プラグインとGitリポジトリについては、Cordova Plugin Registry（http://plugins.cordova.io/#/）で検索することができる。
5 シミュレータによる動作確認
それでは簡単に「アプリが起動したら固有IDをアラートで表示させる」ことで、デバイスのAPIを使用していることを確認してみる。
固有IDについてはdevice.uuidでアクセスできる。
まず、アプリのトップディレクトリ配下にあるapp.jsファイルをエディタで開き、その中にあるlaunch: function(){}内を以下のように変更する。
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
// Initialize the main view
Ext.Viewport.add(Ext.create('IncludeSample.view.Main'));
},
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で行ったようにビルドコマンドを実行するとシミュレータが起動するはずである。
sencha app build -run native
［Androidシミュレータの表示］
環境があるならば、プラットフォームの設定を変えてビルドしてみるとよい。
同じソースで別のデバイス用のアプリがビルドされるのが確認できるはずである。
さいごに
とりあえずこれで、開発環境の構築とアプリをビルドするまでを説明できたと思う。
アプリの開発にJavaScriptを使い、一つのソースでAndroidもiOSもと考えると、確かに簡単にはなったんだろうと思うけど、もっと簡単に開発環境を構築できないものだろうか…。
あと、これは自分用に覚え書き。
Sencha Touch2＋Cordova／PhoneGapアプリ開発の流れを簡単に整理すると次のような手順になる。
- SenchaCmdでスケルトンアプリを生成
- 生成したスケルトンアプリにCordova／PhoneGapサポートを追加
- 対象となるプラットフォームを設定
- Cordova／PhoneGapにプラグインを追加
- 必要に応じて4をしながら、アプリをコーディング
- SenchaCmdでビルド