Help us understand the problem. What is going on with this article?

CordovaをWindowsで。その2 - Androidで動かす

More than 3 years have passed since last update.

はじめに

なるべく簡単にCordovaをWindowsで試してみる。 その2。
作ったアプリをAndroid実機で動かしてみる。
当初エミュレータで動かすことを考えましたがエミュレータが思った以上に設定も大変で動きも遅く……まずは手軽にやること考えて直接実機で動かします。

手順

その1 からの続き。

動作プラットフォームに Android を追加します

cordova create MyApp などで作成したアプリのフォルダに移動して、まずは、今使えるプラットフォームを確認します。

$ cordova platform ls

Installed platforms:
  browser 4.1.0
Available platforms:
  amazon-fireos ~3.6.3 (deprecated)
  android ~5.1.1
  blackberry10 ~3.8.0
  firefoxos ~3.6.3
  webos ~3.7.0
  windows ~4.3.1
  wp8 ~3.8.2 (deprecated)

browserはインストール済み(つまりすぐに利用可能)で、他は未インストールです。今回はAndroidで遊びたいのでAndroidを追加します。

$ cordova platform add android --save

Adding android project...
Creating Cordova project for the Android platform:
        Path: platforms\android
        Package: io.cordova.hellocordova
        Name: HelloCordova
        Activity: MainActivity
        Android target: android-23
Android project created with cordova-android@5.1.1
Installing "cordova-plugin-whitelist" for android

               This plugin is only applicable for versions of cordova-android greater than 4.0. If you have a previous platform version, you do *not* need this plugin since the whitelist will be built in.

--save flag or autosave detected
Saving android@~5.1.1 into config.xml file ...

--saveオプションをつけることでconfig.xmlにもAndroidの情報が保存されます。

Androidに必要なパッケージの確認とインストール

AndroidのビルドにはJavaなどが必要になります。が、まずは必要なパッケージの確認をします。

$ cordova requirements

Requirements check results for android:
Java JDK: installed .
Android SDK: not installed
Failed to find 'ANDROID_HOME' environment variable. Try setting setting it manually.
Failed to find 'android' command in your 'PATH'. Try update your 'PATH' to include path to valid SDK directory.
Android target: not installed
Android SDK not found. Make sure that it is installed. If it is not at the default location, set the ANDROID_HOME environment variable.
Gradle: not installed
Could not find gradle wrapper within Android SDK. Could not find Android SDK directory.
Might need to install Android SDK or set up 'ANDROID_HOME' env variable.

Requirements check results for browser:
Check failed for browser due to Failed to check requirements for browser platform. check_reqs module is missing for platfrom. Skipping it...
Error: Some of requirements check failed

とりあえずこの環境では、

  • Java SDK: インストール済み
  • Android SDK: 未インストール
  • 環境変数ANDROID_HOMEが未設定
  • androidコマンドがない ……他

といろいろ出てきたので上から対応していきましょう。
詳細は https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html#requirements-and-support ここを見てほしいですが、下記、わたしがやった手順です。

ちなみに、、、いろいろなサイトの手順を見ると最初に無条件でJavaとかをインストールする手順が書いてあります。でも、できれば、こうやって手順を進めていって最初に失敗(?)して「なるほど、だから必要なんだ」と納得してからインストールするようにしたほうが、勉強になります(なると思います)。それに環境はひとそれぞれですので、こうやっていけば理解も深まるし必要最低限なものだけで進めることができます!

参考:Android SDKのインストール

not installedだった方は下記からインストールしてください。
http://developer.android.com/sdk/installing/index.html?pkg=tools
1GBくらいのファイルのダウンロードが必要で、インストールもそこそこ長いので気楽にやってください。

  1. ダウンロードしたandroid-studio-....exeを実行する
  2. ウィザードにしたがってインストールする …それだけです

not installedのもののインストールがおわったら再度確認をしてみます。

$ cordova requirements

Requirements check results for android:
Java JDK: installed .
Android SDK: installed
Android target: installed android-23
Gradle: installed

Requirements check results for browser:
Check failed for browser due to Failed to check requirements for browser platform. check_reqs module is missing for platfrom. Skipping it...
Error: Some of requirements check failed

今回はandroidを動かそうとしているので、for androidが全てinstalledになっていればいいです。環境変数のエラーもいくつか出ていましたが、わたしの環境ではAndroid SDKをいれると一緒に解決しました。

ここもお決まりの手順を全てやろうとせずに、一個やっては確認、一個やっては確認、をしてぜひtry&Errorでやってみてください。最初から失敗しないようにの準備万端も勉強になりますが、一手一手確認するのもとっても大事です!

ビルドする

これで準備が整ったので、ビルドしてみます。

$ cordova build android

Downloading http://services.gradle.org/distributions/gradle-2.2.1-all.zip

Exception in thread "main" java.lang.RuntimeException: java.net.UnknownHostException: services.gradle.org
        at org.gradle.wrapper.ExclusiveFileAccessManager.access(ExclusiveFileAccessManager.java:78)
        at org.gradle.wrapper.Install.createDist(Install.java:47)
        at org.gradle.wrapper.WrapperExecutor.execute(WrapperExecutor.java:129)
        at org.gradle.wrapper.GradleWrapperMain.main(GradleWrapperMain.java:48)
