[ionic4入門] ionicをiosとandroidエミュレーターにONEコマンドで動かす設定方法！

このページではionic4 Betaのインストールドキュメント通りに、ios, android

シミュレータを導入する方法を意訳的に載せています。

cordovaを使用します。それに伴い必要なものがいくつかあるのでそれも導入します。

cordova
Xcode
ios-sim & ios-deploy
Java
Gradle
Android Studio

少々厄介なので簡単にシミュレートできる、

Ionic DevApp　または、　ionic serve --lab

を試してからでもいいと思います。

iOSセットアップ

Ionic Docs – iOS Setup

この項目は上のリンクの意訳です。

注意
残念ながら、iOSアプリケーションはmacOSでしか作成できません。

iOSをターゲットにするには、下記、追加の環境設定が必要です。

Xcode

Xcodeは、ネイティブiOSアプリケーションを作成するためのIDEです。 iOS SDKとXcodeのコマンドラインツールが含まれています。 XcodeはこちらからAppleアカウントで無料でダウンロードできます。 App Storeを通じてインストールすることもできます。

開発チームの設定（任意）

すべてのiOSアプリは、開発用であっても、コードに署名する必要があります。幸運なことに、Xcodeは自動コード署名でこれを簡単にします。唯一の前提条件はApple IDです。

Xcodeを開き、Xcode » Preferences » Accountsに移動します。表示されていない場合はApple IDを追加してください。ログインすると、個人のチームがApple IDのチームリストに表示されます。

iOSシミュレータの作成

iOSシミュレータはMacでiOSデバイスをエミュレートします。次のドキュメントは、iOSシミュレータをセットアップする簡単な方法です。Appleのマニュアル

Xcodeを開き、Window » Devices and Simulatorsとシミュレータに移動します。 iPhone Xシミュレータがまだ存在しない場合は作成します。

ios-sim & ios-deploy

ios-simとios-deployは、開発中にiOSシミュレータとiOSデバイスにアプリをデプロイするユーティリティです。それらはnpmでグローバルにインストールできます。

npm install -g ios-sim
npm install -g ios-deploy

yarn派

yarn global add ios-sim
yarn global add ios-deploy

iOSシミュレーターで動かす！

セットアップが終わったので開発しながらiOSシミュレーターを動かしてみます。

Ionic Docs – iOS Development

この項目は上のリンクの意訳です。

ーー

このガイドでは、CapacitorまたはCordovaを使用してiOSアプリケーションをiOSシミュレータおよびデバイスに導入する方法について説明します。

iOS上でIonicアプリケーションを実行するためのワークフローは、Xcodeで実行と、Ionic CLIで実行する2つのワークフローがあります。一般に、Xcodeのアプローチはより安定していますが、Ionic CLIのアプローチはライブリロード機能を提供します。

Capacitorとは？

Capacitorはオープンソースのクロスプラットフォームアプリランタイムで、WebベースのアプリをiOS、Android、Electron、Webでネイティブに実行できます。これらのアプリ「ネイティブプログレッシブウェブアプリ」を参照すると便利です。これは、従来のハイブリッドアプリの考え方を超えた次の進化を表しています。Capacitorは、Ionic社によって作成され、積極的に開発/サポートされています。

Cordovaとは？

Apache Cordovaは、標準のHTML / CSS / JSを本格的なネイティブアプリに変換するオープンソースのモバイルアプリケーション開発フレームワークです。これは、カメラや加速度計などのネイティブデバイスの機能にアクセスするためのJavaScript APIを提供します。 Cordovaには、iOS、Android、Windows PhoneのWebアプリケーションをパッケージ化するために必要なビルドツールが含まれています。

プロジェクトの設定

おそらく、ライブアップデートをiOSシミュレーターでやりたいと考えている人が多いと思います。コードを変更したら表示が変わるあれです！

私もライブアップデートがやりたいので、ここではライブアップデートの設定をしていきます。

その場合は下のコマンドを動かすだけでOK！です。

ionic cordova run ios -l

他にも、ただ動かすだけの設定もあるようです。リンク

