Cordovaの環境構築 | 廃テク日記

Windows環境でandroid実機にテスト動作確認していくCordovaの環境構築を行います。とりあえず、Cordovaのインストール、プロジェクトの作成、開発するのに必要な設定まで。

環境

なお、cordovaの環境構築は、Android SDKコマンドツールやビルド環境が整っていることを前提としているため、まだ設定していない場合は以下の記事から。

npmでCordovaプロジェクト作成や動作確認などを行うコマンドラインツールをインストールします。

$ npm install -g cordova

1 2	$ npm install -g cordova

以下のコマンドで任意のディレクトリ<PATH>に、[ID]というアプリIDでプロジェクトを作成します。

$ cordova create <PATH> [ID [NAME [CONFIG]]] [OPTION]

1 2	$ cordova create <PATH> [ID [NAME [CONFIG]]] [OPTION]

例えば、

$ cordova create myapp com.mycompany.myteam.myapp MyApp

1 2	$ cordova create myapp com.mycompany.myteam.myapp MyApp

と打てば、

が作成されます。
ここで注意点として、[ID]として"-"の入った文字列を用いると"not a valid identifer"といってエラーをはかれました。id名にハイフンは使えないようです。

また、各種プラットフォーム用に設定が必要です。

$ cd myapp
$ cordova platform android
$ cordova platform ios

$ cd myapp

$ cordova platform android

$ cordova platform ios

現時点でのプロジェクトディレクトリ内の構造を確認します。

基本的に開発は、www以下のディレクトリ内でHTML、CSS、JavaScriptファイルを編集していく流れになります。

開発中のアプリの動作確認をするには、いくつか方法あります。

以下のコマンドを実行すると別ウィンドウでエミュレータを動かすことができます。

$ cordova emulate android

1 2	$ cordova emulate android

実機で確認する場合は、USBデバッグをonにした実機と開発pcをusb接続して、以下のコマンドを実行します。

$ cordova run android

1 2	$ cordova run android

以下のコマンドを実行すれば、ブラウザで確認することもできます。

$ cordova serve android
Android Studio project detected
Static file server running on: http://localhost:8000 (CTRL + C to shut down)

$ cordova serve android

Android Studio project detected

Static file server running on: http://localhost:8000 (CTRL + C to shut down)

と表示されるので、ブラウザから"http://localhost:8000"を表示させれば確認することができます。