Apache Cordova 入門

ホーム > Apache Cordova 環境設定 > Apache Cordova クイックスタート

Apache Cordova クイックスタート

ここでは Cordova 版「Hello, world!」を作ります。まだ Cordova の開発環境を作っていない人は次をみてください。

Cordova の環境設定

ここでコマンド例は Ubuntu (16.04 LTS) を使用しています。

作業ディレクトリは ~/test とします。

$ cd ~/test

プロジェクトを作成するには、create オプションとプロジェクト名を指定します。ここではプロジェクト名は helloworld にします。

$ cordova create helloworld
Creating a new cordova project.

すると新しくプロジェクト名のサブディレクトリが作成されますので、そこに移動します。

$ ls
helloworld
$ cd helloworld

ここで Android をターゲットにしましょう。

プラットフォームに android を追加します。

$ cordova platform add android

プロジェクトを作っただけで、コードは何も編集していませんが、いきなりビルドしてみます。

$ cordova build android

ちなみに、Android の開発環境は別途作成しておく必要があります。

Android の開発環境作成

この他、上のページで説明しているように Android Studio と SDK マネージャから SDK をインストールする他、 Cordova から使うには環境変数 ANDROID_HOME の設定と Android SDK コマンドラインツールをインストールします (なければ)。

Ubuntu では環境変数 ANDROID_HOME は ~/.bashrc に追加すれば OK。

export ANDROID_HOME=/home/user1/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools

次のエラーが出たら Android SDK コマンドツールがない可能性があります。

$ cordova build android
ANDROID_HOME=/home/user1/Android/Sdk
JAVA_HOME=/usr/lib/jvm/java-8-oracle
Error: Could not find gradle wrapper within Android SDK. Might need to update your Android SDK.
Looked here: /home/user1/Android/Sdk/tools/templates/gradle/wrapper

Android SDK のコマンドラインツールは SDK ダウンロードページからダウンロードしてきて、SDK のツリーの tools に上書きします。

成功すると、次のように BUILD SUCCESSFUL と表示され apk パッケージが生成されます。

$ cordova build android
ANDROID_HOME=/home/user1/Android/Sdk
JAVA_HOME=/usr/lib/jvm/java-8-oracle
Subproject Path: CordovaLib
Starting a new Gradle Daemon for this build (subsequent builds will be faster).
Incremental java compilation is an incubating feature.
:preBuild UP-TO-DATE
:preDebugBuild UP-TO-DATE
:checkDebugManifest
:CordovaLib:preBuild UP-TO-DATE
...
:packageDebug
:assembleDebug
:cdvBuildDebug

BUILD SUCCESSFUL

Total time: 35.178 secs
Built the following apk(s): 
	/home/user1/test/helloworld/platforms/android/build/outputs/apk/android-debug.apk
$ 

次のコマンドで実行します。デバイスが接続されていない場合、エミュレータが起動し、そこで上で作成したデフォルトのプログラムが起動します。

$ cordova run android

次の画面が表示されれば OK です。

接続できる実際のデバイス、及び、エミュレータ両方なければ当然起動する場所がないので、Android SDK の ADV マネージャで少なくとも一つ作成しておきましょう。

少しコードを書き換えてみる

さて、以上で一応、動くことは動いたわけですが、これでは HTML でアプリケーションを書けていいね、という面が全く見えてこないので、 少しコードを書き換えてみましょう。

上で作成したプロジェクトディレクトリ ~/test/helloworld をみると、www というディレクトリが作成されているはずです。 この www 以下がソースコードです。

index.html は次の通り。

ここで、head 内のスタイルシートの設定行を削除し、さらに body 内を次のように h1 で文字を書くだけにしてみます。

編集したらファイルを保存して、再び次のコマンドでエミュレータ内で実行します。

$ cordova run android

すると確かに HTML で編集した内容が表示されるはずです。

このように Cordova を用いると、 HTML5 を用いたハイブリッドアプリケーションを簡単に開発することが可能になります。

ホーム > Apache Cordova 環境設定 > Apache Cordova クイックスタート