Cordovaの開発環境構築

posted in: Cordova | 0

松山事務所の石丸です。
Cordovaの開発環境を構築していきます。ターゲットプラットフォームはAndroidとiOS。
環境はWindows10とmacOS Sierra 10.12.3になります。

アプリケーションのインストール

特に記載がないものはデフォルト設定でインストールします。
MacへのXcodeインストールはされているものとします。

Node.js

http://nodejs.org/
Mac版はbrewではなく公式サイトのpkgをインストールしました。

JDK7以降

http://www.oracle.com/technetwork/java/javase/overview/index.html
AndroidStudioインストールのためにインストールします。

Android Studio + SDK

https://developer.android.com/studio/index.html

androidstudio_download

Android Studioバンドル版をインストールしたのですが、cordovaでandroidプラットフォームをビルドすると次のようなエラーで失敗しました。

Error: Could not find gradle wrapper within Android SDK. Might need to update your Android SDK.
Looked here: C:\Users\【ユーザー名】\AppData\Local\Android\sdk\tools\templates\gradle\wrapper

SDK Managerで確認してもAndroid SDK ToolsがInstalledになっているのに、エラーメッセージの通りsdk\toolsのディレクトリにtemplates以下のフォルダがありません。sdkのパスは異なりますがMacでも同じ状況でした。

tools_download

コマンドラインツールのみを入手して解凍してみると、templates以下たくさんのファイルを含んだtoolsフォルダが展開されたので、sdk下のtoolsフォルダを置き換えたらcordova buildが通るようになりました。
2016/3/16時点のAndroid SDK Toolsの最新バージョンは25.3.1ですが、置き換えたのが25.2.3のため、SDK Managerに更新を促されます。
素直に25.3.1へ更新してしまうとやっぱりtemplatesフォルダ以下がなくなってしまうので我慢してください。

パスを通す

CordovaがAndroid版をビルドできるようにパスを通します。

Windows

環境変数のPathに以下を追加

  • C:\Users\【ユーザー名】\AppData\Local\Android\sdk\platform-tools
  • C:\Users\【ユーザー名】\AppData\Local\Android\sdk\tools

Mac

~/.bash_profileに以下を追加

  • /Users/【ユーザー名】/Library/Android/sdk/platform-tools
  • /Users/【ユーザー名】/Library/Android/sdk/tools

Cordovaのインストール

コマンドラインで npm install -g cordova

Hello Cordova

Androidエミュレータを使用する場合は、Androidエミュレータの設定を参考に設定を行います。

Windows

WidowsではAndroidのみをターゲットに

Mac

MacではiOSとAndroidの両方をターゲットにします。

run_hello

うまく起動できたでしょうか?

LINEで送る
Pocket