Posted at

PhoneGapチュートリアル

More than 3 years have passed since last update.


PhoneGapチュートリアル

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


index


事前準備


  • 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