LoginSignup
15

More than 5 years have passed since last update.

El Capitan環境下でCordovaをインストール

Last updated at Posted at 2015-11-10

インストール環境

・MAC OSX El Capitan 10.11.1
・Cordova ver 5.4.0

インストール手順

1. xcodeをインストール

https://developer.apple.com/jp/technologies/tools/

上記のURLよりXcodeをインストールしてください。

2. Node.jsをインストール

上記URLより、node.jsをインストールしてください。
node.jsをインストールすると、パッケージ管理ツールのnpmもインストールされます。

インストールの確認

$ node -v
v5.0.0
$ npm -v
3.3.6

3. Cordovaインストール

管理者権限付きsudoでcordovaをインストールします。

$ sudo npm install cordova -g

インストールの確認

$ cordova -v 
5.4.0

4. Android SDKをダウンロード

  • GUI用にJDKをインストール

上記URLより、Java SE Development Kitをインストールしてください。

  • Android SDKをダウンロード

上記URLより、SDK Toolsをインストールしてください。

解凍後、フォルダ名をsdkに変更して~/Library/Android/に置く
(SDKの置き場所は、他の場所でも構わない)

  • SDKのパスを通す
~/.bash_profile
export PATH=$PATH:/Users/(User_name)/Library/Android/sdk/platform-tools
export PATH=$PATH:/Users/(User_name)/Library/Android/sdk/tools

上記のような感じでパスを通しておきます。

  • Androidライブラリの追加
$ android sdk

SDK Managerを起動し、Toolsの全てと、必要なAndroidのバージョンを選びます。

5. iOS-simをインストール

ios-simは、Homebrewからインストールします。Homebrewは、Mac OS X用のパッケージ管理ツールです。Homebrewを通じて様々なツールやライブラリをインストールできます。

Homebrewをインストールしていない場合には、ターミナルから以下のコマンドを実行してHomebrewをインストールしてください。

$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

次に、Homebrewからios-simをインストールしてください。

$ brew install ios-sim

プロジェクト新規作成

$ cordova create hello com.example.hello HelloWorld

「hello」ディレクトリに、「HelloWorld」プロジェクトを作成しました。
com.example.helloは識別子として、ドメインを後ろから記述しています。

プロジェクトの作成後、iOSとAndroidの環境ファイルを設置します。

helloフォルダに移動

$ cd hello
  • 環境ファイルを設置
$ cordova platform add ios
$ cordova platform add android
  • プロジェクトをbuild

Androidの場合

$ cordova build android

iOSの場合

$ cordova build ios
  • エミュレータを起動

Androidの場合

$ cordova emulate android

iOSの場合

$ cordova emulate ios

プラグインをインストール

cordova plugin addコマンドは、プラグインのコードのリポジトリを指定する必要があります。CLI を使用アプリに機能を追加する方法の例を示します。

基本的なデバイス情報 (デバイス API):

$ cordova plugin add cordova-plugin-device

ネットワーク接続とバッテリーのイベント:

$ cordova plugin add cordova-plugin-network-information
$ cordova plugin add cordova-plugin-battery-status

デバッグ コンソール:

$ cordova plugin add cordova-plugin-console

カメラ、メディアの再生とキャプチャ:

$ cordova plugin add cordova-plugin-camera
$ cordova plugin add cordova-plugin-media-capture
$ cordova plugin add cordova-plugin-media

など

  • プラグインの確認方法
$ cordova plugin ls
  • プラグインの削除方法
$ cordova plugin rm cordova-plugin-console

addをrmに置き換えるだけで削除できます。

実際に起きたエラー

- No emulator images (avds) found.

ERROR : No emulator images (avds) found.
1. Download desired System Image by running: /Users/(User_name)/Library/Android/sdk/tools/android sdk
2. Create an AVD by running: /Users/(User_name)/Library/Android/sdk/tools/android avd
HINT: For a faster emulator, use an Intel System Image and install the HAXM device driver

Error: /Users/(User_name)/project/hello/platforms/android/cordova/run: Command failed with exit code 1

AVD Managerでエミュレータの定義がされてないのが原因。

  • 回避策

AVD Managerを起動し設定を行う。

$ android avd

Createボタンをクリック。

以下のように記入しOKをクリック。

以上で再ビルドすればエミュレータが起動するはずです。

- ERROR: Error: Please install Android target: "android-xx"

Running command: /Users/(User_name)/project/hello/platforms/android/cordova/build 
[Error: Please install Android target: "android-22".

Hint: Open the SDK manager by running: /Users/(User_name)/Library/Android/sdk/tools/android
You will require:
1. "SDK Platform" for android-22
2. "Android SDK Platform-tools (latest)
3. "Android SDK Build-tools" (latest)]
ERROR building one of the platforms: Error: /Users/(User_name)/project/hello/platforms/android/cordova/build: Command failed with exit code 2
You may not have the required environment or OS to build this project
Error: /Users/(User_name)/project/hello/platforms/android/cordova/build: Command failed with exit code 2


Cordovaでセットされたsdkターゲット番号と実際にAndroid SDKでセットされているSDKのバージョンが違うのが原因。

  • 回避策

Cordovaの設定ファイルをAndroid SDKのバージョンに合わせます。

1.Android sdkのバージョンを確認

SDK Managerを起動してインストールされているSDKのバージョンがのAPI Levelを確認します。

スクリーンショット 2015-11-08 19.15.03.png

今回インストールされているSDKはAndroid 6.0のみなのでAPI Levelは23です。

2.AndroidManifest.xmlの変更

以下のファイルを変更します。

/(project)/platforms/android/AndroidManifest.xml

Cordovaのプロジェクトフォルダはcordova createで作成済みのフォルダになります。

現状

<uses-sdk android:minSdkVersion="14" android:targetSdkVersion="22" />

targetSdkVersionを23に変更

<uses-sdk android:minSdkVersion="14" android:targetSdkVersion="23" />

3.project.propertiesの変更

以下のファイルを変更します。

/(project)/platforms/android/project.properties

現状

target=android-22

target=androidを23に変更

target=android-23

これで再ビルドすればCordovaのターゲットSDKのバージョンとセットされているAndroid SDKのバージョンが同じになるのでビルドに成功するはずです。

備考

npm install -gオプションの意味

npm installで-gオプションを指定した場合はグローバルインストールと呼ばれ、Mac OS X環境では/usr/local/lib/node_modulesにライブラリがインストールされます。同時に同ディレクトリにパスが通るようになり、どこからでもコマンドが呼び出せるようになります。

$ sudo npm install express -g

-gオプションを指定してインストールすると、expressコマンドを直接実行できるようになります。

  • -gオプションを指定しない場合

-gオプションを指定しない場合はローカルインストールと呼ばれ、カレントディレクトリ配下にnode_modulesというディレクトリが作成され、その配下にライブラリがインストールされるようになります。

$ sudo npm install express

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
15