Cordova開発環境の構築-PART3

Cordova開発環境の構築、第3回です。

今回はアプリをビルドする方法と、エミュレータや実機で動作確認する方法です。

PART-1を見に行く

実はAndroid実機で動作確認を行う際に、Windows、Mac共にかなりはまったので、次回はその辺りを詳しく解説します。

今回は記事全体の流れとして、ひとまず正しく動いている前提で解説します。

アプリのビルド

追加済みの各デバイスで用いる実機用データを作るには、buildコマンドを使います。
必要に応じてビルドを行うデバイスを絞る事もできます。

実行後、Cordovaプロジェクトを保存しているディレクトリ内のplatformsディレクトリに、各デバイスの開発環境向けプロジェクトファイルが作成されています。
これをAndroidStudioやXcode等でビルドを行えば、実機用のバイナリデータになるはず!?(たぶん)
ただし各開発環境向けのプロジェクトファイルは、以降で解説するエミュレータや実機で動作確認を行う為のコマンドでも作成されるようです。
その為buildコマンド使って各開発環境向けのプロジェクトファイルを作成するケースが発生するのは、ある程度開発が成熟してからになると思います。

スポンサードリンク
↓ 記事の続きはこちらから

エミュレータで動作確認

開発環境を用意してあるシミュレータで動作確認を行う方法です。
当然前もってシミュレータやエミュレータの導入(iOSやAndroidの開発環境を構築する)が必要になります。

言葉や動作は似ているけど、全然別物なので混同すると偉い人に怒られるかもしれん・・
しかしcordovaではコマンドがemulateなので、エミュレータで統一させて頂きます(おことわり)
  エミュレータ シミュレータ
再現するもの ハードウェア(実機) ソフトウェア(OS)
動作速度
実機との互換性
実機向けのバイナリデータを使用できる。

ただしこれはあくまでIT用語としての一般論なので、様々な要因でスマホ開発環境の例にそのまま当てはめにくいのと、「あくまで模倣なので最終的には実機で調整せい!」になるみたい。

当たり前と言えば当たり前ですかね・3・

各デバイスの開発環境を用意してエミュレータを使う準備が整っていれば、下記のコマンドでビルドとエミュレータ起動を同時に行います。

※platform addでプロジェクトに追加済みのデバイスを指定しないとエラーになります。

コマンドを実行すると、長々とビルド画面が表示された後に、エミュレータが立ち上がります。

アプリとしてビルドしているので、それなりの時間がかかります。

実機で動作確認

先の項目で書いた通り、エミュレータを過度に過信するのは良くないらしいので、結局は実機で確認するのが最良という事になるのでしょうか。

現在のCordovaプロジェクトを実機に転送するコマンドは下記の通りです。

emulateコマンドと大差無い印象ですね。
(Cordovaのコマンド書式自体が大差無い?)

1台のPCに複数のAndroidを接続しているプロじみた人ならデバイスのIDも入力します。
私はAndroidを1台しか持っていないので試せませんし、指定する必要もありません・3・;

またiOS等の実機に直接転送する機能に対応していないデバイスを指定すると、buildコマンド相当の動作しか行わないようです。

ところで、1度ネイティブのAndroidアプリを作った事があると(作ろうとした事があると)、Androidエミュレータの遅さに悶絶するのは誰もが通る道です。

ところが、
「MacならiOSシミュレータが早いからiOS版を先に作って調整すれば良いじゃーん!」
という事をしでかすと、Android実機で動かした時のもっさり具合にこれまた悶絶する様子。

Cordovaに限らず、1つのコードで複数のデバイスに対応するハイブリッドアプリ(ここではAndroidとiOSとします)を作るときには、Android実機で調整する風潮があるようです。

Java自体が、同じプログラムを異なる媒体で動かす為に橋渡し役の仮想マシン的なプログラムを動作させています。
CordovaのAndroidアプリでは、その仮想マシン上で更に仮想ブラウザを動かす事になるので、速度面での不利は免れないという理屈らしい。

これを書いている時点では、実機でそこまで派手に遅いと感じた事はありませんが、Javaの仕組み上、わからん事も無い理論ではあります・3・

アクション性の高いプログラムを作ったら実際に比べてみたいと思います。

ビルドがうまくいかない時は

うまくいかない時に確認してください。
実機テストでは罠が多い印象です・3・;

  • ケーブルがデータ転送に対応していない(Androidだと特に充電専用ケーブルを挿しがち)
  • ケーブルが接続されていない(問題外すぎる)
  • 同じプロジェクトのデータが実行中なら停止する
  • 古い実行ファイルを消してみる(上書きできなくてエラーになるケース)

(おまけ)

今開いているディレクトリをコマンドラインで開く

コマンドラインを起動した時の初期位置から、Cordovaのプロジェクトのディレクトリに移動する時、
いちいちcdなんたらかんたらと入力して移動するのは手間がかかるので、簡単に移動できる方法のメモです。
Windows編
  1. Cordovaのプロジェクトを置いてあるフォルダをエクスプローラー(ウインドウ)で開く。
  2. ウインドウ内でShiftを押しながら右クリックする。
  3. 「コマンドウインドウをここで開く」が表示されるので選択する。

WindowsでShift押しながら右クリックした様子

Mac編

様々な方法で目的を達成できるようです。

一番手軽と感じたのは、デスクトップ等に作ったエイリアス(ショートカット)や、Docに入っているターミナルアイコンに、移動したいディレクトリアイコンをドラッグして放り込む方法でした。
環境変数設定を変えてキーボードショートカットを増やす(その延長で右クリックメニューを拡張する)方法なども見つけました。

「忘れる」か「別環境で操作した時に再現しなくて悶絶」するのが関の山と考えたので見送りましたが、しっくり来る人はこっちの方が良いかもしれませんね・3・

Android開発環境の構築で結構てこずったので、次回はそちらの方を掘り下げていきます。
PART4に移動
Crosswalkプラグインを利用した動作環境の整備についても、必要に応じて参照してください。
CordovaでCrosswalkを使う-1に移動

コメントを残す

メールアドレスが公開されることはありません。