Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Cordovaの環境構築

More than 5 years have passed since last update.

下記は「Cordova5.1.1」で行っています。
Cordova5.0.0未満の場合は、コマンドの書式に違いがある場合があります。

前提

1.MacOSXであること ※1
2.AndroidSDKがインストール済みであり、Android仮想デバイス(AVD)の設定ができていること
Mac OS X 上に Android 開発環境を構築する 等を参照

※1 iOS Simulator が起動できるのがMaxOSのみのため
iOS Simulator は App Store から Xcode を インストールすると同時にインストールされます。

各種インストールとPATHの設定

Node.jsのインストール

http://nodejs.org

cordovaコマンドを導入するために Node.js をインストールします。
上記のサイトにアクセスし表示に従ってインストールします。

インストールしたら、インストールが成功しているか確認するためにバージョンを表示するコマンドを実行。

node -v

実行結果例) v0.12.3

Node.js をインストールするとnpmも同時にインストールされるためこちらもインストールが成功しているか確認するためにバージョンを表示するコマンドを実行。

npm -v

実行結果例) 2.9.1

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

sudo npm install -g cordova

※-g オプションはグローバルな領域にインストールするためのオプションです。

インストールが成功しているか確認するためにバージョンを表示するコマンドを実行。

cordova -v

実行結果例) 5.1.1

AndroidSDKのPATHを通す

.bash_profile に下記のPATHを追加する。
※.bash_profile がない場合は、新規作成

export PATH=$PATH:/Applications/(AndroidSDK展開フォルダ)/sdk/tools/
export PATH=$PATH:/Applications/(AndroidSDK展開フォルダ)/sdk/platform-tools/

又は

echo "export PATH=$PATH:/Applications/(AndroidSDK展開フォルダ)/sdk/tools/" >> ~/.bash_profile
echo "export PATH=$PATH:/Applications/(AndroidSDK展開フォルダ)/sdk/platform-tools/" >> ~/.bash_profile

反映させるために下記コマンドを実行

source ~/.bash_profile

反映されたか確認するためにAndroidコマンドとadbコマンドが実行できるか確認します。

android -h

実行すると Help の内容(オプション)が複数行にわたって表示されます。
(実行結果は省略)

adb version

実行結果例) Android Debug Bridge version 1.0.32

プロジェクトの新規作成とプラットフォームの追加

プロジェクトの新規作成

プロジェクトを作成したいディレクトリに移動して下記のコマンドを実行します。

cordova create hello com.example.hello HelloWorld -d

・hello ディレクトリを作成し
・com.example.hello という識別子で(Andoroidで必要)
・HelloWorld というアプリ名

作成するというコマンドになります。
※-d オプションは途中経過を表示するオプションです。

プラットフォームの追加

iOS

cordova platform add ios

Android

cordova platform add android

その他に下記のプラットフォームの追加もできます。

cordova platform add wp8
cordova platform add windows
cordova platform add amazon-fireos
cordova platform add blackberry10
cordova platform add firefoxos

プラットフォームの確認

cordova platform ls

実行結果例)
Installed platforms: android 4.0.2, ios 3.8.0
Available platforms: amazon-fireos, blackberry10, browser, firefoxos

プラットフォームの削除

プラットフォームを外すには下記のコマンドをそれぞれ外したいプラットフォームに置き換えて実行します。
例)Andoroidの場合

cordova platform remove android

又は

cordova platform rm android

シミュレータで確認

iOS

cordova emulate ios -d

実行すると実行結果がつらつらと表示され
「** BUILD SUCCEEDED **」
と表示されてシミュレータが立ち上がり、続いてアプリが立ち上がってきます。

Andoroid

cordova emulate android -d

実行すると実行結果がつらつらときて
Waiting for emulator... としばらく表示されますがあせらずしばらく待ちます。

※ 開発環境のマシンスペックによって立ち上がるまでに時間に差があるでしょう。
※ ストレージを結構食うのであらかじめ数GBの空きをあけておくの望ましいかも...
※ MacBook Air Core i5 メモリ 4GB で下記のような時間がかかります。

ーーーー
(略)

BUILD SUCCESSFUL

Total time: 16.678 secs

(略)
ーーーー
と表示されてシミュレータが立ち上がり、続いてアプリが立ち上がってきます。

補足

ant がないと言われた場合

brew install ant 

以下のようなエラーが出る場合

Starting emulator for AVD 'MYAVD'
emulator: ERROR: x86 emulation currently requires hardware acceleration!
Please ensure Intel HAXM is properly installed and usable.
CPU acceleration status: HAX is not installed on this machine (/dev/HAX is missing).

以下のサイトからAndroidのエミュレータを高速にするために、Intel Hardware Accelerated Execution Manager(HAXM)というソフト [ haxm-macosx_r05.zip ] をダウンロードしてインストールする。

Intel® Hardware Accelerated Execution Manager

ブラウザ

cordova serve android

実行結果例)
Static file server running on port 8000 (i.e. http://localhost:8000)
CTRL + C to shut down

http://localhost:8000 にアクセスすると確認ができます。

実機で確認

iOS

上記「プロジェクトの新規作成」の例で作成した場合
[ cordova emulate ios -d ] を実行した後に
hello > platforms > ios > HelloWorld.xcodeproj に Xcode のプロジェクトファイルがあるので、それを Xcode で起動してネイティブアプリの開発の手法に則って実機でテストすることができます。

※実機で確認すには「Apple Developer Program」 (有料)が必要になります

iPhone(iOS)アプリを実機でテストする方法【初心者向け】等を参照

Andoroid

MacにUSBでAndroidの実機を接続して下記のコマンドを実行します。

cordova run android

おまけ

cordovaコマンドラインツールのアップデート

sudo npm update -g cordova

[参考サイト]
Apache Cordova Documentation (5.1.1)
HTML5ハイブリッドアプリ(Cordova)の環境構築
Mac OS X 上に Android 開発環境を構築する

7nanac
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away