PhoneGapチュートリアル

# PhoneGapチュートリアル

今更需要無いでしょうけど、自分でまとめてたので、載せときます。

## index

* [Node.jsインストール](#node_js_install)
* [cordovaのコマンドラインツールインストール](#cordova_install_for_command_line)
* [プロジェクト作成](#create_project)
* [シミュレータ起動](#start_simulator)
* [実機でプロジェクトを実行](#execute_project_for_device)
* [ブラウザでプロジェクトを実行](#execute_project_for_browser)

## 事前準備
* android開発の場合、 androidSDK,NDKがインストールされていること
* iphone開発の場合、xcodeがインストールされていること

<a name="node_js_install"></a>
## Node.jsインストール

### 手順

[Node.js](http://nodejs.org)
からインストール

### 確認方法

    $ node -v
    v0.10.29
    
    $ npm -v
    1.4.14
    
<a name="cordova_install_for_command_line"></a>
## cordovaのコマンドラインツールインストール

### 手順

    $ sudo npm install crodova
    
### 確認方法

    $ cordova -v 
    3.5.0-0.2.7
    

<a name="create_project"></a>
## プロジェクト作成

### 手順

##### cordovaプロジェクト作成

    $ cordova create hello com.example.test HelloWorld

#### プラットフォーム追加

    $ cordova platform add ios

#### プラットフォーム追加確認

    $ cordova platform ls
    
#### プラットフォーム削除

    $ cordova platform remove ios
    
### 記述例　　　　
    # プロジェクト作成
    $ cordova create hello com.example.test HelloWorld
    Creating a new cordova project with name "HelloWorld" and id "com.example.test" at location "./hello"
    
    
    # 移動
    $ cd hello
    
    
    # ディレクトリ構成確認
    $ tree
    .
    ├── config.xml
    ├── hooks
    │   └── README.md
    ├── platforms
    ├── plugins
    └── www
        ├── css
        │   └── index.css
        ├── img
        │   └── logo.png
        ├── index.html
        └── js
            └── index.js
            
            
    # プラットフォーム追加(ios)
    $ cordova platform add ios
    Creating ios project...
    
    
    # プラットフォーム追加(android)    
    $ cordova platform add android
    Creating android project...
    Creating Cordova project for the Android platform:
    	Path: platforms/android
    	Package: com.example.test
    	Name: HelloWorld
    	Android target: android-19
    Copying template files...
    Running: android update project --subprojects --path "platforms/android" --target android-19 --library "CordovaLib"
    Resolved location of library project to: ./platforms/android/CordovaLib
    Updated and renamed default.properties to project.properties
    Updated local.properties
    No project name specified, using Activity name 'HelloWorld'.
    If you wish to change it, edit the first line of build.xml.
    Added file platforms/android/build.xml
    Added file platforms/android/proguard-project.txt
    Updated project.properties
    Updated local.properties
    No project name specified, using project folder name 'CordovaLib'.
    If you wish to change it, edit the first line of build.xml.
    Added file platforms/android/CordovaLib/build.xml
    Added file platforms/android/CordovaLib/proguard-project.txt
    
    Project successfully created.
    
    
    # プラットフォーム追加確認
    $ cordova platform ls
    Installed platforms: android 3.5.1, ios 3.5.0
    Available platforms: amazon-fireos, blackberry10, firefoxos
    

<a name="start_simulator"></a>
## シミュレータ起動

### 手順

#### Android

    $ cordova emulate android
    
#### ios

    $ cordova emulate ios

**※ios-simがインストールされていない場合上記では動かないので、まず先にios-simを入れること**

##### ios-simインストール

    $ ruby -e "$(curl -fsSL https://raw.github.com/mxcl/homebrew/go)"
    $ brew install ios-sim
  
<a name="execute_project_for_device"></a>
## 実機でプロジェクトを実行

### 手順

#### Android

    $ cordova run android

##### ios

    $ cordova run ios
  
  
<a name="execute_project_for_browser"></a>
## ブラウザでプロジェクトを実行

### 概要

phpのビルトインサーバーが立ち上がるみたいな感じ


### 手順

    $ cordova　serve android