ユーザ用ツール

サイト用ツール


ionic4でのandroidアプリ開発環境

Ionic4でのAndroidアプリ開発環境

Macパソコンでエミュレーターを動かす方法については、以下のサイトが分かりやすいです。

https://mankutsu.com/ionic-emulation-1142

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

ここでは、Windowsパソコンで、Androidアプリを作成する方法いついて記載していきたいと思います。

公式サイト

環境構築

https://beta.ionicframework.com/docs/installation/android/#set-up-an-android-device

  1. Download JDK8 from the download page
  2. install Gradle
  3. Download Android Studio from the Android website.In the SDK Components Setup screen, finish installing the SDK.
  4. Configuring Command Line Tools.For Windows, check the documentation on setting and persisting environment variables in terminal sessions.
  5. Creating an Android Virtual Device
  6. Set up an Android Device

apkファイルの作成

https://beta.ionicframework.com/docs/building/android

For Capacitor, run the following:

ionic capacitor add android
ionic capacitor copy android

For Cordova, run the following:

ionic cordova prepare android
ionic cordova run android -l

https://beta.ionicframework.com/docs/publishing/play-store

ionic cordova build android --prod

Windows8.1でIonic4からCordova経由でAndroidアプリを作成する方法

(開発環境)

Windows 8.1 Pro
NodeJS v8.12.0
npm 6.4.1
Ionic CLI 4.2.0

1. Ionic4アプリの作成

ionic start ionic4-cordova-sample blank --type=angular

cordova は、Y + Enter, Proは N + Enter とします。

cd ionic4-cordova-sample
ionic serve

Ctrl + C ⇒ y + Enter でサーバ停止します。

2. cordovaを用いたandroidアプリの作成

ionic cordova prepare android
ionic cordova build android --prod

app-debug.apkファイルが作成されるので、そのapkファイルをandroidスマホにインストールすることができます。

Windows8.1でIonic4からCapacitor経由でAndroidアプリを作成する方法

(開発環境)

Windows 8.1 Pro
NodeJS v8.12.0
npm 6.4.1
Ionic CLI 4.2.0

1. Ionic4アプリの作成

ionic start ionic4-capacitor-sample blank --type=angular

Integrate your new app with Cordova to target native iOS and Android? は No

Install the free Ionic Pro SDK and connect your app? も No とします。

cd ionic4-capacitor-sample
ionic serve

2. @ionic-native3種をアンインストール

npm rm @ionic-native/core @ionic-native/splash-screen @ionic-native/status-bar

src/app/app.module.tsとsrc/app/app.component.tsの修正

3. Capacitorのインストール

ionic integrations enable capacitor
ionic build
ionic capacitor add android
ionic capacitor copy android

4. Capacitor経由でAndroidアプリの作成

以下を見ると、2018/10/7時点では、ionic cordova build android のようなコマンドは使えず、Android Studioからapkファイルを作成しないといけないらしい。。。

(これは、Ionic4もCapacitorもbeta版だからなのか、それとも、IonicもCpacitorもPWAに対応しているから、そもそもAndroidアプリにするまでもなく、PWAとしてカメラなどを使っていくからなのか。。。)

参考:https://capacitor.ionicframework.com/docs/basics/building-your-app/

npx cap open android

この後は、AndroidStudioでapkファイルを作成するらしいです。。。(途中)

app-debug.apkファイルが作成されるので、そのapkファイルをandroidスマホにインストールすることができます。

ionic4でのandroidアプリ開発環境.txt · 最終更新: 2018/10/07 by 127.0.0.1

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki