Sencha Ext JS6のハイブリッドアプリ（cordova）開発
Sencha Ext JSとハイブリッドアプリ
これまでSenchaでハイブリッドアプリ開発をするときには、Sencha Touchとcordova/PhoneGapを組み合わせてきましたが、Sencha Ext JS6になってデスクトップ用とモバイル用のUIが統合されたので、Sencha Ext JS6とcordovaを組み合わせて動かすところまで試してみました。Xcode7からは、Appleの有料開発者ライセンスがなくてもiPhoneなどの実機で試せるようになったので開発の敷居は下がり、実際に手を動かすモチベーションは上がったかなと思ってます。
環境構築
まず今回試した開発環境は、以下になります。
* Sencha Ext JS6（6.0.1）
* Sencha Cmd（6.0.2.14）
* cordova（5.4.0）
* node.js（5.0.0）
* Java（1.7）
* Xcode（7.1）
実際に試してみた手順
1.適当なディレクトリでSencha Cmdを使いプロジェクト生成
sencha -sdk ~/Library/Sencha/ext-6.0.1 generate app MyApp ./
2.Sencha Cmdを経由してcoedovaコマンドを実行して初期化
sencha cordova init com.mycompany.MyApp MyApp
少し気をつけたほうがいいのは、僕の環境では最初1.8系のJavaを入れていて、1.7でいけるなら1.8でもと思って試したのですが、そのときに以下のようなエラーが出たので。ひとまずは1.7で実行するのが無難です。
また「export JAVA_HOME=/usr/libexec/java_home -v 1.7」とかでJavaのバージョン切り替えてそのまま再実行しようとすると、今度は既にcordovaあるよって感じの以下のエラーがでるので、再実施するときには、一度cordovaディレクトリを削除してから実行してください。
うまくいくと、以下のような感じになります。
3.プロジェクトルートディレクトリ直下に配置されている、「app.json」のbuild部分を編集します。
- 編集前
- 編集後
4.ネイティブ化するためのビルドコマンドをSencha Cmdで実行します。
sencha app build modern
以下のような感じで、SUCCESSが表示されていればOK。
5.エミュレーターの起動
sencha app emulate modern
上記のコマンドを実行するとエミュレーターが起動して、以下のような画面が表示されるはずです。
6.実機で確認 「プロジェクトルート/cordova/platforms/ios」配下に「MyApp.xcodeproj」ファイルが配置されているので、このファイルからXcodeを起動して、実際にiPhoneやiPadなどのデバイス接続してビルドすると実機でも試せるようになります。
まとめ
ここまでいけばあとは、通常のSenchaを使った開発の流れにのってネイティブ開発も進めていけるかと思います。 次回は、PhoneGapのリモートビルドを試す方法を書こうと思います。
