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

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

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

０．環境の選択

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

１．初期状態

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

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

２．Node.js

PhoneGap3をインストールするのにnpmコマンドを使いますが、それを含んでいるのがNode.jsです。Webサイトへ行き、INSTALLボタンを押すと .pkgファイルがダウンロードされるので、開いてインストールします。

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

npm -v

３．PhoneGap 3.0

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

sudo npm install -g phonegap

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

phonegap -v

４．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

ここまでで必要なもののインストールは完了です。

次はサンプルを動かすまでを説明します。