56
53

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2014-12-31

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版をダウンロード、インストールすることで、やっと正常起動しました。

56
53
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
56
53

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?