PhoneGapチュートリアル

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

index

• Node.jsインストール
• cordovaのコマンドラインツールインストール
• プロジェクト作成
• シミュレータ起動
• 実機でプロジェクトを実行
• ブラウザでプロジェクトを実行

事前準備

• android開発の場合、 androidSDK,NDKがインストールされていること
• iphone開発の場合、xcodeがインストールされていること

Node.jsインストール

手順

Node.js
からインストール

確認方法

$ node -v
v0.10.29

$ npm -v
1.4.14

cordovaのコマンドラインツールインストール

手順

$ sudo npm install crodova

確認方法

$ cordova -v 
3.5.0-0.2.7

プロジェクト作成

手順

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

シミュレータ起動

手順

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

実機でプロジェクトを実行

手順

Android

$ cordova run android

ios

$ cordova run ios

ブラウザでプロジェクトを実行

概要

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

手順

$ cordova　serve android