Posted at

Sencha Ext JS 5 のPhoneGapビルド

More than 3 years have passed since last update.

Sencha Advent Calendar 2014 2日目

http://www.adventar.org/calendars/490


Ext JS 5 でハイブリッドアプリの作成

こんばんはxenophyの菅井です。

これまでデスクトップ向けWEBアプリケーションのフレームワークだったExt JSですが

Ext JS 5からは新たにタブレットもサポートされるようになりました。

今回はそんなExt JS 5とPhoneGapのリモートビルドを使って

タブレット向けにハイブリッドアプリのパッケージ化をやってみようと思います。


準備

準備として以下のインストールを行います。


Sencha Cmd

http://www.sencha.com/products/sencha-cmd/download


Sencha Ext JS 5(SDKのダウンロード)

http://www.sencha.com/products/extjs/


NodeJS

http://nodejs.org/


PhoneGap

http://phonegap.com/install/


アプリケーションの新規作成

それぞれインストールができたらSencha CmdとSencha Ext JS 5のSDKを使用して

Ext JS 5のアプリケーションを新規作成します。


% sencha -sdk ~/Library/Sencha/ext-5.0.1 generate app MyApp my-app



  • SDKの場所:~/Library/Sencha/ext-5.0.1

  • アプリケーション名:MyApp

  • 作成ディレクトリ名:my-app

Sencha Cmdでローカルのサーバーを起動


% sencha web start

Sencha Cmd v5.0.3.324

[INF] Mapping http://localhost:1841/ to ....

[INF] ------------------------------------------------------------------

[INF] Starting web server at : http://localhost:1841

[INF] ------------------------------------------------------------------


URLをブラウザで表示してみてアプリケーションが正常に作成できていることを確認します。

my-app


PhoneGapビルド

アプリケーションが作成できたら本題のPhoneGapビルドを行います。


PhoneGap Buildアカウント作成

まずはリモートビルドを行う為に下記のサイトでPhoneGap Buildのアカウントを作成します。

https://build.phonegap.com/

いくつかアカウントのプランがありますが今回はfreeで問題ありません。


ビルド設定

次にアプリケーションを作成したディレクトリ直下にあるapp.jsonに対して下記のような設定を追加します。

今回の設定はPhoneGapのリモートビルドでAndroid向けにビルドします。

iOS向けにビルドしたい場合は別途「iOS デベロッパー証明書」が必要です。

/**

* ビルド設定
*/
"builds": {
"native": {
"packager": "phonegap",
"phonegap" : {
"config": {
"platform": "android",
"remote": true,
"id": "com.xenophy.my-app",
"name": "MyApp"
}
}
}
},

ビルド設定を追加できたらlocal.propertiesというファイルをapp.jsonと同じ階層に作成します。

内容は次のようにPhoneGap BuildアカウントのIDとパスワードを追記します。

phonegap.remote.username=myapp@hoge.com

phonegap.remote.password=hogehoge


ビルド実行

設定ができたら次のコマンドでPhoneGapのリモートビルドを行います。


% sencha app build android


ターミナルにビルドのメッセージが流れていくので完了するまで少し待ちます。

完了したらPhoneGap BuildのAppsページに移動してビルドされているか確認します。

https://build.phonegap.com/apps

成功していればこのようにAppsの一覧の中に今回ビルドしたアプリケーションが表示されているはずです。

※ちなみにiOSが赤くなっているのは証明書が無いためビルドが失敗しているためです。

apps

ここまででPhoneGapのリモートビルドの流れは一通り完了となります。

この後はAndroidのアイコンをクリックするとapkファイルがダウンロードできるのでそれを実機にもっていくか

表示されているQRコードで実機に直接ダウンロードすればインストール出来るはずです。


最後に

今回はローカルの準備が少なくて済むPhoneGapのリモートビルドを使いましたが

個人的な肌感としては最近はCordovaのほうが多く目にする気がします。

次の機会があればCordovaとExt JSでも何かやってみたいと思います。