Sencha Touchで作るハイブリットアプリの環境構築まとめ - Sencha Cmd v5.0.x - その2

前回

Sencha Touchで作るハイブリットアプリの環境構築まとめ - Sencha Cmd v5.0.x - その1
http://blog.tnker.com/112

前回アプリケーションの各プロジェクト一式の準備、試しにビルドしてみるところまでやりました。

今回は、ビルドして生成された各プロジェクトをエミュレータを介して実行するところまでをやっていきます。

ちなみに、前回のプロジェクトディレクトリの状態は次のような感じになってると思います。:)

プロジェクトディレクトリの名称が「demo」から「cordova」に変わってますが、これは名称が気にくわなかっただけなので、気にしないでください :(

エミュレータで起動してみる

ターミナルからプロジェクトのカレントディレクトリに移動し、下記コマンドを実行します

$ sencha app emulate

すると、app.json に記載されたOSのビルド実行後、対応するエミュレータが起動します。

Androidでの注意事項

Androidの場合、SDKへのPathが通っていないといけないので、次のような環境パスを .bashrc なり、.profile に記述してください。

export PATH=/xxx/xxx/sdk/platform-tools:$PATH
export PATH=/xxx/xxx/sdk/tools:$PATH
export ANDROID_HOME=/xxx/xxx/sdk

※ /xxx/xxx/sdk がAndroidSDKのディレクトリになります

Android側のスクリーンショットは取り忘れてしまいました(´・ω・`)

エミュレータのターゲット切り替え

Android側は、初期の状態だとずいぶん昔のエミュレータが起動してしまうので、Android Studioを起動してもらって下記画像部分にあるボタンを押下してエミュレータを新規作成しておきます。

ピンクの枠部分です

追加出来たらターミナルに戻って、指定できるエミュレータのIDを確認していきます。

iOSの場合

プロジェクトのカレントディレクトリで下記コマンドを実行

$ ./cordova/platforms/ios/cordova/lib/list-emulator-images

すると次のような一覧が出てくるかと思います

"iPhone (Retina 3.5-inch)"
"iPhone (Retina 4-inch)"
"iPhone"
"iPad"
"iPad (Retina)"

これが、ターゲットに指定できる端末一覧になります。

Androidの場合

$ android list avds

とやってあげると、次のような作成済みのエミュレータ一覧が出てくるので、その中のName部分を利用します。

Available Android Virtual Devices:
    Name: cordova_1 <-ココ！！
  Device: Cordova 1 1 (User)
    Path: /Users/tnker/.android/avd/cordova_1.avd
  Target: Android 4.4.2 (API level 19)
 Tag/ABI: default/x86
    Skin: 320x568
  Sdcard: /Users/tnker/.android/avd/cordova_1.avd/sdcard.img
Snapshot: no

それぞれにエミュレータのターゲットを指定する

続いて、利用したいエミュレータ名を app.json の各プラットフォームの target プロパティに追記します。

"builds": {
    "ios": {
        "packager": "cordova",
        "cordova": {
            "config": {
                "id": "com.tnker.App",
                "platforms": "ios",
                "target": "'iPhone (Retina 4-inch)'"
            }
        }
    },
    "android": {
        "packager": "cordova",
        "cordova": {
            "config": {
                "id": "com.tnker.App",
                "platforms": "android",
                "target": "'cordova_1'"
            }
        }
    }
}

※ target の指定部分は、ちゃんと文字列で渡されるように念のため '' で囲ってあります

これで、先ほどと同じように

$ sencha app emulate

を実行してあげると

といった具合で、指定したターゲットの ios と androidエミュレータが起動します。

片方だけで起動させたい場合は、

$ sencha app emulate ios

もしくは

$ sencha app emulate android

としてあげれば片方だけ起動してくれます。

あとは、通常の Sencha Touch を実装する際と同じような感じでやっていけば基本的には問題ないです。:)

cordovaのプラグインを入れてごにょごにょするといった場合の記事も、後ほど別エントリーで書こうと思っとりまする :)

それではでは。