MacでCordova開発環境を構築した備忘録

Mac OS X で Apache Cordova の開発環境を構築したので、備忘録を残しておきます。私の環境は macOS Sierra 10.12 でした。Android 開発だけであれば他の OS でも構築できると思うのでその場合は適宜読み替えてやってください。

# Apache Cordova の開発環境構築

## nodebrew のインストール

Apache Cordova は node.js 上で動作するので、node.js のインストールから始めます。

> 2019/11/04 追記
> 現在では、`nodebrew`の代わりに`nodenv`を使用したインストール方法が主流になっています。
> 詳しくは、こちらを参照 https://github.com/nodenv/nodenv

まずは、node.js のバージョン管理をしてくれるらしい nodebrew をインストールします。インストール方法は[nodebrewのページ](https://github.com/hokaccha/nodebrew)に説明してあるので、それに従います。

```bash
curl -L git.io/nodebrew | perl - setup
```

このコマンドを実行するとホームディレクトリの配下に`.nodebrew/`というディレクトリが作成され、その中に nodebrew がインストールされるようです。インストールが完了するとパスの設定をするようにメッセージが表示されます。

公式のページには`.bashrc`に設定するように書いてありますが、私の環境では既に`.profile`が存在していたので、こちらに書き込みました。この辺は、読み込まれる優先順位があるようなので自分の環境に合わせてください。
→詳しくは[こちらの記事]
(http://qiita.com/hirokishirai/items/5a529c8395c4b336bf31)を参考にさせて頂きました。

```bash
echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> .profile
```

このまま公式ページに説明のあるように`source ~/.profile`を実行しても良いのですが、次回ログイン時に正しく`.profile`が読み込まれるか確認したいので、一旦ログアウトしてから次のコマンドを実行します。

```bash
nodebrew help
```

無事にヘルプメッセージが表示されれば正しくインストールできています。次に node.js のインストールをします。現在インストールできるバージョンの一覧は次のコマンドで確認できます。

```bash
nodebrew ls-remote 
```

今回は特にバージョンにこだわらなかったので、最新の安定版をインストールしました。ついうっかり`nodebrew install`を使ってしまうと、ソースからビルドするらしいので時間がかかります。`nodebrew install-binary`を使いましょう。

```bash
nodebrew install-binary stable
```

私が作業した時点では v7.0.0 がインストールされました。

## Cordova のインストール

node.jsをインストールできたら、Cordova をインストールします。インストール方法は[CordovaのGetStartedページ](http://cordova.apache.org/#getstarted)に書いてある通りに進めます。

```bash
npm install -g cordova
```

Cordova のインストールができたら Cordova プロジェクトを生成しましょう。

```bash
cordova create CordovaTest
cd CordovaTest
```

次に開発したいプラットフォームを追加します。ここでは、ブラウザ、iPhone、Android を追加してみましょう。

```bash
cordova platform add browser ios android
```

Get Started のページでは、最後に`cordova run browser`を実行するように書いてありますが、環境が整っていないと起動できないと思います。必要な環境が揃っているかどうかは、次のコマンドである程度確認できます。

```bash
cordova info
```

上のコマンドを実行すると追加したプラットフォームごとに、エラーメッセージが幾つか表示されると思います。これらのエラーメッセージがでなくなるように環境を整えるのが次のステップになります。


# ブラウザ試験環境の構築

## Google Chrome のインストール

まずは [Google Chremeのページ](https://www.google.co.jp/chrome/browser/desktop/index.html)から Chrome をダウンロードしてきます。ダウンロードできたらファイルを実行して、ウィンドウ上のアイコンを下のフォルダアイコンにドラッグ＆ドロップしてインストールします。

![chrome_install.png](https://qiita-image-store.s3.amazonaws.com/0/97818/b42fd366-1be9-a73a-199c-d19db74d424c.png)

## ブラウザ上での起動

Chrome のインストールはかんたんですね。早速実行してみましょう。

```bash
cordova run browser
```

![cordova_chrome1.png](https://qiita-image-store.s3.amazonaws.com/0/97818/6ad9935c-3d70-05e1-59dd-e5f20083b81a.png)

![cordova_chrome2.png](https://qiita-image-store.s3.amazonaws.com/0/97818/66f4e217-3fdc-cdcf-e429-c366d2e6fb85.png)

ブラウザの大きさによってレイアウトが変化するみたいですね。

# iPhone 試験環境の構築

## XCode のインストール

私の場合、先に XCode をインストールしてしまったのでエラーになりませんでしたが、ios 用のビルドとエミュレータの実行に必要そうなので、その時の手順を書いておきます。
（Mac OS X 以外の開発環境では永久に ios プラットフォームのエラーは解消できません。諦めましょう。）

XCode 本体のインストールは AppStore から行うことができます。既に導入済みの方も多いでしょう。

![appstore_xcode.png](https://qiita-image-store.s3.amazonaws.com/0/97818/30cf7fd0-ce4f-954f-61d7-4030cba3c75d.png)

XCode 本体をインストールしたら、コマンドラインツールもインストールしておきましょう。

```bash
xcode-select --install
```

![xcode-select.png](https://qiita-image-store.s3.amazonaws.com/0/97818/398f273f-d601-83a5-74ba-a88fdae50050.png)

私の場合、先にコマンドラインツールを入れてしまったので、少しメッセージが違うかもしれません。

最後にライセンスに合意します。下記を実行して、ライセンスを最後まで読んだら、`agree`とタイプして合意します。

```bash
sudo xcodebuild -license
```

## iOS エミュレータの起動

iOS に必要な環境を整えたら、エミュレータを起動してみましょう。

```bash
cordova run ios
```

![cordova_ios.png](https://qiita-image-store.s3.amazonaws.com/0/97818/4722c67b-054b-36d6-e10d-9d9a8826b475.png)

無事、エミュレータが起動したら完了です。

# Android 試験環境の構築

## JDK のインストール

まずは[OracleのJava SEページ](http://www.oracle.com/technetwork/java/javase/downloads/index.html)から JDK をインストールしましょう。今回は Java 8 をインストールしました。JDK のバージョンが古いと`codova info`した時にエラーになってしまうことがあります。

![java8-install.png](https://qiita-image-store.s3.amazonaws.com/0/97818/4a3c59e8-0509-ec01-559a-4ae8bf9a6e05.png)

GUI に従ってインストールしましょう。


## Android Studio のインストール

次に[Android のディベロッパーページ](https://developer.android.com/studio/index.html?hl=ja)から Android Studio をダウンロードしてインストールします。左の Android Studio のアイコンを右のフォルダアイコンにドラッグ＆ドロップしてインストールします。

![android_studio_install.png](https://qiita-image-store.s3.amazonaws.com/0/97818/a6c1b24f-ae23-2cf5-87f4-463fe66c3195.png)

実際には初回起動の際にインストーラーが起動して必要な機能をインストールします。アプリケーションの一覧から Android Studio を起動しすると初期設定画面が表示されます。
![as1.png](https://qiita-image-store.s3.amazonaws.com/0/97818/4634ffde-6738-de3f-ace8-5cbd34df2007.png)
インストール方法は Custom を選択しました。
![as2.png](https://qiita-image-store.s3.amazonaws.com/0/97818/6b1c033b-f528-2350-cd2a-a4141d6ac4f0.png)
画面のスタイルを選択します。私は明るい方が見やすいので intelliJ の方を選びました。
![as3.png](https://qiita-image-store.s3.amazonaws.com/0/97818/03fe0332-1865-fbcc-3d4d-952741e66e12.png)
エミュレータを使用するのが主な目的なので、Android Virtual Device にチェックを入れます。
![as4.png](https://qiita-image-store.s3.amazonaws.com/0/97818/1b0315cb-1b62-39a6-56c7-7f902de9c1bb.png)
エミュレータに割り当てるメモリを決めます。デフォルトのまま進んでしまいましたが、私のマシンのメモリはそれほど多くないので、512MB にしておけばよかったかなと思っています。あとから変更するにはどうすればよいのだろう？
![as5.png](https://qiita-image-store.s3.amazonaws.com/0/97818/78c815e6-67df-9c14-9a20-319903ba1c96.png)
インストールされる容量を確認して Finish します。
![as6.png](https://qiita-image-store.s3.amazonaws.com/0/97818/a1c04aa1-27bf-46b6-e9d3-5c92b1e1b9ad.png)
下の画面でログが最後まで表示されたらインストール完了です。
![as7.png](https://qiita-image-store.s3.amazonaws.com/0/97818/7a00ed73-5d6f-13be-3b7c-61440767d88b.png)


インストールが完了したらパスの設定を行います。tools と platform-tools というディレクトリをパスに追加します。インストール先のパスは[Configure]->[SDK Manager]で確認することができます。

![android_studio.png](https://qiita-image-store.s3.amazonaws.com/0/97818/b647100f-d573-cf11-fa69-48fa4f08d383.png)
![android_sdk_path.png](https://qiita-image-store.s3.amazonaws.com/0/97818/685de6cb-cc07-44fd-e05f-53a8644e7cd4.png)

パスを確認したら環境変数$PATHに追加します。私の環境では .profile を使っていますが、その辺りは環境に合わせてください。

```bash
echo 'export PATH=$HOME/Library/Android/sdk/tools:$PATH' >> .profile
echo 'export PATH=$HOME/Library/Android/sdk/platform-tools:$PATH' >> .profile
```

この状態でエミュレータを起動しようとするとライセンスに合意していないとエラーが表示されて起動できません。いろいろ試しましたが、次の方法でなんとか起動できるようになりました。

SDK Manager の画面から SDK Tools を選び、インストールしたいものにチェックを入れます。（下の画像ではLicenseというキーワードで試行錯誤してましたが、選ぶツールは何でも良かったのかもしれません。他を選んでもできたという方がいれば教えてください。）

![android_license.png](https://qiita-image-store.s3.amazonaws.com/0/97818/3229f858-ebff-6230-3c48-4cd358445c6c.png)

[Apply] or [OK] を押すとライセンス合意の画面へ進むので、[Accept] にチェックを入れて [Next] を押下します。選択したツールがインストールされたらOKです。

![android_accept.png](https://qiita-image-store.s3.amazonaws.com/0/97818/9e2fec08-08cd-49b9-daff-81fb82bfa382.png)


## Android エミュレータの起動

Android 環境の準備が整ったらエミュレータを起動しましょう。

```bash
cordova run android
```

![cordova_android.png](https://qiita-image-store.s3.amazonaws.com/0/97818/9d839461-d35f-d0c7-1738-0cbc126c7a77.png)


無事、主要３環境の起動に成功しました。それでは今回はここまで。