Mac OSX環境で、スマートフォンアプリ開発初心者が、Cordova(PhoneGap)と、AngularJSベースのIonic Frameworkを使い、JavaScriptでiPhone/ Android両対応のネイティブ+HTML5 ハイブリッドモバイルアプリを開発し、iTunes App StoreおよびGoogle Playで公開するまでを何稿かに分けてカバーします。
- Cordova(PhoneGap)準備、iOSエミュレータ起動まで
- Ionic Framework準備、iOSエミュレータ起動まで
- Ionic Creator Beta入門
- Ionicでアイコン、スプラッシュスクリーン
- IonicでAndroid開発準備
- -随時追加予定-
ではまず、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版をダウンロード、インストールすることで、やっと正常起動しました。