Cordovaを導入してIBM Bluemixと連携させてみる（第1回）

1. Node.jsのインストール

Node.jsをインストールしてみる。
環境はMacです。

まずはnodejsのサイトへGo!!
https://nodejs.org/en/

以下のような画面になるのでDownload for OSX (x64)をクリック。

node-v4.2.1.pkgがダウンロードされるので、そのままインストールを実行する。

2. Cordovaのインストール

次にnode.jsのnpmからCordovaをインストールする。

mxm-air:009 DevTest mxm-user$ sudo npm install -g cordova
Password: 

cordovaのcreateコマンドでプロジェクトを作成します。

mxm-air:cordova001 mxm-user$ cordova create demo com.ibm.demo MyDemo
Creating a new cordova project.
mxm-air:cordova001 mxm-user$ 

これはdemoディレクトリ以下にアプリの識別子としてcom.ibm.demoを持つ「MyDemo」という名前のアプリのプロジェクトを作成します。

mxm-air:cordova001 mxm-user$ cd demo
mxm-air:demo mxm-user$ ls
config.xml  hooks       platforms   plugins     www

問題なさそうです。

3. Android環境の作成

さてAndroidの環境を作成します。Cordovaはコマンド一つでiOSやAndroidの環境ができてしまうのだ。今回はAndroidの環境で稼働確認してみます。

mxm-air:demo mxm-user$ cordova platform add android
Adding android project...
Creating Cordova project for the Android platform:
    Path: platforms/android
    Package: com.ibm.demo
    Name: MyDemo
    Activity: MainActivity
    Android target: android-22
Copying template files...
Android project created with cordova-android@4.1.1
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 android

これでAndroidのプラットフォームができました!

ここで注意が必要なのですが、事前にAndroid SDKはインストールしておく必要があります。
Android Studioの設定をせずにSDKのみダウンロードした場合はパスを追加する必要があります。

3.1 PATHの通し方（Mac編）

ホームディレクトリ直下にある設定ファイル.bash_profileに通したいPATHを記入する。
設定ファイルはsudoで開く。例えばviエディタであれば以下の通り。

sudo vi .bash_profile

PATHを通すには.bash_profileに下記を記入する。

export PATH=$PATH:通したいPATH

3.2 Android SDKへのPATH設定（Mac編）

Android SDKを利用するには、SDK配下のtoolsおよび/platform-tools にPATHを設定する必要がある。
例えば/Users/hogehoge/android-sdk-macosx/　にSDKがある場合は以下のように .bash_profileに追加する。

export PATH=$PATH:/Users/hogehoge/android-sdk-macosx/tools
export PATH=$PATH:/Users/hogehoge/android-sdk-macosx/platform-tools

4. Pluginの導入

CordovaにはPluginが数多く用意されており、特にネイティブ（AndroidのJavaやiOSのSwift、Object-c）の機能を利用する場合、Pluginによって実装します。

CordovaのPluginは以下のサイトから見つけることができます。

さてPluginの導入を実行します。ここでは、まず最低限必要なdeviceとconsoleを導入します。

mxm-air:demo mxm-user$ cordova plugin add cordova-plugin-device
Fetching plugin "cordova-plugin-device" via npm
Installing "cordova-plugin-device" for android
mxm-air:demo mxm-user$ cordova plugin add cordova-plugin-console
Fetching plugin "cordova-plugin-console" via npm
Installing "cordova-plugin-console" for android
mxm-air:demo mxm-user$ 

5. エミュレーターによる稼働確認

その後、エミュレーターが稼働するか確認する。

mxm-air:demo mxm-user$ cordova emulate android
Running command: "/Users/mxm-user/Documents/009 DevTest/cordova001/demo/platforms/android/cordova/run" --emulator
ERROR: Error: Please install Android target: "android-22".

Hint: Open the SDK manager by running: /Users/mxm-user/Library/Android/sdk/tools/android
You will require:
1. "SDK Platform" for android-22
2. "Android SDK Platform-tools (latest)
3. "Android SDK Build-tools" (latest)
Error: /Users/mxm-user/Documents/009 DevTest/cordova001/demo/platforms/android/cordova/run: Command failed with exit code 2
    at ChildProcess.whenDone (/usr/local/lib/node_modules/cordova/node_modules/cordova-lib/src/cordova/superspawn.js:139:23)
    at emitTwo (events.js:87:13)
    at ChildProcess.emit (events.js:172:7)
    at maybeClose (internal/child_process.js:818:16)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
mxm-air:demo mxm-user$ 

エラー。cordovaでセットされたsdkターゲット番号と実際にAndroid SDKでセットされているSDKのバージョンが違いますよという趣旨のエラーです。

5.1 回避策

Android SDKのバージョン確認

Android Studioを起動。この場合、API Levelが23なので、Android SDKのバージョンがCordovaで指定されたものと異なっています。

AndroidManifest.xmlの変更

次に、以下のファイルを変更します。
/Cordovaのプロジェクトフォルダ/platforms/android/AndroidManifest.xml
Cordovaのプロジェクトフォルダはcordova createで作成済みのフォルダになります。

さっそくAndroidManifest.xmlをテキストエディタかviエディタで開いてみます。すると・・・・いたいた。。。

<uses-sdk android:minSdkVersion="14" android:targetSdkVersion="22" />

以下の通りにSDKのVersionを変更します。

<uses-sdk android:minSdkVersion="14" android:targetSdkVersion="23" />


project.propertiesの変更

さらに、以下のファイルを変更します。
/Cordovaのプロジェクトフォルダ/platforms/android/project.properties
さっそくテキストエディタあるいはviエディタで開いてみます。すると・・・・いたいた。。。

target=android-22

これを同様にSDKのVersionを変更します。

target=android-23

さっそくandroidをエミュレートして実行してみる。

・・・

お、うまくいった。

6. サンプルアプリの実行

こちらのサンプルアプリを実行してみることにする。DevOps Servicesにあるbluemix-mobiledataのプロジェクトからダウンロードする。

www-raw.zipを解凍して、/Cordovaのプロジェクトフォルダ内のwwwフォルダとそっくり入れ替える。

その後、buildし直し、エミュレートを実行する。

cordova build

cordova emulate android

お。

空欄に文字を入れ込んでみます。すると名前が出てきました。

クリックすると詳細の連絡先が出てきました。

今回はここまで。次回は、このデータをBluemixと連携してみます。