The sky is the limit

ハイブリッドアプリ開発、PWAなど効率の良いiOSアプリ、Androidアプリ開発の情報を共有したい。アプリ開発は楽しい。【PWA、AngularJS、Monaca、Cordova、OnsenUI】

6章-3 Cordovaでハイブリッドアプリ開発環境を整える【共通】- 【連載】ハイブリッドアプリの最新情報とその動向【Corodva】

【連載】ハイブリッドアプリの最新情報とその動向【Corodva】

f:id:duo-taro100:20160218004611p:plain


6章-3 Cordovaでハイブリッドアプリ開発環境を整える【共通】


前回まででAndroidiOS独自の設定が終わったので、今回は共通の設定を行う。
AndroidiOSの設定をしていないと進められない部分もあるので、まだの方は以下のリンクから。

it-innovation.hatenablog.com

 

it-innovation.hatenablog.com


共通の設定ではコマンドラインを使った設定が多々あるのでコマンドラインを起動しておく。


共通の設定

・node.jsとnpmのインストール
・Cordovaのインストール
・プロジェクトの作成
・プラットフォームの追加
エミュレーターの起動  


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

Cordovaは、NPMパッケージとして配布されるので、Node.jsとnpmのインストールを行う。インストールは以下のリンクから。node.jsをインストールすると、同時にnpmもインストールされる。

Download | Node.js

Mac OS X Installer (.pkg)を選択します(画像参照)

f:id:duo-taro100:20160404221651p:plain

 インストールが正しくされているかを確認するためにのバージョン確認。

$ node -v

$ npm -v

正しくインストールされていれば、バージョン情報が表示される。


Cordovaのインストール

Node.jsのnpmユーティリティを使って、コルドバmoduleをインストール。コマンドラインにて以下のコマンドを実行。
(※MacLinux上では「sudo」を付けないと、エラーが起こる可能性があるので注意)

$ sudo npm install -g cordova

 また、上記のように「-g」オプションを付けてインストールすること。

npm installコマンドの-gオプションについて

同様に、インストールが正しくされているかを確認。

$ cordova -v 

 
プロジェクトの作成

Cordovaのインストールが終了したら、/usr/local/binに移動し、プロジェクトを作成する。

$ cd /usr/local/bin

Cordovaのインストールが正しくされていれば、このディレクトリに「Cordova」が配置されているはず。(コマンドで「ls」叩けば中身を見ることができる)
例えば、「TestCordova」という名前のプロジェクトを作成する場合は以下のようになる。

$ cordova create TestCordova

プロジェクトの作成についての詳細はこちらを参照のこと。テンプレートを使用するなど、プロジェクトの作成の際にはオプションの指定も可能だが、プロジェクトを作成するだけなら、上記のコマンドだけで十分。

ちなみにこの段階でエラーが生じる場合はCordovaが正しくインストールされていない場合があるので注意。

プロジェクトが作成されたら、「Creating a new cordova project.」と表示される。


プラットフォームの追加

対象プラットフォームを加える。今回はiOSAndroidでの開発を念頭に置いているので、2つを追加。まずは先程作成したTestCordovaプロジェクトに移動。

$ cd /usr/local/bin/TestCordova

続けて、以下のコマンドを実行する。

$ cordova platforms add ios

$ cordova platforms add Android

これでプラットフォームの追加は完了。
ブラウザ上でエミュレーターAPIを起動するためにはブラウザもプラットフォームに追加する必要がある。入れておきたい方は以下のコマンドを。

$ cordova platform add browser

Androidを追加するときに、以下のようなエラーが出ることがある。

Error: Please install Android target "android- XX".

これは対応するAPIがはいっていないですよ、と怒られているのでそれをいれてあげればいい。詳細は以下のページで。ちなみにXXには数値が入る。

it-innovation.hatenablog.com

 

 


シュミレータ・エミュレータの起動

iOSシュミレータの準備


Xcodeでの起動も可能だけど、今回はコマンドラインから。
ちなみにCordovaのアプリ開発にはコマンドラインでの操作を良く使うので、基本的な操作は覚えておくといい。


ios-simがインストールされていない場合は以下のコマンドを実行。
(※Xcodeがインストールされていれば不要??)

$ sudo npm install -g ios-sim

インストールが完了したら、プロジェクトのディレクトリに移動。
このページの順序どおりに実施している場合は、/usr/local/binの直下にプロジェクトのディレクトリがあるはず。    

例えば、「TestCordova」というプロジェクトの場合は  

$ cd /usr/local/bin/TestCordova

続いて  

$ cordova build ios

 を実施すれば、ios向けのビルドが行われる。 

(※ビルドを行う前に、プラットフォームの追加が必要なので注意!)

最後に、シュミレータを起動させるには以下のコマンドを実行。

$ cordova emulate ios

このようにシミュレータが立ち上がるはず。 (下の画像のDevice is Readyが点滅してるはず。)ソースをいじる前はこの画面がでてくる。

 

f:id:duo-taro100:20160220151848p:plain


Androidエミュレータの準備
設定については以下のページを参照。

it-innovation.hatenablog.com

また、この辺りで

$ android

のコマンドを叩いたときに、android: command not found」とか出てくる場合は、パスが通っていない可能性があるので下の記事の最後の方を参照して、パスを通す。

it-innovation.hatenablog.com

 

さて、Android AVDの設定まで終わったらエミュレータの起動まで実施する。

サンプルプロジェクトのディレクトリに移動して、ビルドからエミュレータ起動までを実施。

$ cd /usr/local/bin/TestCordova

ビルド

$ cordova build android

エミュレータの起動

$ cordova emulate android

 

これでエミュレータが表示されたら完了。しかし、最初の方にも言った通りこの標準のエミュレータは基本的に使えない。 なので高速化する方法をいろいろと試したので、そのうち紹介する。

 

 

f:id:duo-taro100:20160218004600p:plain

以上で開発環境が整った。おそらくAndroidの設定でハマってしまう方がいるはず。
環境設定は一人でやっていてもなかなか解決できないので、質問等あればコメントに!
次回はCordovaでHelloWorld!

 

it-innovation.hatenablog.com