SyntaxHighlighter

2013年8月31日土曜日

クロス開発してみよう!PhoneGap3をいれてみた

これまで、Android版はEclipse+ADT、iOS版はXcodeで、それぞれネイティブアプリを開発してきました。そろそろクロス開発してみようってことで、PhoneGapの最新版3.0をインストールしたので、手順を公開します。

他にもクロス開発のプラットフォームはありますが、PhoneGap以外はゲームに特化したものばかり?でした。私はゲームを作らないので、まっとうに HTML5 + CSS3 + JavaScript っぽい PhoneGap を選びました。

0.環境の選択

まず環境の選択ですが、WindowsではiOS版をデバッグできないので、Macに環境を作ることにします。

1.初期状態


Macには次のものがはいってる状態です。

  • OS:MountainLion 10.8.4
  • Xcode:4.6.3 ( + command line tools )
  • ruby:1.8.7 ← いついれたか覚えてない。。。 gitを入れたときかも?

2.Node.js

PhoneGap3をインストールするのにnpmコマンドを使いますが、それを含んでいるのがNode.jsです。Webサイトへ行き、INSTALLボタンを押すと .pkgファイルがダウンロードされるので、開いてインストールします。
インストール完了後、ターミナルで下記コマンドを実行してバージョンが表示されればOKです。
npm -v

3.PhoneGap 3.0

ターミナルで次のコマンドを実行します。通信状況次第ですが、調子が良ければ数分で完了します。
sudo npm install -g phonegap

インストール完了後、ターミナルで下記コマンドを実行してバージョンが表示されればOKです。
phonegap -v

4.ios-sim

次にXcodeを起動せず、phonegapから直接 iOSシミュレータを起動してデバッグする環境(ios-sim)を整えます。

4.1. Java(JRE)

ターミナルで下記コマンドを実行します。
java -version

Javaが入っていなければ、「今すぐインストールしますか?」みたいなメッセージがでるので、そのままインストールします。
インストール完了後、ターミナルで上記コマンドを実行してバージョンが表示されればOKです。

4.2. Homebrew

OS Xのためのパッケージマネージャーだそうです。 ios-simのインストールに便利なので入れます。
ターミナルで下記コマンドを実行します。途中、管理者パスワードを聞かれます。
ruby <(curl -fsSkL raw.github.com/mxcl/homebrew/go)

インストール完了後、ターミナルで下記コマンドを実行してバージョンが表示されればOKです。

brew -v

4.3. ios-sim

ターミナルで下記コマンドを実行します。
brew install ios-sim

ここまでで必要なもののインストールは完了です。
次はサンプルを動かすまでを説明します。



0 件のコメント:

コメントを投稿