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

はじめに

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

ゴール

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

実施環境

• MacOS Catalina10.15.7

homebrewインストール

# コマンド
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

node.jsの環境構築

# 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インストール

npm install ionic -g

ionic CLIアップデート

# 下記の様に表示された場合、アップデートを行う
────────────────────────────────────────────────────────────

          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からインストール

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

Android Studioインストール

開発IDE

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

VSCODEの場合

下記プラグインあたりをインストールする
Angular Language Service - Visual Studio Marketplace
TSLint - Visual Studio Marketplace
Auto Rename Tag - Visual Studio Marketplace
Ionic Snippets - Visual Studio Marketplace

ionic プロジェクト作成

# 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向けビルド、実行

cd ./test-prj
ionic serve

ブラウザが起動し、Webサービス実行される

iOS、Android共通作業

# リリース向けビルド www配下に公開ファイルが作成される
ionic build --prod

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

iOS向けビルド、実行

# 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にする。

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

Android向けビルド、実行

ionic cap add android
npx cap open android #Android Studio起動

Android Studioで実行を行うとアプリが起動する。