Cordova環境セットアップ (Mac)

スマホ用のアプリを作る際に,iOS用とAndroid用,二種類を用意するのは結構大変だったりします.
これが,一度のプログラムで出来てしまうのが,ハイブリッドアプリ開発フレームワークのCordova.デバイスに直接インストールするネイティブアプリの上に,HTML5準拠のWebアプリを乗っけてしまうことができる,というモノ.
 
インタフェースは,HTML,CSS,Javaで開発できるため,非常に取っ掛かりやすい.かつ,カメラなどデバイスの機能を使う部分はプラグインで提供されるため,必要に応じてプラグインを追加していけば,デバイスの機能も比較的楽に使える,ハズです.
 
今回は,そのCordova開発環境をMacで整えたので,備忘録です.
 
 
環境は以下のとおり.
MacOS Sierra 10.12.5
Cordova 7.0.1
 

1.JDKのインストール
Java SE Development Kit8 をOracleのページからダウンロード&インストール
http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
 

2.Node.jsのインストール
https://nodejs.org/
こちらより,Node.jsをダウンロード&インストール
 
 
3.AndroidSKDのインストール
Android端末用のエミュレータを使うために必要.
https://developer.android.com/studio/index.html
エミュレータにGenymotionを使いたい場合は,AndroidStudioごとダウンロート&インストール(Genymotionについては,また別途書きます)
必要ない場合は,コマンドラインツールのSDKのみダウンロード
 
 
4.SDKツールへPATHを通す
MacでPATHを通す場合,ホームディレクトリにある.bash_profileに以下を書き込む.
ディレクトリの場所は,3でSDKのみをダウンロードした場合は,解凍したファイルを置いた場所に合わせて変更.

export PATH=$HOME/Library/Android/sdk/tools:$PATH
export PATH=$HOME/Library/Android/sdk/platform-tools:$PATH

 
ホームディレクトリへは,コマンドラインの場合,cd で移動できる.
.bash_profileがあるか確認する場合は,ls -al
コマンドラインで変更する場合,emacsエディタなどを利用

$cd
$ls -al
$sudo emacs .bash_profile

 
もしくはFinderで,SHIFT+Command+. で隠しファイルを表示.テキストエディタなどで編集.
 
編集後は,.bash_profileの再読み込みをしておく

$source .bash_profile

 
5.Cordovaのインストール
コマンドラインで以下のコマンドを実行

$npm install -g cordova

 
6.Cordovaのプロジェクト作成

$cordova create {SampleCordova(フォルダ名)} {com.example.Cordova} {Sample(アプリ名)}

 
プラットフォームの追加

$cordova platform add ios
$cordova platform add android

 
Build&runする

$cordova build ios
$cordova build android
$cordova run ios
$cordova run android