y_ogagaga hiki  Index  Search  Changes  Login

y_ogagaga hiki - PhoneGap Diff

  • Added parts are displayed like this.
  • Deleted parts are displayed like this.

! 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
* 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

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