スマホアプリを作ったことなので作ってみたかった

やったことないことをたしなんでみようと思い、スマホアプリを作ってみることにした。
※Android Studioでやったことはあるけど、当時のマシンパワー的にきつくてストレスたまりまくりで挫折したことあり。

参考資料：とらラボ！ Vol.2(by 技術書典6)
Ionicで簡単に作れそうなことが書いてあったのでこれを試してみる。

# What's Ionic

この辺参照。
https://ionicframework.com/
https://ionic.keicode.com/dev/what-is-ionic.php

# 環境構築
まずは環境構築。
インストール先の端末の環境は以下
・Windows10 Home

## Node.js
Node.jsのHPからインストーラーをダウンロードしてインストール。
https://nodejs.org/en/download/

と思ったけど、すでにインストールしてた。
バージョンを確認してみると以下。

```
PS C:\Program Files\nodejs> node -v
v8.12.0
```

```
C:\WINDOWS\system32>npm -v
6.4.1
```

## git

以下からダウンロードしてインストール
https://git-for-windows.github.io/

が、これも入っているので今回はスルー。

## VS CODEのエクステンション
VSCは入っているので、[Angular Language Service]というエクステンションを追加

## lonic CLI

```
npm install ionic cordova -g
```

## Android Studio
以下からダウンロードしてインストール
https://developer.android.com/studio

インストーラが1G弱なのでインストールしちゃったら削除してもいいかもしれない

これで環境構築はいったん完了。
ここまでは特に問題は発生せず。

# Hello World
<参考>
http://i-doctor.sakura.ne.jp/dokuwiki/doku.php/windows%E3%81%A7ionic%E3%82%92%E5%A7%8B%E3%82%81%E3%82%8B%E6%96%B9%E6%B3%95
とらラボ！ Vol.2

## プロジェクトを作成

```
ionic start HelloWorld
```

どういうものを作る？って聞かれるので、とりあえずtabsを選択。特に深い意味はない。


```
Install the free Ionic Appflow SDK and connect your app?
```
これに対してはとりあえず[n]。どういう意味なのかよくわからないけど。

## プロジェクト起動
サンプルプロジェクトができあがるので、起動させてみる

```
cd ./HelloWorld
ionic serve
```

http://localhost:8100
こんな感じでブラウザから確認できる

<img width="960" alt="2019-04-29_13h36_33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106639/9eb517a2-ab51-aff5-89c9-8f00f244fdd2.png">

<img width="960" alt="2019-04-29_13h36_42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106639/ce6f00b8-973d-9ac6-1514-ca8f78371239.png">

Ctrl+C で停止させるっぽい。

## androidアプリ化
```
ionic cordova platform add android
ionic cordova build android
```

これであっさりとapkが出来上がるかと思ったらエラー

<img width="630" alt="2019-04-29_13h44_39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106639/1866551f-5430-66b9-7e21-160bddb1e838.png">

```
Failed to find 'ANDROID_HOME' environment variable. Try setting it manually.
Failed to find 'android' command in your 'PATH'. Try update your 'PATH' to include path to valid SDK directory.
```

[ANDROID_HOME]が設定されていないとダメなのか。
Android Studioのインストールの後で設定しておく必要があるのかな。

→ Android Studioのセットアップがちゃんと終わっていなかったのが原因だった模様。

## 再確認
必要なものが足りているのかを改めて確認

```
cordova requirements
```


JDKも入ってなかった。
※どうもJREしか入れてなかったみたいだ。というか、全部まとめてインストールしてくれるものが欲しいわ。

改めて確認

```
cordova requirements
```

```
PS C:\Users\RyoNakamae\Ionic\HelloWorld> cordova requirements

Requirements check results for android:
Java JDK: installed 1.8.0
Android SDK: installed true
Android target: installed android-28
Gradle: installed C:\Program Files\Android\Android Studio\gradle\gradle-5.1.1\bin\gradle
```

## 準備OK
これで準備OKなんで改めてビルド

```
ionic cordova build android
```

```
BUILD SUCCESSFUL in 6m 59s
42 actionable tasks: 42 executed
Built the following apk(s):
        C:\Users\RyoNakamae\Ionic\HelloWorld\platforms\android\app\build\outputs\apk\debug\app-debug.apk
```

<img width="502" alt="2019-04-29_14h38_22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106639/a28f23fb-75ea-5949-047b-540357bffad7.png">

出来上がり。
デバッグビルドなのかな。リリースビルドはどうするんだろう？

## Ionic DevApp
ついでに以下も試してみる。
https://blog.ionicframework.com/announcing-ionic-devapp/

サインインする必要があるので、先にPCで登録しておく。
https://dashboard.ionicframework.com/signup

最新のバージョンだとサービス起動にオプションをつけるっポイ

```
ionic serve --devapp
```

![img_6290.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106639/b6bfcd88-5929-c3ce-d272-26d51444970a.jpeg)
画像はFIRE HD 10にて

簡単にアプリの動作が確認できる。
というか、家で遊ぶ分にはこの状態でも問題ないんじゃないのか。。。

# 参考
## windows10 上にて環境構築
https://qiita.com/taketakekaho/items/1d69e80aa6799f3babb5
http://i-doctor.sakura.ne.jp/dokuwiki/doku.php/windows%E3%81%A7ionic%E3%82%92%E5%A7%8B%E3%82%81%E3%82%8B%E6%96%B9%E6%B3%95
https://qiita.com/clown0082/items/5405c53eb955f985edda

## 今後参考にしそうなもの
https://qiita.com/s_kozake/items/d590896e5303b75c0c6c
https://blog.mitsuruog.info/2015/04/ionic-7days-war.html