2011年5月26日

【PhoneGap】Xcode4でPhoneGapプロジェクトを作成する方法

こんにちは。
最近iPad2を買い、コードを書くとき以外は一切家でPCを触らなくなった橋本です。
ネットサーフィン、メール、動画、ゲームくらいの用途であればiPad2で全て賄えますね。
iPad2最高！

iPad2賛辞はさておき、今日はそんなiPadのネィティブアプリを簡単に作れるPhoneGapについて書いていきたいと思います。

PhoneGapとは何かと言いますと、HTML & CSS & JavaScriptでiPhone(iPad)/Androidのネイティブアプリが作れるフレームワークです。

詳しくは、以前の弊社鴨田のブログ【デザイナー必見】iPhone/AndroidアプリをHTML+Javascriptで作成(PhoneGapのススメ)や、PhoneGapの公式ページPhoneGap.com、弊社で運営しているPhoneGap Fanを参考にしてください。

PhoneGap Fanや、PhoneGap.comを見てもらうと分かるかと思いますが、Eclipseを使ったAndroid版のプロジェクト作成方法とXcode3を使ったiPhone(iPad)プロジェクトの作成方法はどちらにも載っています。

ただ、どちらにも「Xcode4を使ったiPhone(iPad)プロジェクト作成方法」が含まれていません。

今回は、どちらにも載っていない「Xcode4を使ったiPhone(iPad)プロジェクト作成方法」について書いていきます。

Eclipseを使ってAndroid版を作る場合、もしくはXcode3を使ってプロジェクトを作成する場合は、PhoneGap Fanのインストール方法を見てもらえば分かるとおり、非常に簡単にプロジェクトを作成することが出来るのですが、Xcode4を使う場合、PhoneGapが正式にXcode4に対応していないため、公式ページから配付されているインストーラを使ってプロジェクトを作成することが出来ません。

幸い、PhoneGap公式のGitHubで、Xcode4を使ってプロジェクトを作成するためのインストーラが配付されているので、今回はそちらを使用します。
インストーラの配付元

配付元のReadmeにも書いてあるように、まずインストーラをMakeする必要があるため、Macのターミナルを開いて以下のコマンドを叩きます。


cd ~/Downloads/phonegap-phonegap-iphone-xxxxxx/
make

「~/Downloads/phonegap-phonegap-iphone-xxxxxx/」は、DLしたファイルの保存先です。
上記のコマンドをターミナルで叩くと、同じフォルダ内に「PhoneGapInstaller.pkg」という名前のインストーラが出来ていると思いますので、それを使ってPhoneGapをインストールします。

インストールが完了したら、Xcode4を起動して新規プロジェクトの作成を選択し、テンプレートの選択画面でiOS > Application > PhoneGap-based-Applicationを選択して、適当なプロジェクト名を付けてプロジェクトを作成します。

これで、プロジェクトの作成は完了なのですが、このままで実行するとエラーが出ます。
えぇ、まだ終わりではないのです。

エラーを消すためには、以下の手順を実行してください。

1.wwwフォルダをプロジェクトに追加する。

Xcodeの「File > Add Files to プロジェクト名」でファイルを追加します。プロジェクトの直下にwwwというフォルダがあるので、そのフォルダを選択し、Destinationという項目の「Copy items into destination group's folder(if needed)」のチェックを外し、Foldersという項目の「Create folder references for any added folders」を選択して、Addボタンを押します。