PhoneGap
MacOS X 10.8 + Xcode で PhoneGapの開発環境を作る
PhoneGap 本家サイト
PhoneGap をインストールする
にあるとおり
$ sudo npm install -g phonegap
npmがインストールされていない場合はhomebrewでインストールしておきます。
$ brew install node
これでnodeと一緒にnpmがインストールされます。
bashrc などに
export PATH="/usr/local/share/npm/bin:$PATH"
を追記してPATHを通しておく。
Usage の
$ phonegap create my-app $ cd my-app $ phonegap run android
をみてもよくわからないので、
iOS Platform Guide http://docs.phonegap.com/en/3.0.0/guide_platforms_ios_index.md.html#iOS%20Platform%20Guide を参考にして、プロジェクトの作成とHelloWorldプロジェクトを作成してみる。
Open a Project in the SDK を参考にしてプロジェクトを作成する
プロジェクトを作成するディレクトリを作成する
$ mkdir /path/to/project
Guide では cordova コマンドで作成するようになっているが、
$ cordova -v bash: cordova: command not found

となってしまう。どうやら最新版はphonegapコマンドに変わっている?ようでしたので、置き換えて実行します。
http://docs.phonegap.com/en/edge/guide_cli_index.md.html#The%20Command-line%20Interface
を参考にします。
$ phonegap create hello com.example.hello HelloWorld $ cd hello $ phonegap build ios
とするとiosのプラットフォームが追加されたあとにbuildも実行される。
$ /path/to/hello/platforms/ios
以下にHelloWorld.xcodeprojがあるのでこれをXcodeで起動してrunするだけでアプリが起動します。
エディタ
html + css + javascript でアプリケーションを作成するので、Xcodeにこだわることなく、自分が日々利用しているエディタやツール(Vim,Emacs,Eclipseなど)を利用すればよいのではなかろうか
編集するソースディレクトリ
- www ディレクトリ以下のファイルを編集します
- www ディレクトリ部分がAndroidとiOSで共通で利用されることになる
サンプルアプリ作成
環境が整ったので、 http://www.proto-star.com/2013/07/11/phonegap%E3%81%A7iphone%E3%82%A2%E3%83%97%E3%83%AA%E9%96%8B%E7%99%BA-%E3%81%9D%E3%81%AE2/ を参考にして「カラーコード変換」アプリを作成してみる。
プロジェクト作成
bash-3.2$ phonegap create ColorConverter com.example.ColorConverter ColorConverter [phonegap] created project at /Users/ogasawara/dev/phonegap/ColorConverter bash-3.2$ cd ColorConverter bash-3.2$ phonegap build ios [phonegap] detecting iOS SDK environment... [phonegap] using the local environment [phonegap] adding the iOS platform... [phonegap] compiling iOS... [phonegap] successfully compiled iOS app
バージョン管理
ColorConverter ディレクトリ以下をgitで管理する。
ハマりどころ
- 2.3.0 から Cordova.plist が config.xml に変更されている
- 外部JSのロードに失敗する
ERROR whitelist rejection: url='http://code.jquery.com/jquery-latest.min.js' と表示される。 config.xml に <access origin="http://code.jquery.com" /> の記述を追加するとロード可能になる。 http://docs.phonegap.com/en/3.0.0/guide_appdev_whitelist_index.md.html#Domain%20Whitelist%20Guide
- PhoneGap API が呼ばれない
3.0 からコア機能がスリム化されたらしく、その影響で何かおまじないを書かないと使えない?
cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-vibration.git
ではなく
phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-vibration.git
でプラグインを追加できる。
Keyword(s):
References:[PhoneGap] [y_ogagaga hiki]