

このページではionic4 Betaのインストールドキュメント通りに、ios, android
シミュレータを導入する方法を意訳的に載せています。
cordovaを使用します。それに伴い必要なものがいくつかあるのでそれも導入します。
- cordova
- Xcode
- ios-sim & ios-deploy
- Java
- Gradle
- Android Studio
少々厄介なので簡単にシミュレートできる、
Ionic DevApp または、 ionic serve --lab
を試してからでもいいと思います。
目次
iOSセットアップ
この項目は上のリンクの意訳です。
残念ながら、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シミュレーターを動かしてみます。
この項目は上のリンクの意訳です。
ーー
このガイドでは、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 現在
rxjs6の調子が悪いようで、rxjs6のせいでライブアップデート用のコマンドがエラーになります。
なので、下の記述を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をダウンロードしてください。
リンク先
ダウンロードページは次のようになっています。
macであれば同じものをダウンロードすればOK!
ただし、画像の中のテーブルの上にあるセレクトで承諾の方にチェックしないとダウンロードできません。今は右を選択しているのでダウンロードできません。
これを左にチェックすれば下の画像のように変わりダウンロードできます。
「ライセンスを承諾する」という項目にチェックしたことになります。
ダウンロードしたら他のソフト同様の方法でインストールです。
これをダブルクリック。セキュリティがパスワード入力を求めてきたら入力で、あとは流れでインストールします。
これが出れば完了!
Gradle
GradleはAndroidアプリで使用されるビルドツールで、別途インストールできます。詳細については、インストールページを参照してください。
Gradle導入
この項目は上のリンクの意訳です。
ーーーーー
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の保存場所です。
それぞれ書き換えてください。
.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ケーブルを使用してデバイスをコンピュータに接続し、次のコマンドを使用して接続が機能することを確認します。
adb devices
デバイスが一覧表示されます。トラブルシューティングと詳細については、adbのドキュメントを参照してください。
androidシミュレーターで動かす!
iosと同様
ionic cordova run android -l
このコマンドでライブアップデートできます。
こんな感じでうまく動きました。
うまく動かない場合は、
Androidエミュレーターを再起動してみてください。
Chrome DevTools
ChromeはAndroidのシミュレータやデバイスの開発ツールをサポートしています。シミュレータの実行中またはデバイスがコンピュータに接続されている間にChromeでchrome://inspect
に移動し、デバッグする必要のあるアプリを選択します。
これ便利すぎる✨
summary
これでようやく開発環境が整ってきた感じです。
コメント
[…] https://mankutsu.com/ionic-emulation-1142 [ionic4入門] ionicをiosとandroidエミュレーターにONEコマンドで動かす設定方法! 2018/9/22 […]