もし、グローバルにcordovaがインストールされていなければインストールします。

npm install -g cordova

Yarn派

yarn global add --non-interactive cordova

そして、2018/09/20 現在

rxjs６の調子が悪いようで、rxjs６のせいでライブアップデート用のコマンドがエラーになります。

なので、下の記述をpackage.jsonに追加し、npm（yarn）を実行します。

"resolutions": {
   "**/rxjs": "6.3.2"
 },

RxJS 6.2.x trustedSubscriber._addParentTeardownLogic is not a function error · Issue #4090 · ReactiveX/rxjsのjakubjosef様のおかげでどうにかなりました。

おそらく日がたっていれば治ってるバグでしょう。

ionic cordova run ios -l

を入力してみて問題なければやる必要はありません。

sink._addParentTeardownLogic is not a function　とか

rxjs_1.of is not a function とかのエラーが出たらやらないと動きません💧

(一度うまくいっても他のライブラリを入れた時にまたエラーになることがありましたので、エラーになったらrxjsの不具合を疑ってnpmを実行してみてください。)

勝手にシミュレーターが表示されれば設定完了です。

左がコード変更前で、右がコード変更後です。秒で更新されます。

これでiosの設定は完了です。

Safari Webインスペクタ

Safariには、iOSシミュレータとデバイス用のWeb Inspectorサポートがあります。 [開発]メニューを開き、シミュレータまたはデバイスを選択し、[Ionic App]を選択して[Webインスペクタ]を開きます。 [開発]メニューが表示されていない場合は、Safari»設定»詳細設定で有効にします。

Androidのセットアップ

Androidプラットフォームをターゲットにするには、追加の環境設定が必要です。 Androidアプリは、Windows、macOS、Linuxで作成できます。

Java

ネイティブAndroidアプリはJavaにコンパイルされます。こちらのダウンロードページからJDK8をダウンロードしてください。

Java 10はまだ少し新しく、Cordovaではうまく機能しません。 JDK8をお勧めします。

リンク先

ダウンロードページは次のようになっています。

macであれば同じものをダウンロードすればOK！

ただし、画像の中のテーブルの上にあるセレクトで承諾の方にチェックしないとダウンロードできません。今は右を選択しているのでダウンロードできません。

これを左にチェックすれば下の画像のように変わりダウンロードできます。

「ライセンスを承諾する」という項目にチェックしたことになります。

ダウンロードしたら他のソフト同様の方法でインストールです。

これをダブルクリック。セキュリティがパスワード入力を求めてきたら入力で、あとは流れでインストールします。

これが出れば完了！

Gradle

GradleはAndroidアプリで使用されるビルドツールで、別途インストールできます。詳細については、インストールページを参照してください。

Gradle導入

Gradle | Installation

この項目は上のリンクの意訳です。

ーーーーー

Gradleはすべての主要なオペレーティングシステム上で動作し、インストールにはJava JDKまたはJREバージョン7以上が必要です。確認するには、java -versionを実行します。

実行したら、下のようにさっき入れたバージョンが表示されました。

java -version
java version "1.8.0_181"
Java(TM) SE Runtime Environment (build 1.8.0_181-b13)
Java HotSpot(TM) 64-Bit Server VM (build 25.181-b13, mixed mode)

Install

macであれば下のコマンドでインストールできます。mac以外の方はこちらを参考に

brew install gradle

インストールが終わったら入っているか確認してみます。

gradle -v

------------------------------------------------------------
Gradle 4.10.2
------------------------------------------------------------

上のようになればOK！

Android Studio

Android Studioは、ネイティブAndroidアプリを作成するためのIDEです。 Android SDKが含まれており、コマンドラインで使用するように設定する必要があります。

Android Studioは、Androidエミュレータに必要なAndroid仮想デバイスを作成するためにも使用されます。ionicアプリをデバイスに起動することもできます。

Android Studioのインストール

AndroidウェブサイトからAndroid Studioをダウンロードしてください。より詳しいインストール手順については、「ユーザーガイド」を参照してください。

Android SDKのインストール

