Edited at

1. Cordova(PhoneGap)準備、iOSエミュレータ起動まで - 新年だし、ハイブリッドアプリ開発環境を準備する

More than 3 years have passed since last update.

Mac OSX環境で、スマートフォンアプリ開発初心者が、Cordova(PhoneGap)と、AngularJSベースのIonic Frameworkを使い、JavaScriptでiPhone/ Android両対応のネイティブ+HTML5 ハイブリッドモバイルアプリを開発し、iTunes App StoreおよびGoogle Playで公開するまでを何稿かに分けてカバーします。


  1. Cordova(PhoneGap)準備、iOSエミュレータ起動まで

  2. Ionic Framework準備、iOSエミュレータ起動まで

  3. Ionic Creator Beta入門

  4. Ionicでアイコン、スプラッシュスクリーン

  5. IonicでAndroid開発準備

  6. -随時追加予定-

ではまず、Cordova(PhoneGap)から。


Cordova開発環境を整える


事前準備


XCode最新版

予め、Mac用のIDE(統合開発環境)であるXcode最新版をインストールします。iOSシミュレータを使う、配布パッケージを作る時に必要になります。App Storeもしくは、Webからの.dmgダウンロードでインストールできます。

Xcodeをインストールする方法【iOSアプリの統合開発環境】 | TechAcademyマガジン : http://techacademy.jp/magazine/1409


Android Studio (Optional)

Androidでの開発を希望する場合は、Android Studioを導入します。

Download Android Studio and SDK Tools | Android Developers : http://developer.android.com/sdk/index.html

こちらのポストでMacでの詳細設定方法を説明します。

IonicでAndroid開発準備


node.js

nodeをインストールします。homebrewなどのパッケージ管理ソフトを使う、Webから直接ダウンロードする、お好きな方法で良いでしょう。

node.js : http://nodejs.jp/nodejs.org_ja/docs/v0.10/

node.jsはサーバサイドでJavaScriptを使うプラットフォームです。転じて、ブラウザ上だとセキュリティ上の制約上できないことがnode.jsでは実現できることから、Webサーバとしての用途のみならず、ハードウェアI/Oとの連携他、さまざまなことができます。


Cordovaのインストール

npmでcordovaをインストールします。npmはnode.js用のライブラリ管理ソフトです。Cordovaはnode.jsのライブラリとして提供されます。

$ npm install -g cordova

早速、Cordovaでサンプルプロジェクトを生成してみます。

$ cordova create test-project 

$ cd test-project

iOSプラットフォーム追加し、iOSエミュレータ連携ツールを入れます。

$ cordova platforms add ios

$ npm install -g ios-sim

アプリをビルドし、実行します。

$ cordova build ios

$ cordova emulate ios

iOSエミュレータが立ち上がり、サンプルアプリ画面が立ち上がれば成功です。


参考

私は初回導入時、自環境がXcode5だったためエラーとなりました。

App StoreからXCode6へバージョンアップするも、それもエラーで途中停止。

iOS Dev Center - Apple Developer : https://developer.apple.com/devcenter/ios/index.action

から.dmg版をダウンロード、インストールすることで、やっと正常起動しました。