MacでCordovaのインストール・実行・ビルドまで (iOS, Android, Web)
tks2Apache 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 の利用を見送りました。非常に便利なツールですので、ぜひこの問題を早急に解決してもらいたいものです。
