ionicでWeb/iOS/Android向けビルド、実行までの手順

# はじめに
ionicの素晴らしいところは、1つのコードベースで、気に入ったJavascriptフレームワークを使用して、複数プラットフォーム向け開発できることです。 
今回、複数プラットフォーム向けに環境構築し、ビルド、実行できるところまでを手順を記載します。


# ゴール
ionic環境を構築し、Web、iOS、Android向けアプリをビルド、実行できる。

# 実施環境
* MacOS Catalina10.15.7

# homebrewインストール
```shell
# コマンド
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
```

# node.jsの環境構築

```shell
# nodebrewインストール
brew install nodebrew

# インストール可能なバージョンnode.jsバージョン表示
nodebrew ls-remote

# nodebrw用ディレクトリ作成
mkdir -p ~/.nodebrew/src

# 最新版をインストールする場合（または安定版）
nodebrew install-binary latest

# 安定版をインストールする場合（または最新版）
nodebrew install-binary stable

# インストールしたnode.jsバージョン表示
nodebrew ls
v14.13.1

current: none

# インストール直後はcurrent: noneとなっているため、node.jsを有効化する
nodebrew use v14.13.1

# インストールしたnode.jsバージョン表示
nodebrew ls
v14.13.1

current: v14.13.1 #node.jsバージョンが有効化されている

# node.jsをzshにパスを通す
echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zprofile
source ~/.zprofile

# nodeが使えることを確認
node -v
v14.13.1
```

# ionic環境構築
## ionic CLIインストール

  ``` shell
  npm install ionic -g
  ```
## ionic CLIアップデート
```shell
# 下記の様に表示された場合、アップデートを行う
────────────────────────────────────────────────────────────

          Ionic CLI update available: 5.4.16 → 6.11.11

     The package name has changed from ionic to @ionic/cli!

             To update, run: npm uninstall -g ionic
                 Then run: npm i -g @ionic/cli

  ────────────────────────────────────────────────────────────
  
  ionic -v #現バージョン確認
  npm uninstall -g ionic
  npm i -g @ionic/cli
  ionic -v #新バージョン確認
  6.11.11
```

## XCODEインストール

[‎「Xcode」をMac App Storeからインストール](https://apps.apple.com/jp/app/xcode/id497799835?mt=12)

  ``` shell
  # XCODE関連ライブラリインストール
  sudo gem install cocoapods
  xcode-select --install
  pod repo update
  ```

  [Android Studioインストール](https://developer.android.com/studio?hl=ja)

## 開発IDE

開発IDEは好みのものを使う。

### VSCODEの場合
下記プラグインあたりをインストールする
[Angular Language Service \- Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=Angular.ng-template)
[TSLint \- Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-tslint-plugin)
[Auto Rename Tag \- Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)
[Ionic Snippets \- Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=fivethree.vscode-ionic-snippets)

# ionic プロジェクト作成

```shell
# ionic開発用フォルダ作成（このフォルダ配下にプロジェクト群を作成）
mkdir -p ~/ionic/
cd ~/ionic/

# プロジェクト作成
ionic start --type=angular #angular以外も可

Every great app needs a name! 😍
Please enter the full name of your app. You can change this at any time. To bypass this prompt next time, supply name,
the first argument to ionic start.

# プロジェクト名を入れる
? Project name:test-prj 

# プロジェクトテンプレートを選択する
? Starter template: (Use arrow keys)
❯ tabs         | A starting project with a simple tabbed interface
  sidemenu     | A starting project with a side menu with navigation in the content area
  blank        | A blank starter project
  my-first-app | An example application that builds a camera with gallery
  conference   | A kitchen-sink application that shows off all Ionic has to offer

# 匿名の使用状況データの送信はNを選択
? Would you like to share anonymous usage data with the Angular Team at Google under
Google’s Privacy Policy at https://policies.google.com/privacy? For more details and
how to change this setting, see http://angular.io/analytics. 
```

# Web向けビルド、実行
```shell
cd ./test-prj
ionic serve
```

ブラウザが起動し、Webサービス実行される
![Image 2020-10-11 23-47-10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117828/45152b06-8f63-596f-d2e0-962f2d61413b.png)

# iOS、Android共通作業
```shell
# リリース向けビルド www配下に公開ファイルが作成される
ionic build --prod

# capacitorライブラリ追加
ionic integrations enable capacitor
省略
[OK] Integration capacitor added!
```

# iOS向けビルド、実行
```shell
# ionic capacitor にiOS追加
ionic cap add ios
省略
Now you can run npx cap open ios to launch Xcode

# XCODEでアプリを開く
npx cap open ios

```

XCODE起動後、サイドメニューのAPPをクリックする。
SigingのTeamを自身のものに設定する。
Bundle Identifierを自身のユニークIDにする。

| <img width="500" alt="signing.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117828/129b9709-a683-b344-1e1b-4c9b7e94d285.png">|
|:--|


実行ボタンを押すとエミューレーターで動作確認できる。

| <img width="300" alt="ios run.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117828/9d981de2-0c40-57f5-e8c4-2d8fec8f052b.png">|
|:--|


# Android向けビルド、実行
```shell
ionic cap add android
npx cap open android #Android Studio起動
```
Android Studioで実行を行うとアプリが起動する。

| <img width="300" alt="android run.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117828/76613955-2da6-d243-9b29-df5bf189a89f.png">|
|:--|