開発したアプリなど一覧

Cordova をインストールして Android で動作する apk をビルドするまで

記事内にアフィリエイトリンクを含む場合があります

Cordova という HTML5 を使用したモバイル向けマルチプラットフォーム対応のフレームワークがあります。元は Nitobi が開発したものを Adobe が買収し PhoneGap としてリリース、その後オープンソース版として Apache に寄贈された、という経緯があるらしい。Wikipedia を見た。

https://cordova.apache.org/

HTML5 と CSS, JavaScript を利用してアプリを作れるので Web デベロッパーに優しいということになっている。とりあえず Helloworld ということで手持ちの Nexus 5 でアプリが動くようにするまでをやってみた。

Cordova のインストール

cordova をインストールするには Node.js が必要になるのでインストールしていなかったら入れよう。

nodejs のインストール

以下のページより使っている OS にあったインストーラをダウンロードしてきて入れよう。

https://nodejs.org/en/

npm コマンドが使えるようになったらOK

C:>npm -v 3.3.12

cordova のインストール

npm コマンドでインストールする。

C:>npm install -g cordova

OS X や Linux では以下のようにする

$ sudo npm install -g cordova

インストールできたら cordova コマンドが使えるようになる。

C:>cordova -v 5.4.1

Cordova アプリを作成する

アプリを作成するには cordova create コマンドを利用します。

C:\project>cordova create hello com.example.hello HelloWorld

一つ目の引数 hello はディレクトリ名を指定する。このコマンド実行時に生成されるので既に存在するディレクトリ名はダメ。必要なサブディレクトリも作ってくれる。

二つ目の引数 com.example.hello は リバースドメインスタイルな identifier これは config.xml で変更も可能だ。

三つ目の引数 HelloWorld はアプリ名となる。これも config.xml で変更可能。

アプリ作成時にテンプレートを指定する場合は --template templatePath で指定可能。

-d をつけたらアプリ作成時の進捗が見える。

プラットフォームを追加する

アプリを作っただけではビルドはできない。プラットフォームを追加しよう。

プラットフォームを追加するには cordova platform コマンドに続いて追加したいプラットフォームを入力し、コマンドを実行する。

C:\project\hello> cordova platform add android

指定できるプラットフォームは cordova platforms ls コマンドで確認できる。

C:\project\hello>cordova platforms ls Installed platforms: android 4.1.1 Available platforms: amazon-fireos, blackberry10, browser, firefoxos, webos, windows, windows8, wp8

このマシンは Windows なので ios はリストに無い、という事なのだろう。

アプリを編集する

そのままビルドしても良いが、折角なのでハローワールドぐらい記述してからビルドしたい。

cordova で作成したアプリのディレクトリを開くと、以下のような構成になっているだろう。

cordova-hello-directory

www 以下にあるファイル群がアプリで表示される部分だ。www/index.html をエディタで開いてみるとわかるが、ファイル名の通り HTML で記述されている。

cordova-hello-html

body タグの何処かに <p style="text-align:center;">hello cordova</p> とでも書いておこう。

Cordova アプリをビルドする

アプリをビルドするにも cordova コマンドを使用する。

C:\project\hello>cordova build # もしくは以下のようにプラットフォームを指定できる。 C:\project\hello>cordova build android

... ...(途中省略) ...

BUILD SUCCESSFUL

Total time: 8.863 secs Built the following apk(s): C:\project\hello\platforms\android\build\outputs\apk\android-debug.apk

ビルドに成功したら Android であれば apk の場所を表示してくれる。これを Android へインストールしよう。

adb コマンドを利用するなら以下のようにする。

C:\project\hello>adb install platforms\android\build\outputs\apk\android-debug.apk

もしくは、cordova コマンドを使用して実機やエミュレータで実行まで指定できる。

C:\project\hello>cordova run android

これで Android へ apk をインストール、起動できる。

hello-cordova

Sponsored Link

コメント

タイトルとURLをコピーしました