Ubuntu14.04にCordovaの開発環境を構築してFirefoxOSとAndroidアプリを作ってみる

Hello World + adMob 編

1. サンプルアプリ(Hello World)の作成

適当なフォルダ(例：/home/user/CordovaProject)で、以下を実行。

$ cordova create HelloWorld com.example.hello "Hello World"

create 時に指定するパラメータの意味。
第１パラメータ(HelloWorld)：フォルダ名
第２パラメータ(com.example.hello)：ドメインの逆順＋アプリ名
第３パラメータ("Hello World")：表示されるアプリの名前

上記コマンドを実行すると「HelloWorld」というフォルダが作成され、その中にアプリのひな形が作られる。

アプリのフォルダに移動。

$ cd HelloWorld

ターゲットを追加。

$ cordova platform add firefoxos
$ cordova platform add android

ターゲットの確認。

$ cordova platform ls
Installed platforms: android 3.5.0, firefoxos 3.5.0
Available platforms: amazon-fireos, blackberry10, ubuntu

2. 実行してみる

Androidの実機をUSBで接続して、以下を実行。
※事前に /etc/udev/rules.d/51-android.rules を作成しデバッグできる状態にしておくこと。
例（LGの場合)：「SUBSYSTEM=="usb", ATTR{idVendor}=="1004", MODE="0666", GROUP="plugdev"」

$ cordova run android

エミュレータで実行する場合は、以下を実行。
※事前に「android avd」で仮想マシンを作成しておくこと

$ cordova emulate android

動いた！

Firefox OS の場合は実機がないのでFirefox OS Simulatorで動かす。

↑よりSimulatorをインストール。

Firefoxでアプリマネージャ（about:app-manager）を起動。

パッケージアプリを追加し、「HelloWorld/platforms/firefoxos/www」を選択

なんか、manifest.webappにiconsがないとエラーになる。
manifest.webappsに「"icons": {"128": "/img/logo.png"}」を追加。

動いた！

Firefox OS SimulatorはAndroidのように重くなくて良い。実に軽くて早い。
これからは、Firefox OS 向けにアプリを書いてテストしたあと
Androidに持っていたほうが開発がやりやすいかな？

3. アプリに広告を出したいのでadMobを追加

adMobプラグインを追加

$ cordova plugin add https://github.com/MobileChromeApps/google-play-services.git
$ cordova plugin add https://github.com/floatinghotpot/cordova-plugin-admob.git

www/js/index.js をエディタで開き、以下を追加。

※コメントで「+++ add adMob」と書いてあるところを追加した。
※Androidのときだけ表示するようにしてある。（FirefoxOSで動かすとエラーが出たので．．．）

adMobが表示された！

続きはまた。