y_ogagaga hiki  Index  Search  Changes  Login

PhoneGap

MacOS X 10.8 + Xcode で PhoneGapの開発環境を作る

PhoneGap 本家サイト

http://phonegap.com/

PhoneGap をインストールする

http://phonegap.com/install/

にあるとおり

$ 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
 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

でプラグインを追加できる。


    
Last modified:2013/10/07 19:01:51
Keyword(s):
References:[PhoneGap] [y_ogagaga hiki]