CordovaでAndroid/iOSアプリ開発環境の構築
Androidの開発環境としては、Android Studioがあります。
Android Studioは複雑なアプリの開発ができる一方、JAVAを理解していないとソースをかけなかったり、クロスプラットフォームの開発ができないというデメリットもあります。
特にJAVAを勉強するのが苦手という人にとっては、HTML5+JavaScript+CSS3という組み合わせだけでAndroid / iOSどちらのアプリも生成できるという、クロスプラットフォームの開発環境がお薦めです。
この環境には、PhoneGapやMonacaなどがありますが、ここでは、基本的な開発環境であるCordovaについて、インストールからビルドまでを記録します。
Cordovaでビルド環境をつくる
Node.jsをインストール
https://nodejs.org/ja/
にアクセスし、最新版をダウンロードします。
今回の例では、Windows (x68)のv.6.11.0.LTS(推奨版)をダウンロード。
ダウンロードしたファイルをダブルクリックでインストールします。
Cordovaをインストール
node.js command promptを起動します。
※Node.jsをインストールしていないと起動しません。
分からない場合は「node」で検索すると候補にあがってきます。
> npm install -g cordova
以上のコマンドを実行するとインストールされます。
plugmanをインストール
plugmanは、cordova用のプラグイン。入れておくと何かと開発に便利なのでインストールしておきます。
> npm install -g plugman
Apache Antをインストール
http://ant.apache.org/
にアクセスし、DownloadのBinary Distributionsから、Current Release of Ant以下の最新のアーカイブをダウンロードします。
ここでは「apache-ant-1.10.1-bin.zip」をダウンロードしました。
ダウンロードしたらzipファイルを解凍し、c:\apache-ant\以下にフォルダごと移動します。
c:\apache-ant\apache-ant-1.10.1
Apache Antへのパスを通します。
「環境変数」というキーワードで検索して出た候補を起動すると、環境変数の設定画面が出るので、ユーザー環境変数の「新規」ボタンをクリックします。
変数名に「ANT_HOME」
変数値に「c:\apache-ant\apache-ant-1.10.1」
を指定して、「OK」。
さらに、変数名が「PATH」という欄を選んで、「編集」をクリックします。
「新規」をクリックして、
「%ANT_HOME%\bin」と入力して「OK」をクリックして完了します。
JDKをインストール
http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
にアクセスして、自分のOSのビット数に合った最新バージョンをダウンロードします。
ここでは、Java SE Development Kit 8u131から、「Windows x64」をダウンロードしました。
ダウンロードしたらインストールします。ここではインストール先を「c:\java\jdk1.8.0_131」にしています。
パスを通します。
変数名「JAVA_HOME」
変数値「c:\java\jdk1.8.0_131」
変数名「PATH」に追加
変数値「%JAVA_HOME%\bin」
Android SDKをインストール
Android SDKはAndroid Studioをインストールしないとインストールできないので、Android Studioをインストールします。
https://developer.android.com/studio/index.html?hl=ja
上記にアクセスし、Android Studioをダウンロード。ここでは、2.3.3.0をダウンロードし、インストールしました。インストール先は「c:\Android」にしています。
インストール後、Android Studioを起動し、「Configure」からSDK Managerを起動します。
左側のペインにあるAndroid SDKを選択し、「Android SDK Location:」がAndroid Studioをインストールしたフォルダのsdkフォルダになっているか確認します。なっていなければ修正します。
SDK Platformsを選択し、開発したいプラットフォームを選択します。ここではAndroid 4.0 (IceCreamSandwich)以降をすべてチェックしました。
また、「SDK Tools」から
・Android SDK Build-Tools **
・Android Emulator
・Android SDK Platform-Tools
・Android SDK Tools
をチェックします。
このほか、「Google Play services」「Google USB Driver」「Intel x86 Emulator Accelerator (HAXM installer)」もチェックしました。
以上を確認したら「OK」をクリックするとインストールが始まります。これで最新のSDKをインストールできました。
次に環境変数にパスを追加します。
変数名「ANDROID_HOME」
変数値「c:\Android\android-sdk」
変数名「PATH」に追加
変数値「%ANDROID_HOME%\platform-tools」
変数名「PATH」に追加
変数値「%ANDROID_HOME%\build-tools\**.*.*」
(末尾の数字は、実際のbuild-toolsフォルダを開き、大きい数字のフォルダ名を当てはめてください。たとえば、26.0.3など)
変数名「PATH」に追加
変数値「%ANDROID_HOME%\tools」
変数名「GRADLE_HOME」を新規作成
変数値「c:\Android\android-studio\gradle」
変数名「PATH」に追加
変数値「%GRADLE_HOME%\gradle-*.*\bin」
(*には、実際にフォルダを開き、そこにあるgradleフォルダ名を当てはめます。たとえば、gradle-3.2など)
以上で準備完了です。
ここまで設定したら、一度コンピュータを再起動します。
cordovaでアプリをビルドする
c:\などにcordovaプロジェクト専用のフォルダを作ります。
ここでは、「c:\cordova」とします。
コマンドプロンプトを開き、「c:\cordova」に移動します。
プロジェクトを作成します。ここではtestにします。
c:\cordova> cordova create test
testフォルダに移動した後に、Android用のプラットフォームを追加します。
c:\cordova> cd test
c:\cordova\test> cordova platform add android
testというプロジェクトをそのままビルドして実機で動作確認します。
動作確認として2種類の方法を示します。
動作確認1:apkファイルを転送する
コマンドプロンプトで、ビルドを実行します。
c:\cordova\test> cordova build
出力されたapkファイルをスマホに転送します。
転送方法はUSBで接続して任意のフォルダに配置したり、メールで送信するなどの方法をとります。
出力されたapkファイルをスマホでタップすると、インストールされて動作確認ができるようになります。
その際、「提供元不明のアプリ」のインストールを許可します。
動作確認2:直接スマホで起動する
直接スマホにアプリを表示させるには、まずスマホとPCをUSBで接続します。
スマホの「設定」→「開発者向けオプション」→「USBデバッグ」をオンにします。
「開発者向けオプション」が表示されていない場合には、「設定」→「端末情報」→「ソフトウェア情報」→「ビルド番号」を7回タップします。
コマンドプロンプトで以下を実行します。
c:\cordova\test> cordova run android
Gradleの設定
以下のエラーが出てビルドが成功しない場合にはGradleの設定がうまくいっていません。
Could not find an installed version of Gradle either in Android Studio,or on your system to install the gradle wrapper. Please include gradlein your path, or install Android Studio
この場合にはGradleを別途インストールしてパスを通します。
Gradle Build Toolにアクセスします。
「1. Install Gradle」をクリックします。
「Installing manually」をクリックします。
「Complete」をクリックすると「gradle-6.0-all.zip」がダウンロードされます。
※ファイル名はバージョンによって異なります。
ダウンロードしたzipファイルを解凍し、中身を「c:\gradle」以下に配置します。
次にパスを通します。
デスクトップ上の「PC」を右クリック→「プロパティ」をクリックします。
「システムの詳細設定」をクリックします。
「環境変数」をクリックします。
ユーザー環境変数の「Path」をクリックして「編集」をクリックします。
「新規」で新しい値を「c:\gradle\bin」とします。
(さきほどのgradleフォルダ内に直接解凍ファイルを入れた場合はbinフォルダがあることになります。そうでない場合はbinフォルダがある場所を指定します)
「OK」をクリックして確定します。
このあとコンピュータを再起動してください。
関連記事