Cordova開発環境を作る(Android編)

先日の記事で述べていた通り、クロスプラットフォーム開発を検討していましたが、

とりあえず、Cordova(Apache Cordova)で話を進めてみようと思います。

kenteiblog.hatenablog.com

 

ということで、まずはAndroid用の環境を作っていきます。

 

1.Node.jsを用意する

すでにインストール済みなら必要ありません。
していないなら、以下の公式サイトからダウンロードしてインストールします。

Node.js

 

なお、筆者としてはScoopで「scoop install nodejs」でインストールすることをおすすめしておきます。

 

kenteiblog.hatenablog.com

 

2.JDKをインストールする

Java SE - Downloads | Oracle Technology Network | Oracle

ScoopでインストールでもOK。

 

3.Android SDKをインストールする

developer.android.com

 

下のほうに行くとzipファイルがあるのでダウンロード。

好きな場所に展開して、パスを通します。

以下は「D:\androidSdk」に展開物を配置した場合のパス指定です。

D:\androidSdk\tools\bin

 

さらにJAVA_HOMEの指定が必要なので、2でインストールしたJDKのパスをシステム環境変数として登録します。

変数…JAVA_HOME

値…JDKのパス 

 

とりあえず、SDKマネージャーから必要な部品をインストールします。

コマンドは以下のとおりです。(とりあえずAPIはver26)

 sdkmanager "platform-tools" "platforms;android-26"

 

4.Cordovaをインストールする

以下を実行するだけ。

npm install -g cordova 

 

5.Cordovaプロジェクト作成

以下を実行するだけ。

cordova create <フォルダ名> <アプリID> <アプリ名>

フォルダ名・アプリID・アプリ名は自分で決める必要があります。

とりあえず

・フォルダ名⇒testFolder

・アプリID⇒com.kentei

・アプリ名⇒testAPP

とすると、以下のようなコマンドになります。

cordova create testFolder com.kentei testAPP 

 

上記を実行すると、カレントディレクトリにtestFolderというフォルダができるはずです。

 

6.Cordovaプロジェクトの諸設定

プラットフォームの追加と、ブラウザ確認ができるようにします。

5で作成したプロジェクトフォルダをカレントディレクトリにして、以下を実行します。

cordova platform add android

cordova platform add browser 

 

7.とりあえずブラウザで表示確認

cordova serve browser 

 http://localhost:8000に接続して、browserプラットフォームを選択すると以下の画面が表示される。

 

f:id:kentei0715:20171205230844p:plain

 

 

以上です。

 

2017/12/06 賢帝俊来