インストールが完了したら、Android Studioを開きます。 IDEは、Android SDKをインストールする必要があることを伝えてきます。その後、SDKコンポーネントのセットアップ画面で、SDKのインストールを完了します。 Android SDKの場所をメモしておいてください。

上の画像のように、なりました。

windowメニューのTool » SDK Managerで見ることができます。

ionicの公式に合わせて8.1(oreo)を入れました。

コマンドラインツールの設定

Android SDKには、便利なコマンドラインツールが付属しています。それらを使用するには、いくつかの環境変数を設定する必要があります。次の手順は、macOSとLinux用です。

~/.bashrc、~/.bash_profile、または同様のシェル起動スクリプトでは、次のように変更します。

今回は~/.bashrcを編集してみます。

vim ~/.bashrc

vimが開いたら下のようにパスを通します。

export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk

# avdmanager, sdkmanager
export PATH=$PATH:$ANDROID_SDK_ROOT/tools/bin

# adb, logcat
export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools

# emulator
export PATH=$PATH:$ANDROID_SDK_ROOT/emulator

Android SDKのコマンドラインディレクトリをPATHに追加します。各ディレクトリは、コマンドラインツールのカテゴリに対応しています。

一行目の

export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk

は先ほどのSDKの保存場所です。

それぞれ書き換えてください。

apksignerとzipalignについては、$ANDROID_SDK_ROOT/build-tools/<version>もPATHに追加する必要があります。（今回は設定しなくてOK）

.bash_profileの設定をしていないなら

.bashrcは.bash_profileで読み込むように設定しないと、.bashrcに何を書き込んでも設定が読み込まれません。

vim ~/.bash_profile

で.bash_profileを開きます。

そして

if [ -f ~/.bashrc ] ; then
. ~/.bashrc
fi

を書き加えます。

source ~/.bash_profile

で設定を反映しておきます。

参考：ターミナル起動時に.bashrcを読み込むようにする – アインシュタインの電話番号

vimや.bashrc、.bash_profileについて知りたい方はこちらがとても参考になります。
.bash_profileと.bashrcの関係を知り.bashrcで一元管理する | 0017

Android仮想デバイスの作成

Android仮想デバイス（AVD）は、AndroidエミュレータがAndroid OSを実行するために使用するシミュレーターです。以下のドキュメントは、Androidエミュレータのセットアップを簡単に行う方法です。Androidのマニュアル

AVDはAVDマネージャで管理されます。 AVDマネージャは、Tools » AVD ManagerメニューのAndroidプロジェクト内でアクセスする必要があります。ツールメニューは、メイン画面ではアクセスできない場合があります。フルメニューにアクセスするためのAndroidプロジェクトを作成します。

仮想デバイスの作成をクリックし、適切なデバイス定義を選択します。不確かな場合は、Pixel 2 XLを選択します。次に、適切なシステムイメージを選択します。不明な場合は、最新バージョンを選択してください。 Androidのバージョンについては、Androidのバージョン履歴をご覧ください。

AVDを作成したら、AVDからAndroidエミュレータを起動します。エミュレータを実行し続けることは、Android用のIonicアプリを開発する際のバグ検出を確実にする最も良い方法です。

実機Androidデバイスの設定（任意）

実際のAndroidハードウェアは、Ionicアプリの開発にも使用できます。しかし、まず、デバイスを開発用にセットアップする必要があります。以下のドキュメントは、Androidデバイスを開発用にセットアップする簡単な方法です。詳しい手順や情報については、Androidのマニュアルを参照してください。

デバイス上でUSBデバッグを有効にします。設定を開き、開発者オプションに移動し、USBデバッグを有効にします。開発者オプションメニューを最初に有効にする必要があるかもしれません。手順については、Androidのマニュアルを参照してください。
デバイスにコンピュータに接続する権限があることを確認します。 macOSの場合、追加の設定は必要ありません。 Windowsの場合、OEM USBドライバをインストールします。

USBケーブルを使用してデバイスをコンピュータに接続し、次のコマンドを使用して接続が機能することを確認します。