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
でプラグインを追加できる。
!! 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
でプラグインを追加できる。