Cordovaでハイブリッドアプリをつくる 2016

## はじめに

Cordovaは、ハイブリッドアプリ開発フレームワークの1つです。

スマホやタブレットの普及が広まってきた時代、
「全社員にスマホやタブレットが配布された。何か業務で使えるアプリをつくってくれないか。」
などといった依頼を受けることが多々ありました。

実際の提案時には、HTML+JSで、それっぽい動きをするプロトタイプを作って、お見せすることが多かったのですが、
アプリとして触れた方がテンション上がるので、さくっとアプリに変換できるCordova（当時はまだPhonegapという名前でした）は、かなり重宝しておりました。
`Web Storage`　も簡単に扱えるので、より現実味のあるデモも可能で、そもままサービスインなんてことも。

ネイティブアプリに比べると重たい、機能が限られるなど、いろいろ言われていましたが、そこは使いどころを工夫すればこそ、
実際に、大手のWebサービスでも利用してるところがたくさんあります。

アプリ開発からはしばらく遠のいていたのですが、ふと自分用に欲しいアプリを思いついたので、久しぶりにCordovaを触ってみることにしました。
当時（2010年くらい？）から、かなりいろいろパワーアップしていて、びっくりです。
この手の記事は山のようにありますが、環境構築〜アプリ作成まで、自分用の備忘録として残します。


## 環境構築

マイマシーン。（アップデートせな...）
![image](https://qiita-image-store.s3.amazonaws.com/0/116449/867e1285-6979-6076-96b7-73e9c8a78009.png)

### 1. node.js をインストールする

しょっぱなから違う！前はnode.jsなんて使わなかった。
もともと自PCにインストールされていたので、手順は割愛。
バージョンは最新じゃないかもだけどキニシナイ。

```
$ node -v
v6.6.0
$ npm -v
3.10.8
```

### 2. cordovaをインストールする＆動作確認する

本家サイトのとおりに。
https://cordova.apache.org/

かっこよくなってる！
![image](https://qiita-image-store.s3.amazonaws.com/0/116449/782c5eca-bd0c-fc00-e7b7-1daeed2a35a0.png)

GET STARTED の記載の通りにやる。
コマンドがコピーできるようになっている。やさしい。
![image](https://qiita-image-store.s3.amazonaws.com/0/116449/9391bae4-e41e-2394-8b2c-52cdd15352e8.png)

No4の手順までやると、ブラウザが起動されて、HelloWorld！かんたん。
![image](https://qiita-image-store.s3.amazonaws.com/0/116449/1628efe9-04d0-b515-7e92-7d330dfa51b7.png)

確認

```
$ cordova -v
6.4.0
```

### 3. iOSエミュレータを動かしてみる

#### 3.1 事前準備

事前にXcodeのインストールが必要です。
自PCにはインストール済みなので手順は割愛。

#### 3.2 Cordovaにエミュレータを追加＆起動する

- Cordovaのインストール手順内で作成したProjectのカレントディレクトリに移動して、iOS用のplatformを追加する。

```
$ cd MyApp
$ cordova platform add ios
```

- エミュレータを起動する

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

起動した。はやい。
![image](https://qiita-image-store.s3.amazonaws.com/0/116449/4be3c45c-faee-ae82-1a25-96a24004845b.png)


### 4. Androidエミュレータを動かしてみる

#### 4.1 事前準備

Android環境は今の自PCには入っていないので、インストールした。

- ダウンロード

本家サイトより、Android Studio をダウンロード
https://developer.android.com/studio/index.html

![image](https://qiita-image-store.s3.amazonaws.com/0/116449/dbb283d7-a556-61bb-efe1-6e6b7fbcd987.png)


（あるある？会社WLANプロキシバリバリとかだと落とせない系かもです。）

なんかおしゃれ
![image](https://qiita-image-store.s3.amazonaws.com/0/116449/b4505147-6c5f-0955-37b8-c7410c2c7925.png)

- セットアップ
アプリ初回起動時にセットアップ画面がでる。
とりあえず何も考えず次へ次へでFinish。
　

- パスを通す

cordovaコマンドは、Android SDKに含まれているコマンドを内部で利用するため、パスを通す必要がある。
自分の環境だとこう。

```bash:.bash_profile
export PATH=$PATH:/Users/aue/Library/Android/sdk/tools/
export PATH=$PATH://Users/aue/Library/Android/sdk/platform-tools/
```

`.bash_profile` を更新したから再読み込み

```
$ source .bash_profile
```

- Cordovaで必要なsdkをダウンロードする

コマンドラインより、Android SDK Manager を起動する。

```
$ android
```

![image](https://qiita-image-store.s3.amazonaws.com/0/116449/2d5aba59-903e-2496-eeea-a124d5b0b870.png)

`SDK Platform` と `ARM EABI v7a System Image` を選んでインストールする。
（今回のCordovaのバージョンでは24を入れろとなっていたので、Android7.0の中から選択）

- Android エミュレータを作成する

コマンドラインより、Android Virtual Device (AVD) Manager を起動する

```
$ android avd
```

![image](https://qiita-image-store.s3.amazonaws.com/0/116449/ea25d604-7ba5-d43c-cdd7-9b88fd6c00e3.png)


`Create` ボタンよりエミュレータを作成する。

こんなかんじで。なんとなくNexus5を選んでみた。
![image](https://qiita-image-store.s3.amazonaws.com/0/116449/333f3878-6765-92b8-15f3-404cf16ca532.png)

#### 4.2 Cordovaにエミュレータを追加＆起動する

- Android用のplatformを追加する。

```
$ cd MyApp
$ cordova platform add android
```

- エミュレータを起動する

```
$ cordova emulate android -d
```

起動した！おそい...
フライングで黒画面...

![image](https://qiita-image-store.s3.amazonaws.com/0/116449/ba23bddb-691b-795f-fac1-0497779c26dd.png)



なんかエラーが発生してやり直したい場合は、一回platformを削除する。

```
$ cordova platform remove android
```



## 3. なんかアプリをつくる

プロト職人もどきであった当時、自分の中では、Cordova+HTML+jQuery(jQuery mobile)の組み合わせが流行っておりました。
なので今回もその組み合わせで！

jQuery Mobileは、当時は最強だった（個人的に、2010年頃。）と思う。（その後、Bootstrapとかとかいろいろ素敵なのが出てきたけど）
もともとJavascpriptが苦手だったけれど、jQueryを使う内にJSに開眼した！という思い入れもある...！

完成が今日に間に合わなかったので、後日アップしますmm
たいしたものではないです。