JavaScript
Android
HTML5
iOS
Cordova

CordovaでiOS,Androidハイブリッドアプリ開発環境を整える

More than 3 years have passed since last update.


はじめに

久しぶりにスマートフォン関連の事をやりたいなと思っていたところ、手軽に触れそうなCordovaがあったので興味本位でやってみました。

環境はYosemiteです。


Cordovaって何?

ハイブリッドアプリ開発のプラットフォームです。

HTML5, JavascriptをメインにAndroid,iOSのスマートフォンアプリが作れます。

詳しいことはこちらのスライドが一番把握出来ると思います。


事前準備


Node.JS

https://nodejs.org/

こちらのリンクからダウンロード&インストールしてください。


Xcode

AppStoreで検索してインストールしてください


Java

Javaが無いとAndroid Studio起動時に怒られるので、もしインストールしていなければ Javaをインストール&ダウンロードしてください。

https://support.apple.com/kb/DL1572?locale=ja_JP


Android Studio

http://developer.android.com/sdk/index.html

こちらのリンクからダウンロード&インストールしてください。


Cordovaのインストール

インストールコマンド

$ sudo npm install -g cordova

インストールされたかcordova -vでバージョンを確認してみましょう。

$ cordova -v

$ 4.3.0


Androidのパスを2つ通す

AndroidSDK配下の /platform-toolsと/toolsに対して、パスを通してあげる必要があります。

特にインストール先などを変更していなければパスは

/Users/ユーザ名/Library/Android だと思います。

実行した内容

$ export PATH=$PATH:/Users/ユーザ名/Library/Android/sdk/platform-tools

$ export PATH=$PATH:/Users/ユーザー名/Library/Android/sdk/tools

パスを通したら環境変数を読み込みます

$ source ~/.bash_profile


プロジェクトを作る

Cordovaプロジェクトを作りたい任意の場所に移動してください。

今回の例では /Users/ユーザー名/developというフォルダ内で実行します。

$ cordova create sample-project

無事作成されると以下の表示がされます。

$ Download complete

プロジェクトに移動

$  cd sample-project

今回の例の場合、このタイミングで

/Users/ユーザー名/develop/sample-project

に居る事になります。


iOSプラットフォームと iOS Simulatorの追加

iOSプラットフォーム追加

$  cordova platform add ios

iOS Simulatorの追加

$  sudo npm install -g ios-sim


まずはiOSで確認

ビルド

$  cordova build ios

ビルド結果で以下が出ていれば正常にビルドされています。

$  ** BUILD SUCCEEDED **

シミュレータの起動

$ cordova emulate ios

実行結果が

$ ** RUN SUCCEEDED **

となってシミュレータが起動していれば OKです!

スクリーンショット 2015-03-28 18.41.53.png


Androidプラットフォームの追加

Androidプラットフォーム追加

$ cordova platform add android


Androidで確認

ビルド

$ cordova build android

私の場合は残念ながらここで、エラーが出ました。

(エラーが出ない方は飛ばしてください。)

Failed to run "ant -version", make sure you have ant installed and added to your PATH.

Apache Antが無い場合このエラーになるようなので、 brewから antをインストールします。

$ brew install ant

もう一度ビルドすると無事に BUILD SUCCESSFULが!

$ BUILD SUCCESSFUL

シミュレータの起動

$ cordova emulate android

起動するとiOS同様にのような画面が表示されます。

スクリーンショット 2015-03-28 20.07.12.png

Androidの起動時に気になった点

色々とネットに情報があるように Androidのシミュレータ起動がやたら遅いです。

私の場合もこんな感じの状態がしばらく続いたりしてました。

$ Waiting for emulator...

$ Booting up emulator (this may take a while).................

回避策もいくつかあるようなので、後日試してみたいと思います。


おわりに

一通りやってみて気になったのはAndroidのシミュレータ起動が遅い点くらいでしょうか。基本的につまる事なく進めると思います。