Apache Cordova クイックスタート
ここでは Cordova 版「Hello, world!」を作ります。まだ 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 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 を用いたハイブリッドアプリケーションを簡単に開発することが可能になります。