Windows10でのIonic3開発環境の構築

松山事務所の石丸です。
Windows10(64bit)上に、Ionic3を使ってAndroidアプリを開発する環境を構築します。
ハイブリッドアプリ開発では、当然iOSもターゲットになるので、Macでの開発がベストだと思いますが、Windows10でAndroidのみをターゲットにします。

インストールするもの

すべてデフォルト設定でインストールします。

Java SE Development Kit 8 Downloads(8u131)
http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
Android Studio(2.3.3.0)
https://developer.android.com/studio/index.html
Node.js(6.11.0 LTS)
https://nodejs.org/ja/

環境変数を設定

環境変数JAVA_HOMEANDROID_HOMEを追加。
環境変数Pathにplatform-toolstoolsを追加します。

JAVA_HOME
C:\Program Files\Java\jdk1.8.0_131
ANDROID_HOME
C:\Users\{ユーザ名}\AppData\Local\Android\sdk
Path
%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\tools

Ionicのインストールと動作確認

公式サイトにある通り、まずはcordovaとionicをインストールします。

> npm install -g cordova ionic

バージョンを指定してインストールする場合は次のようにします。

> npm install -g ionic@3.5.0 cordova@7.0.1

インストールが完了したらionic startコマンドでひな形を作り、

> ionic start myApp tabs

ブラウザで表示してみます。

> cd myApp
> ionic serve

exec_browser

Androidで動作確認

Androidをビルド対象とするため、以下のコマンドでプラットフォームを追加します。

> ionic cordova platform add android

PCに接続した実機で実行してみます。

> ionic cordova run android

うまく実行されたでしょうか?

TOP
TOP