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

Sencha Ext JS 5（SDKのダウンロード）

NodeJS

PhoneGap

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

それぞれインストールができたら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をブラウザで表示してみてアプリケーションが正常に作成できていることを確認します。

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が赤くなっているのは証明書が無いためビルドが失敗しているためです。

ここまででPhoneGapのリモートビルドの流れは一通り完了となります。
この後はAndroidのアイコンをクリックするとapkファイルがダウンロードできるのでそれを実機にもっていくか
表示されているQRコードで実機に直接ダウンロードすればインストール出来るはずです。

最後に

今回はローカルの準備が少なくて済むPhoneGapのリモートビルドを使いましたが
個人的な肌感としては最近はCordovaのほうが多く目にする気がします。

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