Caused by: java.net.UnknownHostException: services.gradle.org
        at java.net.AbstractPlainSocketImpl.connect(AbstractPlainSocketImpl.java:184)
        at java.net.PlainSocketImpl.connect(PlainSocketImpl.java:172)
        at java.net.SocksSocketImpl.connect(SocksSocketImpl.java:392)
        at java.net.Socket.connect(Socket.java:589)
        at java.net.Socket.connect(Socket.java:538)
        at sun.net.NetworkClient.doConnect(NetworkClient.java:180)
        at sun.net.www.http.HttpClient.openServer(HttpClient.java:432)
        at sun.net.www.http.HttpClient.openServer(HttpClient.java:527)
        at sun.net.www.http.HttpClient.<init>(HttpClient.java:211)
        at sun.net.www.http.HttpClient.New(HttpClient.java:308)
        at sun.net.www.http.HttpClient.New(HttpClient.java:326)
        at sun.net.www.protocol.http.HttpURLConnection.getNewHttpClient(HttpURLConnection.java:1167)
        at sun.net.www.protocol.http.HttpURLConnection.plainConnect0(HttpURLConnection.java:1103)
        at sun.net.www.protocol.http.HttpURLConnection.plainConnect(HttpURLConnection.java:997)
        at sun.net.www.protocol.http.HttpURLConnection.connect(HttpURLConnection.java:931)
        at sun.net.www.protocol.http.HttpURLConnection.getInputStream0(HttpURLConnection.java:1511)
        at sun.net.www.protocol.http.HttpURLConnection.getInputStream(HttpURLConnection.java:1439)
        at org.gradle.wrapper.Download.downloadInternal(Download.java:59)
        at org.gradle.wrapper.Download.download(Download.java:45)
        at org.gradle.wrapper.Install$1.call(Install.java:60)
        at org.gradle.wrapper.Install$1.call(Install.java:47)
        at org.gradle.wrapper.ExclusiveFileAccessManager.access(ExclusiveFileAccessManager.java:65)
        ... 3 more
Error: Error code 1 for command: cmd with args: /s,/c,""...MyApp\platforms\android\gradlew" cdvBuildDebug -b "...MyApp\platforms\android\build.gradle" -Dorg.gradle.daemon=true -Pandroid.useDeprecatedNdk=true"

のようなエラーがでたら、きっとProxyの設定です。
下記のコマンドで設定をしてから再度チャンレンジしてみます。

export JAVA_OPTS="-DproxyHost=proxy.co.jp -DproxyPort=8080"

今は、Git bash を使っているのでLinux風の環境変数設定になっています。setではなくexportです。

$ cordova build android

Downloading http://services.gradle.org/distributions/gradle-2.2.1-all.zip
........................................................................
(省略)
:assembleDebug
:cdvBuildDebug

BUILD SUCCESSFUL

Total time: 9 mins 58.111 secs
Built the following apk(s):
        ...MyApp/platforms/android/build/outputs/apk/android-debug.apk

これでビルドが無事に成功しました。

実行!! on Android実機

先ほど作成されたファイル ...MyApp/platforms/android/build/outputs/apk/android-debug.apk をメールなどに添付してAndroid端末に送ります。

メール添付された .apkをタップするとインストールが開始されます。何も手を加えていなければ Hello Cordova という名前でアプリがインストールされます。普通のアプリのようにタップして起動できます。

こんなものですが、これだけで十分感動です。

遊んだあとは後片付け(アンインストール)しておくことをおすすめします。どんどん開発中アプリが増えていきますので。

参考: 実行!! on エミュレータ

文頭にかいたとおりエミュレータでの実行は一応最後までやったのですが挫折しています。何かの参考までに手順だけ残しておきます。
ついに実行です。cordova emulate androidでAndroidをエミュレータで実行してみます。

$ cordova emulate android

Error: No emulator images (avds) found.
1. Download desired System Image by running: "...AppData\Local\Android\sdk\tools\android.bat" sdk
2. Create an AVD by running: "...AppData\Local\Android\sdk\tools\android.bat" avd
HINT: For a faster emulator, use an Intel System Image and install the HAXM device driver

が、やっぱりとりあえずエラーが出ます。Error: No emulator images (avds) found.らしいのでエラーを見て対応。 Emulator images(AVDs) がないらしいのでAVD Managerを使って作成します。

  1. ...AppData/Local/Android/sdk/AVD Manager.exeをエクスプローラからダブルクリックで起動
  2. Android Virtual Device(AVD) Managerというウィンドウが立ち上がるのですが、ここでもまたエラーがでますので…… メニューToolsOptionsの中にプロキシの設定があるので必要なかたはそこにプロキシ設定をしてください。
  3. メニューのToolsManage SDKをクリックして、Android SDK Managerを起動ます。何かダウンロードされるのでInstall XX Packagesをクリック (わたしの環境ではなぜかCPU imageがダウンロードできなかったのですが、、、Android Virtual Device(AVD) Managerを再起動するとうまくいきました)
  4. Android Virtual Device(AVD) Managerに戻って、 Device DefinitionsタブのCreate AVDをクリックして好みのデバイスを作ってください

AVDが出来たところで、再度実行します。

$ cordova emulate android

エミュレータが無事に起動したけれど遅すぎ。IntelアーキテクチャにしてHAXM使うと早くなるらしいけれどわたしのノートPCではうまく動かず。

その2 おわり

567000
組み込みからWebサービスから機械学習からオブジェクト指向から開発プロセスから認定ScrumMasterからなんならUI/UX/HCD/デザイン思考まで。 投稿した内容でなにかあったらTwitterなどへ気軽にどうぞです。
https://twitter.com/aka567000
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away