そごうソフトウェア研究所

SOA、開発プロセス、ITアーキテクチャなどについて書いています。Twitterやってます@rsogo

Cordovaのサンプルをブラウザと、Androidで実行するまで

このエントリーでは、こちらのCorova公式サイトのGetting Startedで紹介されている手順をやってみます。 cordova.apache.org

Cordovaの環境の準備はこちらのエントリで書いています。 begirama.hatenablog.com

それでは行きましょう。

プロジェクトの作成

cordova createコマンドで、プロジェクトの新規作成が行えます。

$ cordova -v
5.4.1
$ cordova create MyApp
Creating a new cordova project.

以下の操作はすべて新しく作られたMyAppディレクトの中で作業を行います。

browserプラットフォームの追加

cordova platform addコマンドで、プラットフォームを追加します。 ここではGetting Startedの手順通り、browserを追加しています。

$ cordova platform add browser
Adding browser project...
Running command: /Users/rsogo/.cordova/lib/npm_cache/cordova-browser/4.0.0/package/bin/create /Users/rsogo/work/cordova_sample/MyApp/platforms/browser io.cordova.hellocordova HelloCordova
Creating Browser project. Path: platforms/browser
Discovered plugin "cordova-plugin-whitelist" in config.xml. Installing to the project
Fetching plugin "cordova-plugin-whitelist@1" via npm
Installing "cordova-plugin-whitelist" for browser

実行

cordova runコマンドで、先ほど追加したbrowserプラットフォームを実行します。 ここで、追加していないプラットフォームを指定すると、怒られます。

cordova run browser
Running command: /Users/rsogo/work/cordova_sample/MyApp/platforms/browser/cordova/run 
Static file server running on port 8000 (i.e. http://localhost:8000)
CTRL + C to shut down
Static file server running @ http://localhost:8000/index.html
CTRL + C to shut down

runすると、ブラウザが立ち上がって、Cordovaのマスコット（？）が表示されます。

f:id:begirama:20160407113229p:plain

ここまでがGetting Startedの内容ですが、Cordovaのマルチプラットフォーム感を味わうためにプラットフォームを追加してみましょう。

androidプラットフォームの追加

browserの時と同じようにandroidもplatform addコマンドで既存のプロジェクトに追加します。

$ cordova platform add android
Adding android project...
Running command: /Users/rsogo/.cordova/lib/npm_cache/cordova-android/4.1.1/package/bin/create /Users/rsogo/work/cordova_sample/MyApp/platforms/android io.cordova.hellocordova HelloCordova --cli
Creating Cordova project for the Android platform:
    Path: platforms/android
    Package: io.cordova.hellocordova
    Name: HelloCordova
    Activity: MainActivity
    Android target: android-22
Copying template files...
Android project created with cordova-android@4.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.

どんなものが生成されたのか見てみましょう。 MyAppの直下にplatformsというディレクトリがありますね。

$ ls
config.xml  hooks       platforms   plugins     www
platforms/ plugins/

更にplatformsの下には先程追加したbrowserとandroidのディレクトリがあります。

$ ls platforms/
android/        browser/        platforms.json

さらにandroidの中に入って行くと、Androidのよく見るプロジェクト構成になっています。

$ ls platforms/android/
AndroidManifest.xml assets          libs            res
CordovaLib      build.gradle        platform_www        settings.gradle
android.json        cordova         project.properties  src

実行

こちらも同じくcordova runコマンドのオプションにプラットフォーム名を指定して、実行できます。

$ cordova run android
Running command: /Users/rsogo/work/cordova_sample/MyApp/platforms/android/cordova/run 
ANDROID_HOME=/Applications/adt-bundle-mac-x86_64-20140702/sdk
JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_45.jdk/Contents/Home
WARNING : No target specified, deploying to device 'CB5A26M91X'.
Running: /Users/rsogo/work/cordova_sample/MyApp/platforms/android/gradlew cdvBuildDebug -b /Users/rsogo/work/cordova_sample/MyApp/platforms/android/build.gradle -PcdvBuildArch=arm -Dorg.gradle.daemon=true
Picked up JAVA_TOOL_OPTIONS: -Dfile.encoding=UTF-8

こんな感じ。

f:id:begirama:20160407113503p:plain

いけましたね。