ユーザ用ツール

サイト用ツール


ionic4でのandroidアプリ開発環境

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

次のリビジョン
前のリビジョン
ionic4でのandroidアプリ開発環境 [2018/10/05] – 作成 adash333ionic4でのandroidアプリ開発環境 [2018/10/07] (現在) – 外部編集 127.0.0.1
行 1: 行 1:
 ====== Ionic4でのAndroidアプリ開発環境 ====== ====== Ionic4でのAndroidアプリ開発環境 ======
  
 +Macパソコンでエミュレーターを動かす方法については、以下のサイトが分かりやすいです。
  
-https://mankutsu.com/ionic-emulation-1142+https://mankutsu.com/ionic-emulation-1142\\
 [ionic4入門] ionicをiosとandroidエミュレーターにONEコマンドで動かす設定方法! [ionic4入門] ionicをiosとandroidエミュレーターにONEコマンドで動かす設定方法!
 2018/9/22 2018/9/22
  
 +ここでは、Windowsパソコンで、Androidアプリを作成する方法いついて記載していきたいと思います。
 +===== 公式サイト =====
 +
 +環境構築
  
 https://beta.ionicframework.com/docs/installation/android/#set-up-an-android-device https://beta.ionicframework.com/docs/installation/android/#set-up-an-android-device
 +
 +  -Download JDK8 from the download page
 +  -install Gradle
 +  -Download Android Studio from the Android website.In the SDK Components Setup screen, finish installing the SDK. 
 +  -Configuring Command Line Tools.For Windows, check the documentation on setting and persisting environment variables in terminal sessions.
 +  -Creating an Android Virtual Device
 +  -Set up an Android Device
 +
 +apkファイルの作成
 +
 +https://beta.ionicframework.com/docs/building/android
 +
 +For Capacitor, run the following:
 +<code>
 +ionic capacitor add android
 +ionic capacitor copy android
 +</code>
 +
 +
 +For Cordova, run the following:
 +<code>
 +ionic cordova prepare android
 +ionic cordova run android -l
 +</code>
 +
 +
 +
 +
 +
 +https://beta.ionicframework.com/docs/publishing/play-store
 +
 +<code>
 +ionic cordova build android --prod
 +</code>
 +
 +===== Windows8.1でIonic4からCordova経由でAndroidアプリを作成する方法 =====
 +
 +(開発環境)
 +<code>
 +Windows 8.1 Pro
 +NodeJS v8.12.0
 +npm 6.4.1
 +Ionic CLI 4.2.0
 +</code>
 +==== 1. Ionic4アプリの作成 ====
 +
 +<code>
 +ionic start ionic4-cordova-sample blank --type=angular
 +</code>
 +
 +cordova は、Y + Enter,  Proは N  + Enter とします。
 +
 +<code>
 +cd ionic4-cordova-sample
 +ionic serve
 +</code>
 +
 +{{:pasted:20181006-191307.png}}
 +
 +Ctrl + C => y + Enter でサーバ停止します。
 +==== 2. cordovaを用いたandroidアプリの作成 ====
 +
 +<code>
 +ionic cordova prepare android
 +ionic cordova build android --prod
 +</code>
 +
 +app-debug.apkファイルが作成されるので、そのapkファイルをandroidスマホにインストールすることができます。
 +
 +
 +===== Windows8.1でIonic4からCapacitor経由でAndroidアプリを作成する方法 =====
 +
 +(開発環境)
 +<code>
 +Windows 8.1 Pro
 +NodeJS v8.12.0
 +npm 6.4.1
 +Ionic CLI 4.2.0
 +</code>
 +
 +==== 1. Ionic4アプリの作成 ====
 +
 +<code>
 +ionic start ionic4-capacitor-sample blank --type=angular
 +</code>
 +
 +Integrate your new app with Cordova to target native iOS and Android? は No
 +
 +Install the free Ionic Pro SDK and connect your app? も No とします。
 +
 +<code>
 +cd ionic4-capacitor-sample
 +ionic serve
 +</code>
 +
 +==== 2. @ionic-native3種をアンインストール ====
 +
 +<code>
 +npm rm @ionic-native/core @ionic-native/splash-screen @ionic-native/status-bar
 +</code>
 +
 +src/app/app.module.tsとsrc/app/app.component.tsの修正
 +
 +==== 3. Capacitorのインストール ====
 +
 +<code>
 +ionic integrations enable capacitor
 +ionic build
 +ionic capacitor add android
 +ionic capacitor copy android
 +</code>
 +
 +==== 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/
 +
 +
 +<code>
 +npx cap open android
 +</code>
 +
 +この後は、AndroidStudioでapkファイルを作成するらしいです。。。(途中)
 +
 +
 +
 +app-debug.apkファイルが作成されるので、そのapkファイルをandroidスマホにインストールすることができます。
 +

ionic4でのandroidアプリ開発環境.1538753735.txt.gz · 最終更新: 2018/10/07 (外部編集)

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki