Phonegap+Sencha Touchを使ったハイブリッドアプリケーションの開発
1 事前環境構築
#このマニュアルで使うユーザー名
myusername=soushi
- JREは1.7が推奨されている
export JAVA_HOME=`/usr/libexec/java_home -v 1.7`
- Rubyは1.8 or 1.9が推奨
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はこちらから開発環境をダウンロード
- Android Studioによる標準インストールでは、SDKは
/Users/$myusername/Library/Android/sdkにインストールされる。 - Adding SDK Packagesのインストラクションに従って、追加のSDKとツールをインストールする。
#SDK Managerの起動
cd /Users/$myusername/Library/Android/sdk/tools
bash android sdk
1.2 Phonegap
1.2.1 Phonegapをインストール
- NodeJSが正しくインストールされていることを確認
node -v
# v4.2.1
- Phonegapをインストール(CLI版をインストールする)
sudo npm install -g phonegap@latest
1.2.2 モバイル端末上でのデバッグに必要なアプリをインストール
- Adobe PhoneGapのサイトからモバイル端末用のデバッガーアプリをインストール
1.3 Sencha
1.3.1 Senchaコマンドのインストール
- 公式サイトからSenchaコマンドをダウンロード、インストールする
- 必ず、Compassエクステンションを導入すること！
1.3.2 Sencha Touch Software Development Kitのインストール
公式サイトからSencha Touch SDKをダウンロードする。
解凍後、
~/Library/Sencha/の中へ保存する。
Sencha SDKの位置は、/Users/soushi/Library/Sencha/touch-2.4-1.2/
#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ではない。)
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版じゃないとうまく動かなかった。)
#Sencha TouchとPhoneGapもしくはCordovaとの連携
#PhoneGap環境の初期化
cd HelloPhonegap
sencha phonegap init jp.soushi.phonegap.hellophonegap HelloPhonegap
4 サポートするプラットフォームの追加
- このプロジェクトは、そのままではシミュレータで動作させることができない。
- プロジェクトにデバイスのプラットフォームを追加する必要がある。
phonegap platform add android
5 ブラウザ上での確認
- 次のコマンドを使って、Mac上でサーバーを立ててみる
sencha fs web -p 3000 start -map ./
- ブラウザで
http://localhost:3000にアクセスする。
6 Adobe Phonegap Buildを使ってビルドする
6.0 概要
- Adobe Phonegap Buildは、Web上でiOS/Android/Win携帯向けのパッケージをビルドできるサービスです。
- 実機でデバッグするためには、別途iPhone Dev Program(iOS)等への加入が必要です。
- ビルド設定を書けば、ローカルビルドもできますが、証明書(とプロビジョニング)を登録しておけばワンクリックでビルドができるのでオススメです。
- GitHubのリポジトリを使います。
6.0.1 利用料金
- プライベートアプリ1つ、月間100ビルドまで無償で利用できます。
- Adobe CC有償ユーザーは、有償プランを無料で利用できます。(CCに含まれる)
- 有償プランのユーザーは、コラボレータとして無償プランユーザーを招待できます。
- 詳しくはこちらをご覧ください。
| プラン | 無償プラン（Free plan） | 有償プラン（Paid plan） |
|---|---|---|
| 金額 | 0円 | 月額1,000円※1 |
| プライベートアプリ数 | 1 | 25 |
| パブリックアプリ数 | 無制限 | 無制限 |
| コラボレーターの招待数 | 無制限 | 無制限 |
| ビルド数 | 月間100ビルドまで | 月間1,000ビルドまで |
| Creative Cloud | Creative Cloud無料登録で利用可 | Creative Cloud有料会員は無料で利用可 |
6.1 導入の流れ
- GitHubとAdobe Creative Cloudの会員登録をします。
- iPhone Dev Programに登録した開発用の証明書(=秘密鍵,p12ファイル形式)と、iPhone Developer Centerでプロビジョニングプロファイルをダウンロードし、Phonegap Buildに登録します。(Android/Win携帯もほぼ同じ)
- Phonegap Build上で、新規アプリケーションを作成し、GitHubのリポジトリ、秘密鍵、プロビジョニングを設定します。
6.1 開発のサイクル
- ソースコードをローカルに書く(好きなエディタを使って！)
- GitHubのリポジトリにソースコードを反映する
- Adobe Phonegap Build上のビルドボタンを押下
- 作成された.pkgファイルをダウンロードして、iTunesで同期(iOSの場合)
- iPhone/iPad上でアプリとして動作
- インストールを押すだけで、それぞれの携帯端末用パッケージがダウンロードできる。(これをiTunesでiPhone/iPadに転送すると、iOSアプリとして起動可能になる。)
6.2 ソースコードをGitHubにアップロードする
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でビルドする
- ビルドボタンを押下するだけです。
6.4 iPhoneに転送する
- ipaパッケージ(iOS用のパッケージ形式)をダウンロードします。
- iTunesに登録します。(ダウンロードしたipaパッケージをダブルクリック)
- 同期します。
- iPhone/iPad上で起動します。