読者です 読者をやめる 読者になる 読者になる

うさがにっき

読書感想文とプログラムのこと書いてきます

インストール、プロジェクト作成方法

概要

Cordova(コルドバと呼ぶ)のインストール方法について
※PhoneGapはAdobeの持ち物、それのオープンソース版がCordovaと呼ばれている

まとめ

node.jsのnpmを使う

node.jsのインストール
node.js


インストール後

$ npm -v
1.4.9


cordovaをnpmを通じてインストール

$ sudo npm install cordova -g
npm http GET https://registry.npmjs.org/cordova
npm http 200 https://registry.npmjs.org/cordova
…
/usr/local/bin/cordova -> /usr/local/lib/node_modules/cordova/bin/cordova
cordova@3.5.0-0.2.4 /usr/local/lib/node_modules/cordova
├── q@0.9.7
├── underscore@1.4.4
├── optimist@0.6.0 (wordwrap@0.0.2, minimist@0.0.10)
└── cordova-lib@0.21.3 (osenv@0.0.3, bplist-parser@0.0.5, mime@1.2.11, semver@2.0.11, dep-graph@1.1.0, shjs@0.1.4, plist-with-patches@0.5.1, rc@0.3.0, npmconf@0.1.16, glob@3.2.9, xcode@0.6.6, tar@0.1.19, elementtree@0.1.5, request@2.22.0, npm@1.3.4)


インストール確認

$ cordova -v
3.5.0-0.2.4


Androidの開発環境を作る(もうあるので確認 無い場合は
PATHの設定 - Android入門

PhoneGapは手元に開発環境が無くてもCloud上でビルドできたけど、Cordovaは開発環境が必要な様子

$ adb version
Android Debug Bridge version 1.0.31

$ android -h

       Usage:
       android [global options] action [action options]
       Global options:
  -h --help       : Help on a specific command.
  …
- update sdk          : Updates the SDK by suggesting new platforms to install
                        if available.


cordovaプロジェクト作成

$ cordova create hello com.example.hello HelloWorld -d
Creating a new cordova project with name "HelloWorld" and id "com.example.hello" at location "/Users/JP16067/Documents/cordova/hello"
Using stock cordova hello-world application.
Requesting {"uri":"https://git-wip-us.apache.org/repos/asf?p=cordova-app-hello-world.git;a=snapshot;h=3.5.0;sf=tgz","strictSSL":true}...
Downloading cordova library for www...
Downloaded, unzipped and extracted 9832604 byte response.
Download complete
Copying stock Cordova www assets into "/Users/JP16067/Documents/cordova/hello/www"

android用プロジェクトファイル作成

$ cd hello
$ cordova platform add android
Downloading cordova library for android...
Download complete
Creating android project...

/Users/JP16067/.cordova/lib/android/cordova/3.5.0/bin/node_modules/q/q.js:126
                    throw e;
                          ^
Error: ERROR : executing command 'ant', make sure you have ant installed and added to your path.


何やらantが無いとおこられている様子
antをいれる

$ brew install ant
==> Downloading https://downloads.sf.net/project/machomebrew/Bottles/ant-1.9.4.m
######################################################################## 100.0%
==> Pouring ant-1.9.4.mavericks.bottle.tar.gz
  /usr/local/Cellar/ant/1.9.4: 1597 files, 39M


もう一度作成

 $ cordova platform add android
Creating android project...
Creating Cordova project for the Android platform:
	Path: platforms/android
	Package: com.example.hello
	Name: HelloWorld
	Android target: android-19
…
Added file platforms/android/CordovaLib/proguard-project.txt

Project successfully created.


成功
iOS用プロジェクトも同じように作る

$ cordova platform add ios
Downloading cordova library for ios...
Download complete
Creating ios project...


対応したplatform確認

$ cordova platform ls
Installed platforms: android 3.5.0, ios 3.5.0
Available platforms: amazon-fireos, blackberry10, firefoxos


作ったアプリをAndroid実記で確認

$ cordova run android
Running command: /Users/JP16067/Documents/cordova/hello/platforms/android/cordova/run 
Buildfile: /Users/JP16067/Documents/cordova/hello/platforms/android/build.xml

-set-mode-check:

-set-debug-files:

-check-env:
 [checkenv] Android SDK Tools Revision 22.6.2
 …
-post-build:
     [move] Moving 1 file to /Users/JP16067/Documents/cordova/hello/platforms/android/ant-build
     [move] Moving 1 file to /Users/JP16067/Documents/cordova/hello/platforms/android/CordovaLib/ant-build

debug:

BUILD SUCCESSFUL
Total time: 2 seconds
WARNING : No target specified, deploying to device '5048530f'.
Using apk: /Users/JP16067/Documents/cordova/hello/platforms/android/ant-build/HelloWorld-debug-unaligned.apk
Installing app on device...
Launching application...
LAUNCH SUCCESS


動いた
実記がつながっていなければAndroidエミュレータが起動する様子
iOSxcodeからプロジェクトを開いてインストールする必要がある

$ open platforms/ios/HelloWorld.xcodeproj


ブラウザで各OSで表示するアプリの確認も出来る様子

$ cordova serve android
Static file server running on port 8000 (i.e. http://localhost:8000)
CTRL + C to shut down

f:id:tiro105:20140610181656p:plain

不要になったらCTRL + C
でもなんか動作が不安定なような気がした(Androidが微妙、iOSは動いた