モバイルWebアプリを作りたくなった

## お手本にした記事
https://qiita.com/alclimb/items/e199a0019fb6482e7ba9

## 開発環境構築
Ionicの環境構築は下記をお手本に。

https://westa.io/@alclimb/ionic3_install_debug



### Javaのバージョンを確認
```Terminal
$ java --version
java 13.0.2 2020-01-14
Java(TM) SE Runtime Environment (build 13.0.2+8)
Java HotSpot(TM) 64-Bit Server VM (build 13.0.2+8, mixed mode, sharing)
```

### Android Studioのバージョンを確認
```
Android Studio 4.1.2
Build #AI-201.8743.12.41.7042882, built on December 20, 2020
Runtime version: 1.8.0_242-release-1644-b3-6915495 x86_64
VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
macOS 10.15.7
GC: ParNew, ConcurrentMarkSweep
Memory: 1981M
Cores: 8
Registry: ide.new.welcome.screen.force=true, external.system.auto.import.disabled=true
Non-Bundled Plugins: org.jetbrains.kotlin
```
### Node.jsを更新

頼った記事↓

https://qiita.com/jaxx2104/items/2277cec77850f2d83c7a

:warning: sudoでやらなきゃいけない部分があった

```Terminal
$ node -v
v13.8.0
```
### cordovaをインストール

```Terminal
$ npm install -g cordova
（中略）
$ cordova -v
10.0.0
```

### ionicをインストール

```Terminal
$ npm install -g ionic
（中略）
$ ionic -v
5.4.16
```

### パッケージ追加
Android StudioのSDK Managerから以下を追加。

- SDK Platform
 - Android 11.0 (R)
 - Android 10.0 (Q)
 - Android 9.0 (Pie)
 - Android 8.1 (Oreo)
 - Android 8.0 (Oreo)
- ~~SDK Tools~~
 - ~~Google USB Driver~~

:warning: Google USB Driverは見当たらなかった

### 環境変数設定
私の場合はMacなので下記記事のMacのところを参考に。

https://akira-watson.com/android/path-environment.html#2

## ionicでプロジェクトを作成

```Terminal
$ ionic start <project_name> sidemenu --cordova --no-link

Pick a framework! 😁

Please select the JavaScript framework to use for your new app. To bypass this
prompt next time, supply a value for the --type option.

? Framework: Angular
```

最初に下記どっちのフレームワークを使うかを聞かれた。お手本の構成はAngularっぽかったし、Reactを外した的なことが書いてあったから、Angularを選択した。

- Angular
- React

gitもAutoで作ってくれるみたい。すごい。
作成し終えると、最後にこんなことが書いてあった。2021年2月現在、そう変わったのかもしれない。アップデートすることにする。

```Terminal
  ────────────────────────────────────────────────────────────

          Ionic CLI update available: 5.4.16 → 6.12.4
                                
     The package name has changed from ionic to @ionic/cli!
                                
             To update, run: npm uninstall -g ionic
                 Then run: npm i -g @ionic/cli

  ────────────────────────────────────────────────────────────
```

### update ionic to @ionic/cli

```Terminal
$ npm uninstall -g ionic
removed 225 packages in 1.479s
$ npm i -g @ionic/cli
```

### このタイミングでgitにpush

これが覚えられないのでこちらを参考に。

https://qiita.com/kanokanoka/items/d025e05335a4c9020984

1. Githubで **Create a new repository** する
2. ここにpushしたいので

```Terminal
$ git remote add origin https://github.com/<git_account>/<project_name>.git
$ git push -u origin main
```

