MacでCordovaのインストール・実行・ビルドまで (iOS, Android, Web)

Apache Cordova

Apache Cordova は HTML5 + CSS3 + JavaScript を用いてiOS, Androidのクロスプラットフォーム開発が行える便利なフレームワークです。表示には各プラットフォームの WebView が利用されますが、ネイティブアプリと同様にカメラやセンサなどプラットフォーム固有の機能を利用することもできます。
Cordova を手っ取り早く始めるには、Monaca を利用する方法もありますが、 Cordova はオープンソースで開発されており、全て無料で始めることができますので、ここでは Cordova のインストールから実行・ビルドまでの方法を紹介します。

Cordova のインストール

ここでは、次の手順でCordovaをインストールします。ほかの手順でもインストールできますが、私の場合、結局 homebrew が必要になり Node.js から再インストールしたこともあるので、次の手順で行っています。

  • Homebrew インストール
  • nodebrew インストール
  • Node.js インストール
  • Cordova インストール

Homebrew インストール

Homebrewは次のコマンドでインストールします。ターミナルを起動し、次のコマンドを実行してください。基本的にメッセージに沿って実行すれば問題ありません。

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

インストール完了後、次のコマンドで正常に動作可能であることを確認します。

$ brew doctor
Your system is ready to brew.

nodebrew インストール

Nodeをインストールするために、nodebrewを用います。インストールコマンドは次の通りです。

$ brew install nodebrew

Node.js インストール

ここでは推奨版である LTS の Node.js をインストールします。

$ nodebrew install-binary stable

またインストール後は設定が必要です。

$ nodebrew ls
$ nodebrew use v12.16.0

インストールした nodebrew のバージョンを確認し、利用する nodebrew のバージョンを指定します。

Cordova インストール

ようやく Cordova をインストールすることができます。 npm コマンドでインストールします。

$ npm install -g cordova

これで完了です。私が実際にインストールしたバージョンは次の通りです。

$ brew -v
Homebrew 2.2.5
$ nodebrew -v
nodebrew 1.0.1
$ node -v
node v12.16.0
$ cordova -v
9.0.0 (cordova-lib@9.0.1)

Cordova プロジェクト作成

Cordova でプロジェクトを作成するには次のコマンドを用います。また以後はプロジェクトフォルダ内で作業します。

$ cordova create CordovaProject
$ cd CordovaProject

私は普段から iOS, Android, Web 向けに開発を行っているため、次のようにしてプラットフォームを追加します。

$ cordova platform add ios android browser

iOS, Android 向けの実行

iOS 用のアプリを実行・ビルドするには Xcode が必要です。 App Storeよりインストールを行ってください。

また Android 用のアプリを実行・ビルドするには Android Studio が必要です。

Android Studio
https://developer.android.com/studio/?hl=ja

もし実行中に JDK のバージョンが違うと怒られたら、OpenJDK 8 をインストールしましょう。

OpenJDK 8
https://adoptopenjdk.net/archive.html

Cordova の実行

それぞれのプラットフォームで実行するには、次のコマンドを叩きます。

$ cordova build ios
$ cordova build android
$ cordova build browser

正常に実行できると次のような画面が表示されます。

Cordova のビルド

それぞれのプラットフォームでビルドするには、次のコマンドを叩きます。

$ cordova build ios
$ cordova build android

Androidでリリースビルドを行う場合は、鍵を用意した上で次のコマンドを叩きます。

$ cordova build android --release

変更をリアルタイムに反映するプラグイン

実行できるようになりましたが、これではソースコードを修正するたびに実行しなおす必要があります。ソースコードを修正したらすぐに画面に反映された方が、より開発がはかどります。
そこで「 cordova-plugin-browsersync-gen2 」のプラグインをインストールするといいでしょう。プロジェクトのフォルダ上で次のコマンドを実行してください。

$ cordova plugin add cordova-plugin-browsersync-gen2

そして実行は次のようにオプションを追加します。

$ cordova run ios --live-reload
$ cordova run android --live-reload
$ cordova run browser --live-reload

実行すると次のような画面が表示されますが、上下のいずれかを選択するとおなじみの画面が表示されます。これでソースコードを修正・保存すれば、リアルタイムに修正が反映されます。

Androidの場合は、注意が必要です。API 29だと次のような表示が永遠と続き、実行することができませんでした。

$ cordova run android --live-reload
Waiting for emulator to boot (this may take a while)...............

そこでエミュレータの API を 24 に変更すると正常に動作しました。

iOS 向けに WKWebView を利用するプラグイン

Cordova ではiOSにおいて UIWebView が利用されています。しかし、Apple は 2020年4月より UIWebView を利用するアプリの申請を行うことができません。Cordova は UIWebView を用いず WKWebView を利用する修正を行っています。とりあえず、iOS 向けに WKWebView を利用するには次の3つのプラグインを利用します。

$ cordova plugin add cordova-plugin-wkwebview-engine
$ cordova plugin add https://github.com/TheMattRay/cordova-plugin-wkwebviewxhrfix
$ cordova plugin add cordova-plugin-inappbrowser

Xcodeのログを確認すると、次のように表示されていることが確認できます。

Using WKWebView

まとめ

Cordova は HTML5 + CSS3 + JavaScript を用いてiOS, Androidのクロスプラットフォーム開発が行える便利なフレームワークです。しかし、iOS向けには 2020年4月より UIWebView が利用できなくなる問題が残っており、少々不安ではあります。
弊社ではこれまで Cordova を多く利用してきました。しかし、ちょうど2020年4月にリリースする予定のアプリがあり、2020年2月現在 Cordova の状況が見えないため、今回の開発では Cordova の利用を見送りました。非常に便利なツールですので、ぜひこの問題を早急に解決してもらいたいものです。

Follow me!