Apache Cordovaを使ってアプリを開発する#002【初心者向け】

こんにちは!ぐちです。

前回(Apache Cordovaを使ってアプリを開発する#001【初心者向け】)の続きです。

前提条件

iOSとAndroidの開発環境の構築は終了しているものとします。環境変数等の設定もです。

Node.js

下記のページからNode.jsをインストールしてください。
* https://nodejs.org/

Cordova

コマンドラインツールから下記を実行してください。

$ npm install -g cordova

※macのターミナルで実行する場合は下記のようにsudoが必要かもしれません。

$ sudo npm install -g cordova

Apache Ant

コマンドラインツールから下記を実行してください。

$ wget http://ftp.yz.yamagata-u.ac.jp/pub/network/apache/ant/binaries/apache-ant-1.9.4-bin.tar.gz
$ tar zxvf apache-ant-1.9.4-bin.tar.gz
$ sudo mv apache-ant-1.9.4 /usr/bin/

環境変数

環境変数のPATHにAndroidSDK配下にあるディレクトリを登録します。

macでは.bash_profileに下記を記述します。

$ export ANDROID_HOME=/Applications/android/sdk
$ export ANT_HOME=/usr/bin/apache-ant-1.9.4
$ export JAVA_HOME=/usr/libexec/java_home
$ export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools:$ANT_HOME/bin:$JAVA_HOME/bin

保存したら下記のコマンドで設定を反映します。

$ source ~/.bash_profile

HomeBrew

※macの方はパッケージ管理ツールをインストールします。

コマンドラインツールから下記を実行してください。

$ ruby -e "$(curl -fsSL https://raw.github.com/mxcl/homebrew/go)"

iOSシュミレータのコマンドラインツール

コマンドラインツールから下記を実行してください。

$ brew install ios-sim

プロジェクト作成

ここまでくれば環境構築はできているはずです。
※不備等あればコメントでお知らせ頂けると幸いです。

次にプロジェクトを作成しましょう。

新規作成

コマンドラインツールから下記を実行してください。

$ cordova create hello com.example.hello HelloWorld -d

cordova createコマンドはプロジェクトを作成するコマンドです。その次のhelloはプロジェクトが格納されるフォルダ名です。続いてプロジェクトに設定されるパッケージ名がありプロジェクト名を指定しています。-dオプションはcordovaコマンドの途中経過が表示されるようにするオプションです。

プラットフォームの追加

コマンドラインツールから下記を実行してください。

$ cd hello

$ cordova platform add ios
$ cordova platform add android

他にもこちらのページに追加できるプラットフォームが記載されています。

実行

あとはプラットフォームに応じたコマンドを実行し実機もしくはエミュレータで起動させるだけです。

$ cordova emulate android

$ cordova emulate ios

もしくは

$ cordova run android

といった感じですね。

※抜け漏れ不備等ありましたらすいません。コメントにて教えて頂けると幸いです。