BABUKUMA (^(工)^): ① PhoneGap + Gruntjsの開発環境構築

久しぶりにアプリ開発でPhoneGapを選びました。
PhoneGapかつGruntjsで初めて環境を構築してみた事と、
PhoneGapの公式ドキュメントが最新版を微妙に違ったのでブログに内容をまとめってみます。
内容はMacOSX上でiOSアプリを作成することを想定しています。

今回選んだ環境は

PhoneGap : http://phonegap.com
Gruntjs : http://gruntjs.com
CoffeeScript
Jade
Less

PhoneGapを選んだ理由

要件がiOSだけではなく出来るだけ多くのタブレットに適用する必要がある事。
OS関係なく同じUIを作成したいので、OS固有のUIよりはHTML5で同じインタフェースを作成。
業務アプリで高いパフォーマンスを求めていない。

そしてGruntjsを選んだ理由

CoffeeScript, Jade, Lessを使いたいし、ビルド環境が欲しい。
Preprocessorを使ってLogやDebugコードを環境に制御したい。

1. ios-simインストール

必須ではないがXCodeを開かずにコマンドラインでiOSシミュレータを操作する為のユーティリティをインストールします。コマンドラインが嫌いならスキップしていいと思います。

Homebrewでインストール

$brew install ios-sim

Homebrewを使わない人は「https://github.com/phonegap/ios-sim」を参照してインストールしてください。

2. PhoneGapのインストール

PhoneGapサイトでダウンロードするだけです。

3. PhoneGapプロジェクト生成＆ビルド方法

1) プロジェクト生成 :

プロジェクト作成スクリプトから作成します。

スクリプト : $ {phonegap-home}/lib/ios/bin/create {Project Path} {Package name} {Project name}
Project Path : ~babukuma/tmp/ios_demo
Package name : com.babukuma.ios_demo
Project name : iOSDemo

$ {phonegap-home}/lib/ios/bin/create ~babukuma/tmp/ios_demo com.babukuma.ios_demo iOSDemo

2) プロジェクトビルド :

$ ~babukuma/tmp/ios_demo/corodova/build

3) iOSシミュレータで実行 :

# iPhoneで実行
$ ~babukuma/tmp/ios_demo/corodova/run
# iPadで実行
$ ~babukuma/tmp/ios_demo/corodova/run --target="iPad"

4) プロジェクトクリンアップ :

$ ~babukuma/tmp/ios_demo/corodova/clean

5) Logging :

$ ~babukuma/tmp/ios_demo/corodova/log

4. Gruntjs開発環境構築

1) node.jsインストール

node.jsが入ってない人はnode.jsをインストールします。

$ brew install node
$ brew -v
v0.8以上

2) CoffeeScriptインストール

CoffeeScriptは色んなところで使いたいのでglobalにインストールしました。

$ npm install -g coffee-script
CoffeeScript version 1.x.x

3) grunt-cliインストール

gruntが0.4からgrunt-cliとgrunt-coreに分かれました。
gruntのコマンドラインを使う為にgrunt-cliをグローバルにインストールします。

$ npm install -g grunt-cli
$ grunt --version
grunt-cli v0.1.6以上

4) package.json作成

Gruntjs用の設定ファイルを「~babukuma/tmp/ios_demo/package.json」に作成しました。

{
  "name": "Demo",
  "version": "0.0.1",
  "description": "BabukumaのPhoneGap + Gruntjsデモ",
  "author": "メールアドレス",
  "dependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-coffee": "~0.4.0",
    "grunt-contrib-concat": "~0.1.3",
    "grunt-contrib-less": "~0.5.2",
    "grunt-contrib-jade": "~0.4.0",
    "grunt-contrib-uglify": "~0.1.2"
  }
}

5) ローカルモジュールをインストール

$ cd ~babukuma/tmp/ios_demo
$ npm link coffee-script
$ npm install

一旦これで環境はできました。
次はビルドファイル作成と実際にファイル作成して実行してみる事です。

2013年7月8日月曜日

① PhoneGap + Gruntjsの開発環境構築