Cordova環境構築

Cordovaの環境構築を行うにあたって一部でハマったので覚書。

1.Node.jsをインストールする
https://nodejs.org/en/download/
上記のURLから、環境に合わせたインストーラをダウンロードしてください。インストーラを起動したら、特に何も変更せずにインストールを始めてしまって大丈夫です。
![001.png](https://qiita-image-store.s3.amazonaws.com/0/306544/daad9447-bc7e-21eb-1863-2b3d3c219a0d.png)

2.JDKをインストールする
https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
先程と同じく、環境に合わせたインストーラをダウンロードして初期設定のままインストールしてください。
![002.png](https://qiita-image-store.s3.amazonaws.com/0/306544/70a6c291-8329-2105-a3a2-ddc2f6f69412.png)

3.Android SDKをインストールする
https://developer.android.com/studio/?hl=ja
ここでものの見事にハマりました。なんでも、Android Studioはしょっちゅうインストーラの仕様が変わるらしいです。まず、普通にインストーラをダウンロードします。
![003.png](https://qiita-image-store.s3.amazonaws.com/0/306544/71c839e7-d7fc-8623-55aa-710ed45495df.png)

チェックボックスにチェックを入れ、ダウンロードを開始してください。
![004.png](https://qiita-image-store.s3.amazonaws.com/0/306544/6a2d6097-10e0-f6ea-ce60-af3ac54d36f6.png)

インストーラを起動してNEXTボタンを押下していくと、下記の画面が表示されます。
旧バージョンではここで「Android SDK」が選択できたのですが、現在のバージョン（Ver3.2.1）ではAndroid Studioの中にAndroid SDKが同封されているらしく、Android Studioをインストールすると自動的にAndroid SDKがついてきます。
自分は古い手順書を見ながらインストールを進めていたので、「Android SDKがない！」とかなりの時間探し回ってしまいました。
![005.png](https://qiita-image-store.s3.amazonaws.com/0/306544/fe5763d5-272c-d20d-ee52-4e859e57289b.png)

それからここ。
旧バージョンではここでAndroid SDKの保存場所を指定できたのですが、現在はAndroid Studioに同封されてしまったため、エリアごとなくなってしまっています。
この後に行う環境変数の設定でAndroid SDKのパスが必要になってくるのに、ここでパスの表示もしてくれないものだからかなり困りました。
ひとまずここではどうすることもできないので、このままインストールを進めてください。
![006.png](https://qiita-image-store.s3.amazonaws.com/0/306544/8d67d845-62cc-9302-b1ca-f2c25971860d.png)

インストールが完了したら、Android Studioを起動してください。
すると以下のような画面が出てきますが、今回は必要のない手順なのでCancelを押下して消してください。
![010.png](https://qiita-image-store.s3.amazonaws.com/0/306544/c646e0a4-4f59-c41f-18cf-0892a7142f9f.png)

スタート画面が表示されるのでConfigureを選択し、リストからSDK Managerを選択してください。
このとき、何故かSDK Managerを押下しても何も起こらないという事態が発生したのですが、そういう場合は「Configure → Settings」で設定画面を表示し、「Appearance & Behavior → System Settings → Android SDK」でSDK Managerを表示させることができます。
ちなみに、Ver3.1.2では一度Configureが消えたらしいですが、現在のバージョンでは復活しています。
![007.png](https://qiita-image-store.s3.amazonaws.com/0/306544/87782e01-1b21-0413-241b-a5ae2f2348e8.png)
![008.png](https://qiita-image-store.s3.amazonaws.com/0/306544/a73e00bf-a228-2f8e-957a-b24e9e62db48.png)

SDK Managerが表示されるので、Editを押下してください。
![011.png](https://qiita-image-store.s3.amazonaws.com/0/306544/77665efa-0e10-c8a0-26b1-37756fa12f68.png)

SDK Components Setupが表示されます。
Android SDKの保存先を指定したら、Nextを押下していってインストールを完了させてください。
また、ここで指定した保存先は環境変数を設定する際に使用するので、控えておきましょう。
![012.png](https://qiita-image-store.s3.amazonaws.com/0/306544/41a7fdae-d707-6e7a-346f-c1342bdf9493.png)

4.環境変数を設定する
JDKとAndroid SDKのPathを通します。
エクスプローラを開き、左側のメニューにある「PC」を右クリックして「プロパティ」を選択してください。
するとシステム画面が開くので、右側にあるメニューから「システムの詳細設定」を押下し、「システムのプロパティ」画面を表示します。
「詳細設定」タブから「環境変数」を押下してください。
![013.png](https://qiita-image-store.s3.amazonaws.com/0/306544/a565082f-ef0a-263a-6219-003d0c839c8b.png)

すると、「環境変数」画面が表示されるので、「システム環境変数」エリアからPathを選択し、編集ボタンを押下します。
![014.png](https://qiita-image-store.s3.amazonaws.com/0/306544/76a30523-a84b-bc99-51f4-1fe5f0bffa54.png)

「環境変数名の編集」画面が表示されるので、以下のパスを追加してください。
＜JDK＞
C:\Program Files\Java\jdk1.8.0_05\bin
　※JDKをインストールしたディレクトリ
＜Android SDK＞
C:\Users\ユーザー名\AppData\Local\Android\sdk\tools
C:\Users\ユーザー名\AppData\Local\Android\sdk\platform-tools
　※Android SDKをインストールしたディレクトリ
![015.png](https://qiita-image-store.s3.amazonaws.com/0/306544/9dc87999-4617-bf49-6def-f54661543ac2.png)

次に、新規の環境変数を作成します。新規ボタンを押下してください。
![016.png](https://qiita-image-store.s3.amazonaws.com/0/306544/ec23dfad-6c9d-2350-5a23-fdcf4be2c03a.png)

すると、今度は「新しい環境変数」画面が表示されるので、以下の通りに変数を設定してください。
変数名：JAVA_HOME
変数値：C:\Program Files\Java\jdk1.8.0_181\bin
　※JDKをインストールしたディレクトリ
![017.png](https://qiita-image-store.s3.amazonaws.com/0/306544/307e87a9-7d7f-d05a-5908-c9fc2ceb70f3.png)

「システム環境変数」エリアにJAVA_HOMEが追加されていることを確認します。
![018.png](https://qiita-image-store.s3.amazonaws.com/0/306544/0c55e922-f7ef-bd4e-cc46-d8f41dfa1b3c.png)

5.Cordovaをインストールする
コマンドプロンプトを開き、「npm install cordova -g」と入力して実行します。
インストールが完了すれば、Cordovaの環境構築は完了です。
![019.png](https://qiita-image-store.s3.amazonaws.com/0/306544/a0f15a1e-5a37-4854-a1ec-c12dbba3a06b.png)