Cordovaの特徴
Cordova(コルドバ)とは、オープンソースのハイブリッドアプリ開発フレームワークです。複数のプラットフォームで動作するモバイルアプリをワンソースで開発できます。
Cordovaは、Web標準技術(HTML5+CSS+JavaScript)を使って、iPhone/Androidなどの複数のモバイルOSに対応したクロスプラットフォームなアプリを開発することができるフレームワークです。
複数のOSに対してそれぞれネイティブアプリを開発する作業と比較すると、1つのソースコードで複数OSに対応できるため、大幅に開発コストを削減できます。Webアプリと同様の技術で開発するため学習コストも削減できます。
Cordova CLIのインストール
Cordova CLIとは、Cordovaのコマンドラインインターフェイスです。
Cordova CLIのインストーラは、前章で述べたnpmパッケージにありますので、以下でnpmからCordovaのCLIをインストールしましよう。
npm install -g cordova
#以下の結果が表示
added 438 packages from 349 contributors in 20.705s
╭───────────────────────────────────────────────────────────────╮
│ New minor version of npm available! 6.7.0 → 6.9.0 │
│ Changelog: https://github.com/npm/cli/releases/tag/v6.9.0 │
│ Run npm install -g npm to update! │
╰───────────────────────────────────────────────────────────────╯
インストール完了後、バージョンを確認しておきます。
🌾アプリはiOSエミュレータで確認すれば、[ios-sim]がインストールされていないと「cordova run」できないようです。[ios-sim]がインストールすれば「npm install -g ios-sim」を実行します。
cordova -v
9.0.0
Cordovaプロジェクトの作成
Cordova CLIを使って、プロジェクトの作成を行います。今回は“Hello Cordova!”が表示されるCordovaプロジェクトを作ります。
ちなみに、このプロジェクトはiOSまたはAndroid全部使える対象とします。
#プロジェクト作成コマンドの構造： cordova create ディレクトリ名 識別子 アプリ名
cordova create HelloCordova com.demo hellocordova
#以下が表示された
Creating a new cordova project.
プロジェクトの構築は以下の様子です。
HelloCordovaというディレクトリが作成されたので、次の処理を行う前にHelloCordovaに移動は必要です。
プラットフォームの作成
wwwフォルダにかかれた内容はbuildをすると、platformsの中にデバイスごとに生成されます。
アプリはplatformsに作られた内容を参照します。
そのため、platformsには各デバイス用のディレクトリを用意してあげなくてはいけません。
デバイス別に、コマンドを以下の通りです。
iosデバイス： cordova platform add ios
iosシミュレーター： cordova platform add ios-sim
androidデバイス： cordova platform add android
今回は、iosなので、以下を実行します。
cd HelloCordova
cordova platform add ios
#以下が表示
iOS project created with cordova-ios@5.0.0
Discovered plugin "cordova-plugin-whitelist" in config.xml. Adding it to the project
Installing "cordova-plugin-whitelist" for ios
Adding cordova-plugin-whitelist to package.json
プラットフォームの配下は以下の様子です。
追加したらプラットフォームの確認をしておきましょう。
cordova platform ls
#以下が表示
Installed platforms:
ios 5.0.0
Available platforms:
android ^8.0.0
browser ^6.0.0
electron ^1.0.0
osx ^5.0.0
windows ^7.0.0
🌾削除コマンドは次の通りです。
cordova platform rm ios
あとはビルドやデバッグをVSCodeの拡張機能を使って実行できるようにします。
Cordovaプロジェクトのビルド
Cordovaプロジェクトを作った際にwww下にあるファイルはcordovaのサンプル用ファイルです。
Cordovaプロジェクトをビルドすると、wwwフォルダのものによってplatformsの中にデバイスごとに生成されます。
アプリ実行する時には、platformsに作られた内容を参照します。
デバイス別に、コマンドを以下の通りです。
iosデバイス： cordova build ios
iosシミュレーター： cordova build ios-sim
androidデバイス： cordova build android
今回は、iosなので、以下を実行します。
cd HelloCordova
cordova build ios
#ビルドの最後に以下が表示された
** BUILD SUCCEEDED **
iosデバイスでプロジェクトを実行
実機に入れての確認については、androidはすぐに確認できますが、iosはXCodeに登録されていないと実機に登録できない仕組みになっています。
iPhone実機で確認手順は以下の通りです。
1. iPhoneをUSBで繋げます。
ここで、run実行してみても構いませんが、実機をつなげていても、エミュレータがたち上がります。
cordova run ios
#以下のメッセージが出た
No target specified for emulator. Deploying to undefined simulator
XCode設定
iosの実機でアプリを実行したい場合は、Appleに収めるものを収めて、メンバーになっているならばxcodeに設定をします。
下図のように、platforms/ios/hellocordova.xcodeprojをXCodeで開きます。
下図のように、アプリを実行します。
実行結果は以下です。
「hellocordova」をダブルクリックすると、アプリが実行されました。画面の以下の様子です。
