クロス開発してみよう！PhoneGap3でサンプル動かしてみた

１．プロジェクトの最初に１回だけやること

プロジェクトを作りたいフォルダに移動してプロジェクトを新規作成する

$cd my_projects/
$phonegap create sample_app

これで my_projects/sample_app の下に４つのフォルダが出来る

• mearges
• platforms
• plugins
• www

このうち www 以外は空っぽ。wwwの下にはサンプルのHTML等ができている。これを編集してアプリを開発していく。

２．動かす

次のコマンドを実行すると、ビルド → iOSシミュレータ起動 → アプリ転送 → アプリ起動まで連続的に実行されます。

$cd sample_app
$phonegap run ios

iOSシミュレータにこんな画面が出れば成功です。

また、初めてビルドしたときに sample_app/platforms/ios の下に Xcode プロジェクトやObjective-Cのソース等が自動生成されます。

また、ビルドするたびに
　　sample_app/www
　　　　↓
　　sample_app/platforms/ios/www
が自動生成（上書き）されます。
なので sample_app/platforms/ios/www 以下は手でいじっちゃダメです。

３．編集して再実行

試しに少し編集して反映されることを確認します。

sample_app/www/js/index.js の40行目付近に alert文を追加します。

1.     // Update DOM on a Received Event. 
2.     receivedEvent: function(id) {
3.         alert('改造しました'); // この行を追加

再ビルドして実行します

$phonegap run ios

こんな画面が出れば成功です