cordovaの開発環境構築

仕事でApache Cordovaのアプリケーションを作る必要があったのですが知見が全く無く色々とわからないことだらけでした。
なんとか、こうすればいいかなと思ったものまで辿り着いたので備忘として記載します。

環境は以下で行いました。

* Mac(Sierra 10.12.3)
* node(v6.10.3)
* npm(4.2.0)

# 環境構築

## Apache Cordova のインストール

node.jsが入っていることが前提になります

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

これでグローバルにcordovaをインストールできたのでどこでもcordovaコマンドが実行できるようになりました。

バージョン
を指定してインストールしたい場合はcordovaの後に@でバージョンを指定すればOK。

```bash
npm install -g cordova@7.0.1
```

インストールが正常に完了したかどうか確認するためにバージョンを確認します。

```bash
cordova -v
```

バージョンが表示されればcordovaのインストールは完了です。

## サンプルプロジェクト作成

任意のディレクトリに移動してサンプルのプロジェクトを作成してみます。

```bash
cordova create cordovaSample com.example.hello CordovaSample
```

ここで指定しているcreateコマンドの引数はそれぞれ下記のような意味になります。

* `cordovaSample`：ディレクトリ名
* `com.example.hello`：作成したアプリの識別子(指定任意、未指定の場合はio.cordova.hellocordovaになる)
* `CordovaSample`：作成したアプリのプロジェクト名(指定任意、未指定の場合はHelloCordovaになる)

Creating a new cordova project.の文言が出力されれば成功です。

作成したプロジェクトは以下のような状態になっていると思います。

```
.
├── config.xml
├── hooks
├── package.json
├── platforms
├── plugins
├── res
└── www
```

## バージョン管理

作成したプロジェクトに移動してバージョン管理の準備をします。
バージョン管理にはgitを使用します。
とりあえず初期化し、.gitignoreを追加します。

```bash
 git init 
 touch .gitignore 
```
gitignoreは下記のようにしました。
platformsは最初は書いていなかったのですが、platformsをリポジトリに含めてもemulateなどがうまくいかなかったのでignoreすることにしました。
platformsもpluginsもコマンドで簡単に同一の環境を作成できるので特に問題はないと思っています。

```
.DS_Store
node_modules
platforms
plugins
```
記載をしたらaddしてコミットしてしまいましょう。

```bash
git add --all
git commit -m "first commit"
```

自分はこのあとリモートリポジトリでgithubを追加しました。
書くのは面倒くさいので割愛＼(^o^)／

## プラットホーム追加

開発を行いたいプラットホームを追加します。
Andoridだけあればよかったのですが、Androidシミュレータは起動にとても時間がかかり、htmlの確認とかするたびに起動するのは辛いのでブラウザも追加しました。

```bash
cordova platform add android@6.2.3 browser
```

Androidはバージョンを指定してインストールを行いました。
browserは特にないのでそのままです。
ちなみ`platform`は`platforms`でも問題ないようです。

プラットホームが追加できているかの確認は以下で行なえます。
Installed platforms:に記載されているのがインストール済みのプラットホームです。

```bash
cordova platform ls
Installed platforms:
  android 6.2.3
  browser 4.1.0
Available platforms:
  blackberry10 ~3.8.0 (deprecated)
  ios ~4.4.0
  osx ~4.0.1
  webos ~3.7.0
```

プラットホームの追加を行うとconfig.xmlにプラットホームの情報、package.jsonに依存関係が追加されます。

```config.xml
<engine name="android" spec="~6.2.3" />
<engine name="browser" spec="~4.1.0" />
```

```package.json
    "dependencies": {
        "cordova-android": "^6.2.3",
        "cordova-browser": "^4.1.0",
        "cordova-plugin-whitelist": "^1.3.2"
    },
    "cordova": {
        "plugins": {
            "cordova-plugin-whitelist": {}
        },
        "platforms": [
            "android",
            "browser"
        ]
    }
```

## 起動

### ブラウザ
準備が整ったと思うので試しに起動してみましょう。
こんな感じの画面がブラウザで表示されると思います。

```bash
cordova emulate browser
```

![s_スクリーンショット 2017-05-24 23.46.07.png](https://qiita-image-store.s3.amazonaws.com/0/62936/5df564f1-858f-d41f-f0b6-5cdd6a13abf7.png)

### Android

Androidは事前にAndroid Studioなどでシミュレータをインストールしておけばシミュレータを起動できると思います。
結構時間がかかるのでこの記事では取り上げません、すいません。

```bash
cordova emulate android
```
![s_スクリーンショット 2017-05-24 23.51.00.png](https://qiita-image-store.s3.amazonaws.com/0/62936/522dfc6e-dc48-20e4-b052-ecb86a81ff05.png)

## リモートリポジトリにあるものをcloneしてきた場合

cloneしてきた場合は`cordova prepare`コマンドを実行すれば、config.xmlなどの情報を参照して同じプラットホームの環境にしてくれます。
また、package.jsonにライブラリを追加している場合は`npm install`も実行します。


今回の記事はここまでになります。
今後もcordova関係で困ることがあった場合は記事にしていきたいと思います。