Help us understand the problem. What is going on with this article?

MacでCordova開発環境を構築した備忘録

More than 1 year has passed since last update.

Mac OS X で Apache Cordova の開発環境を構築したので、備忘録を残しておきます。私の環境は macOS Sierra 10.12 でした。Android 開発だけであれば他の OS でも構築できると思うのでその場合は適宜読み替えてやってください。

Apache Cordova の開発環境構築

nodebrew のインストール

Apache Cordova は node.js 上で動作するので、node.js のインストールから始めます。

2019/11/04 追記
現在では、nodebrewの代わりにnodenvを使用したインストール方法が主流になっています。
詳しくは、こちらを参照 https://github.com/nodenv/nodenv

まずは、node.js のバージョン管理をしてくれるらしい nodebrew をインストールします。インストール方法はnodebrewのページに説明してあるので、それに従います。

curl -L git.io/nodebrew | perl - setup

このコマンドを実行するとホームディレクトリの配下に.nodebrew/というディレクトリが作成され、その中に nodebrew がインストールされるようです。インストールが完了するとパスの設定をするようにメッセージが表示されます。

公式のページには.bashrcに設定するように書いてありますが、私の環境では既に.profileが存在していたので、こちらに書き込みました。この辺は、読み込まれる優先順位があるようなので自分の環境に合わせてください。
→詳しくはこちらの記事を参考にさせて頂きました。

echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> .profile

このまま公式ページに説明のあるようにsource ~/.profileを実行しても良いのですが、次回ログイン時に正しく.profileが読み込まれるか確認したいので、一旦ログアウトしてから次のコマンドを実行します。

nodebrew help

無事にヘルプメッセージが表示されれば正しくインストールできています。次に node.js のインストールをします。現在インストールできるバージョンの一覧は次のコマンドで確認できます。

nodebrew ls-remote 

今回は特にバージョンにこだわらなかったので、最新の安定版をインストールしました。ついうっかりnodebrew installを使ってしまうと、ソースからビルドするらしいので時間がかかります。nodebrew install-binaryを使いましょう。

nodebrew install-binary stable

私が作業した時点では v7.0.0 がインストールされました。

Cordova のインストール

node.jsをインストールできたら、Cordova をインストールします。インストール方法はCordovaのGetStartedページに書いてある通りに進めます。

npm install -g cordova

Cordova のインストールができたら Cordova プロジェクトを生成しましょう。

cordova create CordovaTest
cd CordovaTest

次に開発したいプラットフォームを追加します。ここでは、ブラウザ、iPhone、Android を追加してみましょう。

cordova platform add browser ios android

Get Started のページでは、最後にcordova run browserを実行するように書いてありますが、環境が整っていないと起動できないと思います。必要な環境が揃っているかどうかは、次のコマンドである程度確認できます。

cordova info

上のコマンドを実行すると追加したプラットフォームごとに、エラーメッセージが幾つか表示されると思います。これらのエラーメッセージがでなくなるように環境を整えるのが次のステップになります。

ブラウザ試験環境の構築

Google Chrome のインストール

まずは Google Chremeのページから Chrome をダウンロードしてきます。ダウンロードできたらファイルを実行して、ウィンドウ上のアイコンを下のフォルダアイコンにドラッグ&ドロップしてインストールします。

chrome_install.png

ブラウザ上での起動

Chrome のインストールはかんたんですね。早速実行してみましょう。

cordova run browser

cordova_chrome1.png

cordova_chrome2.png

ブラウザの大きさによってレイアウトが変化するみたいですね。

iPhone 試験環境の構築

XCode のインストール

私の場合、先に XCode をインストールしてしまったのでエラーになりませんでしたが、ios 用のビルドとエミュレータの実行に必要そうなので、その時の手順を書いておきます。
(Mac OS X 以外の開発環境では永久に ios プラットフォームのエラーは解消できません。諦めましょう。)

XCode 本体のインストールは AppStore から行うことができます。既に導入済みの方も多いでしょう。

appstore_xcode.png

XCode 本体をインストールしたら、コマンドラインツールもインストールしておきましょう。

xcode-select --install

xcode-select.png

私の場合、先にコマンドラインツールを入れてしまったので、少しメッセージが違うかもしれません。

最後にライセンスに合意します。下記を実行して、ライセンスを最後まで読んだら、agreeとタイプして合意します。

sudo xcodebuild -license

iOS エミュレータの起動

iOS に必要な環境を整えたら、エミュレータを起動してみましょう。

cordova run ios

cordova_ios.png

無事、エミュレータが起動したら完了です。

Android 試験環境の構築

JDK のインストール

まずはOracleのJava SEページから JDK をインストールしましょう。今回は Java 8 をインストールしました。JDK のバージョンが古いとcodova infoした時にエラーになってしまうことがあります。

java8-install.png

GUI に従ってインストールしましょう。

Android Studio のインストール

次にAndroid のディベロッパーページから Android Studio をダウンロードしてインストールします。左の Android Studio のアイコンを右のフォルダアイコンにドラッグ&ドロップしてインストールします。

android_studio_install.png

実際には初回起動の際にインストーラーが起動して必要な機能をインストールします。アプリケーションの一覧から Android Studio を起動しすると初期設定画面が表示されます。
as1.png
インストール方法は Custom を選択しました。
as2.png
画面のスタイルを選択します。私は明るい方が見やすいので intelliJ の方を選びました。
as3.png
エミュレータを使用するのが主な目的なので、Android Virtual Device にチェックを入れます。
as4.png
エミュレータに割り当てるメモリを決めます。デフォルトのまま進んでしまいましたが、私のマシンのメモリはそれほど多くないので、512MB にしておけばよかったかなと思っています。あとから変更するにはどうすればよいのだろう?
as5.png
インストールされる容量を確認して Finish します。
as6.png
下の画面でログが最後まで表示されたらインストール完了です。
as7.png

インストールが完了したらパスの設定を行います。tools と platform-tools というディレクトリをパスに追加します。インストール先のパスは[Configure]->[SDK Manager]で確認することができます。

android_studio.png
android_sdk_path.png

パスを確認したら環境変数$PATHに追加します。私の環境では .profile を使っていますが、その辺りは環境に合わせてください。

echo 'export PATH=$HOME/Library/Android/sdk/tools:$PATH' >> .profile
echo 'export PATH=$HOME/Library/Android/sdk/platform-tools:$PATH' >> .profile

この状態でエミュレータを起動しようとするとライセンスに合意していないとエラーが表示されて起動できません。いろいろ試しましたが、次の方法でなんとか起動できるようになりました。

SDK Manager の画面から SDK Tools を選び、インストールしたいものにチェックを入れます。(下の画像ではLicenseというキーワードで試行錯誤してましたが、選ぶツールは何でも良かったのかもしれません。他を選んでもできたという方がいれば教えてください。)

android_license.png

[Apply] or [OK] を押すとライセンス合意の画面へ進むので、[Accept] にチェックを入れて [Next] を押下します。選択したツールがインストールされたらOKです。

android_accept.png

Android エミュレータの起動

Android 環境の準備が整ったらエミュレータを起動しましょう。

cordova run android

cordova_android.png

無事、主要3環境の起動に成功しました。それでは今回はここまで。

u4da3
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