[*Cordova*] Cordova概要・環境構築

# はじめに
ハイブリッドアプリのフレームワークとして有名な[Apache Cordova](https://cordova.apache.org/)から調べて見たいと思います。
CordovaはApache Cordovaという名前で公開されているオープンソースフレームワークです。
Adobeでの商標は「PhoneGap」で、CordovaはNitobi社が開発していましたが、AdobeがNitobi社を買収したことによってAdobe配下に入りました。
Cordovaを使うと、HTML/CSS/JavaScriptなどを使ってアプリを開発することができます。


# <i class="fa fa-cog"></i> 環境構築
CordovaインストールとiOSでのシュミレート環境の構築。

**環境**
【OS】 OS X El Capitan

### Cordovaインストール
公式サイトのコマンドをターミナルから実行する。（エラーが出たらsudoを付けて実行）

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

インストールできてることを確認。

```bash
$ cordova -v
5.4.1
```

### Cordovaプロジェクトの作成
以下コメンドをターミナルから実行してプロジェクトを作成。

```bash
$ cordova create hello
```

プロジェクトにiOSとAndroid用のファイルを追加。

```bash
$ cd hello
$ cordova platform add ios
$ cordova platform add android
```

### Xcodeのインストール
入っていなければApp StoreからXcodeをインストール。

## iOSのシュミレートができるようにする
以下コマンドを実行。（エラーが出たらsudoを付ける）

```bash
$ npm install -g ios-sim
```

以下を実行するとシミュレーターが立ち上がる。

```bash
$ cordova emulate ios -d
```

こっちでもいける。

```bash
$ cordova run ios
```

### プロジェクトをXcodeで開く
以下コマンドを実行するとXcodeでプロジェクトが開かれるのでXcodeから編集可能。
編集して実行ボタン（▶）を押すとシミュレーターも立ち上がる。

```bash
$ open platforms/ios/HelloCordova.xcodeproj
```

### Androidのエミュレーターインストール
別のPCではできるようにしたのですが、HDDの容量を圧迫するのと重くてまともに動かないので割愛。
以下メモのみ。

* Eclipse （Eclipse IDE for Java EE Developers）のインストール
* Android SDK（SDK Tools Only）のインストール
* Eclipseの設定

### 実機テストできるようにする
以下を実行してプロジェクトをXcodeで開く。

```bash
$ open platforms/ios/HelloCordova.xcodeproj
```

iPhoneやiPadなどの実機をMacに接続し、使うデバイスを選択して、実行ボタン（▶）を押す。
![cordova01.png](https://qiita-image-store.s3.amazonaws.com/0/48912/3345b001-4917-22df-1a31-f2060d3161f9.png)

何かエラーが出るので「Fix Issue」をクリック。
![スクリーンショット 2015-11-29 10.26.25.png](https://qiita-image-store.s3.amazonaws.com/0/48912/18770086-f3ff-d545-265c-ef3ca362566c.png)

するとこんなエラー。
![スクリーンショット 2015-11-29 10.26.52.png](https://qiita-image-store.s3.amazonaws.com/0/48912/975eab68-df0b-3c4e-a9c1-59ca7416afba.png)

「Bundle Identifier」が被っていたらダメらしいので適当に変更。
![スクリーンショット 2015-11-29 10.27.21.png](https://qiita-image-store.s3.amazonaws.com/0/48912/d09e9a09-b620-7b75-b78a-7fd182129a77.png)

もう一度実行するとアプリが端末に入るので起動しようとすると以下の警告が出る。
![cordova02.jpg](https://qiita-image-store.s3.amazonaws.com/0/48912/2868eb97-2de1-2823-ef89-9d6e8848e001.jpeg)

「設定 ＞ 一般 ＞ プロファイル」から開発元を信頼するように設定。
![cordova03.jpg](https://qiita-image-store.s3.amazonaws.com/0/48912/13450900-5954-b265-782a-b9e78cf210c8.jpeg)

# <i class="fa fa-check-square-o"></i> プロジェクトの構造
画面デザインなどはwww以下にあるので、主にwww以下を編集してアプリを作っていく。

```
hooks
platform　･･･ プラっとフォームごとの設定など
 -- android
 -- ios
 -- platforms.json
plugins ･･･ プラグイン
 -- cordova-plugin-whitelist
 -- android.json
 -- fetch.json
 -- ios.json
www ･･･ アプリの画面やページなど
 -- css
 -- img
 -- js
 index.html
config.xml ･･･ アプリの設定ファイル
```

# <i class="fa fa-plus"></i> Cordovaプラグインの追加
[ここ](https://cordova.apache.org/plugins/)で検索できる。
プラグイン追加方法については、追加したいプラグインを選択するとインストール方法や使用方法が書いてあるドキュメントが表示される。
また、プラグインは自作することも可能なようです。

よく使いそうなプラグイン一覧

|用途|コマンド|
|:--|:--|
|カメラ|cordova plugin add cordova-plugin-camera|
|ネットワーク情報|cordova plugin add cordova-plugin-network-information|
|デバイス情報|cordova plugin add cordova-plugin-device|
|アプリ内ブラウザ|cordova plugin add cordova-plugin-inappbrowser|
|スプラッシュ画面|cordova plugin add cordova-plugin-splashscreen|
|ダイアログ|cordova plugin add cordova-plugin-dialogs|
|ファイルストレージ|cordova plugin add cordova-plugin-file|
|ファイル転送|cordova plugin add cordova-plugin-file-transfer|
|位置情報|cordova plugin add cordova-plugin-geolocation|
|バイブレーション|cordova plugin add cordova-plugin-vibration|
|音声の再生・録音|cordova plugin add cordova-plugin-media|
|デバッグコンソール|cordova plugin add cordova-plugin-console|
|国際化|cordova plugin add cordova-plugin-globalization|
|連絡先|cordova plugin add cordova-plugin-contacts|
|加速度センサ|cordova plugin add cordova-plugin-device-motion|
|デバイスのキャプチャ機能|cordova plugin add cordova-plugin-media-capture|
|コンパス|cordova plugin add cordova-plugin-device-orientation|
|バッテリー情報|cordova plugin add cordova-plugin-battery-status|
|プッシュ通知|cordova plugin add phonegap-plugin-push|

# <i class="fa fa-sun-o"></i> IDE選択肢
* [Netbeans](https://netbeans.org/kb/docs/webclient/cordova-gettingstarted_ja.html)
* [Visual Studio](https://msdn.microsoft.com/ja-jp/library/dn757054.aspx)
* Xcode
* [Eclipse](https://www.eclipse.org/thym/)
* [Brackets](https://github.com/adobe/brackets-phonegap)
* [IntelliJ](https://www.jetbrains.com/idea/help/using-phonegap-cordova.html)

# まとめ
プラグインがたくさんあるので、いろいろとデバイスの機能を使ったアプリが作れそうだなと感じました。
基本的にはHTMLやCSSで画面を作って、JavaScriptで動作を付けることができるのでとっつきやすい感じがしました。