PhoneGap（Apache Cordova）の初期環境設定

cordova phonegap android

公式サイトの Get Started Guide を見て頂ければ画像つきで説明があるので、そんなに悩まないかと思います。
が、需要があるかもしれないのでここにも記載しておきます。
対象は、iOS と Android のみです（他は僕が開発しないので）。

1.3.0 から 1.4.1 まで試しましたが、この手順に特にバージョンによる変更はありません。

わかりにくいなどのご意見があれば補足します。
なお、ほぼ公式サイトと同じですので、画面イメージが必要な場合はそちらを参照してください。

インストール

前提条件として、iPhone/iPad 開発環境または Android 開発環境が構築済みである必要があります。

PhoneGap プロジェクトの作成（iOS・Xcode 版）

  • Xcode を起動し、Create a new Xcode project から PhoneGap-based Application を選択
  • パッケージ名（identifier）と保存先のディレクトリを指定して、作成する。必要であれば、Git リポジトリ作成のチェックを入れる
  • 起動後、そのまま左上の Run ボタンを押すとシミュレータ上にアプリが転送されて起動する。ただし、index.html がないためエラーが表示される
  • プロジェクトのフォルダ直下に www というフォルダがあるので、それを Xcode 上のプロジェクト（Finder 上ではなく）にドラッグ する。ダイアログが表示されたら、Create folder references for any added folders. を選択

PhoneGap プロジェクトの作成（Android・Eclipse 版）

  • Eclipse で Android プロジェクトを作成
  • 以下のフォルダとファイルを用意
    • assets フォルダの下に www フォルダを作成し、phonegap-x.x.x.js を配置
    • プロジェクト直下に libs（名前は何でもいい）フォルダを作成し、phonegap-x.x.x.jar を配置（ビルドパスを通しておいてください）
    • res フォルダの下に、xml フォルダをフォルダごとコピー
  • アクティビティのコードを変更する
    • アクティビティのスーパークラスを Activity から com.phonegap.DroidGap に変更（インポートも忘れずに）
    • アクティビティの onCreate メソッド内の setContentView 呼び出しを以下に変更（引数のファイル名は、後の手順で作成する HTML のファイル名と合っていれば OK）
super.loadUrl("file:///android_asset/www/index.html");
  • AndroidManifest.xml の内容を変更
    • Activity タグの属性に以下を追加
android:configChanges="orientation|keyboardHidden"
    • manifest タグの子要素として以下を追加（user-permission の部分は、実際には必要なパーミッションのみで OK のはず）
<supports-screens
    android:anyDensity="true"
    android:largeScreens="true"
    android:normalScreens="true"
    android:resizeable="true"
    android:smallScreens="true" />

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECEIVE_SMS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.GET_ACCOUNTS" />
  • assets/www フォルダ以下に、index.html（アクティビティ内で指定したファイル名の HTML）を作成
    • 通常の HTML として作成し、以下の js ファイル読み込みのみ追加しておく（x.x.x の部分は最初の手順で配置した名前に合わせます）
<script type="text/javascript" src="phonegap-x.x.x.js"></script>
  • Android アプリケーションとして実行すると、端末上に index.html の内容が表示される

最低限、これだけの設定を行えばすぐに PhoneGap での開発を開始することができます。
この後、編集が必要なのは基本的に www フォルダ内の HTML/JavaScript/CSS のみです（実際には、jQuery 等のライブラリも必要になるでしょうね）。

Web エンジニアなら、簡単なプログラムはすぐに開発できると思います。