実は、gitのデフォルトブランチが master から main に変わっていたことを知らなかったので、面倒なことに。。
```

これを読む羽目に。（でも結局修正できなかった）

https://qiita.com/fk_chang/items/a4839a595fef9a2c3724

まず、Macの中のgitをアップデート

https://qiita.com/MochiMochiChip/items/d91c12e40cd0de84b804

同じ目にあっている人がいたので、こちらと同じ手順を。

https://qiita.com/shu-illy/items/98e0e3470b9ebd1aef4b

ダメだ、、うまく行く気がしないので、今なら最初からやり直せると思い、初めてgitにpushするところに戻る。

## Androidアプリ設定を追加

### アプリ情報を追加
Android, iOSのアプリやでってことかな。

#### Android

```Terminal
$ ionic cordova platform add android --save
```

しょっぱなで下記のように www が作られ？処理が続く。

```Terminal
✔ Creating ./www directory for you in 1.78ms
> cordova platform add android
```

でも最後に下記 warning が出て、またオレを悩ます。

```Terminal
[WARN] cordova-res was not found on your PATH. Please install it globally:
       
       npm i -g cordova-res
       
[WARN] Cannot generate resources without cordova-res installed.
       
       Once installed, you can generate resources with the following command:
       
       ionic cordova resources android --force
```

お手本では特に言及されてなさそうなので、自力でトライしてみることにする。

```Terminal
$ npm i -g cordova-res
（中略）
+ cordova-res@0.15.3
added 86 packages from 197 contributors in 13.772s
```

たぶん、入ったっぽい。
次、

```Terminal
$ ionic cordova resources android --force
> cordova-res android
[cordova-res] Generated 18 resources for Android
[cordova-res] Wrote to config.xml
```

たぶん、行けたっぽい。
ただ、ここでまた Ionic CLI のアップデートを求められた（実は2ヶ月ぶりに続きをやっている）ので、上でもやったようにもう一度アップデートをかけることにする。

#### iOS

```Terminal
$ ionic cordova platform add ios --save
> cordova platform add ios
（中略）
> ionic cordova resources ios --force
> cordova-res ios
[cordova-res] Generated 47 resources for iOS
[cordova-res] Wrote to config.xml
```
Androidの時に resources 系の何かは対応したので、今度はエラーなし。

### 署名関連のビルド設定

開発証明書的なやつかな、、ここからまた時間かかりそう。。

#### Android

- デバッグ用の署名 keys/android/(dev-keystore_name).keystore 
- リリース用の署名 keys/android/(keystore_name).keystore 

を用意する。参考にしたのは下記の記事。

https://qiita.com/nogson/items/abe1016f36c3b331db30

```Terminal
$ keytool -genkey -v -keystore <dev-keystore_name>.keystore -alias <alias_name> -keyalg RSA -keysize 2048 -validity 10000
```
「10000」は有効期限で「10000日」らしい。
すると、質問が続くので答えていく。（もしくしたら空欄のままEnterでも良いかもしれない）

```Terminal
Enter keystore password:（新規パスワード）  
Re-enter new password:（もう一度新規パスワード） 
What is your first and last name?
  Unknown]:  （姓名）
What is the name of your organizational unit?
  Unknown]:  （組織単位名）
What is the name of your organization?
  Unknown]:  （組織名）
What is the name of your City or Locality?
  Unknown]:  （都市名または地域名）
What is the name of your State or Province?
  Unknown]:  （都道府県名または州名）
What is the two-letter country code for this unit?
  Unknown]:  （国コードを2文字で）
Is CN=（姓名）, OU=（組織単位名）, O=（組織名）, L=（都市名または地域名）, ST=（都道府県名または州名）, C=（2文字の国コード） correct?
  no]:  y
```

できたっぽい。全く同じ手順でリリース用も作ってみたけど良かったのかな。。

#### iOS

iOS は、App Store Connect からゴニョゴニョする必要があるように感じたので、ここで一旦休憩。ここまでを Git に上げよう。

さて、自身の Apple Developer の状態を確認するところからか。ちょっと古いけど参考にしたのは下記の記事。

https://qiita.com/cupper/items/9022cf17681298bffa2d

以前に登録したことがある記憶だったが、[Apple Developer Program](https://developer.apple.com/programs/) へ行ってみると「Enroll」のボタンしかなかったので押してみる。

やっぱり期限切れになっていたようで、新たにメンバーシップになるには ¥12,980- 払えと言われたので、今回はまだ見送ることにした。ただテストしたいだけなので、しばらくは Android だけを進めることにする。