ハイブリッドスマホアプリを作成する機会があり、コマンドなどハイブリッドスマホアプリを作成するのに必要な知識を備忘録として書きます。
まずハイブリッドスマホアプリについて簡単に説明します。
ハイブリッドスマホアプリ開発とは 見出しへのリンク
HTML5,CSS,JavaScriptを使って iOS,Androidのアプリを作成することです。
スマホ端末のWebViewにて動作します。
スマホのカメラ、GPS、Bluetooth 機能はフレームワークで利用することができます。
今回紹介しているCordovaがそのフレームワークです。
メリット 見出しへのリンク
スマホアプリ開発は、OS が違うのでそれぞれのネイティブ言語で開発していきます。
Android：Kotlin,Java
iOS :Swift,Objective-C
ただこのハイブリッドスマホアプリ開発だと一言語のみなので、その分開発工数を節約することができます。
また、HTML5,CSS,JavaScript は Web 作成で一般的に知られている言語なので、要員確保が容易であることもメリットです。
デメリット 見出しへのリンク
スマホアプリ開発に付きまとうのが「端末ごとの挙動差異」です。
各OSごとのネイティブ言語で開発しても発生するのに、それを一言語でまとめている状態なので、端末ごとの挙動差異が発生する機会は多くなる気がします。
特にAndroidは端末毎にメーカーが異なるので、搭載しているチップやハードウェアも異なるので挙動差異が出てくることがあります。
アプリ作成の流れ[コマンド] 見出しへのリンク
プロジェクトを作成する 見出しへのリンク
cordova create [ディレクトリ] [識別子] [アプリ名]
※識別子とは逆引きドメイン スタイル識別子のこと
例：
cordova create sample com.example.Sample Sample
プロジェクトを作成することでCordovaハイブリッドアプリ開発に必要なファイルが作成されます。
初期状態では、背景グレーのApache Cordovaのロゴが大きく出ている画面が表示されています。
プラットフォームを追加・確認・削除する 見出しへのリンク
ここでいうプラットフォームとはiOSやAndroid,Browser のことです。 プラットフォームを追加しないとそのデバイスで動作確認をすることができません。
追加
cordova platform add ios
cordova platform add android
cordova platform add browser
ここでbrowserを追加しているのは、JavaScriptをデバッグするにはGoogleChrome検証ツールが何かと便利なので入れておくといいでしょう。
繋げて入力しても取り込むことができます。
cordova platform add ios android browser
現在追加済みのプラットフォームを確認する
cordova platform ls
もし一部プラットフォームを削除する場合は以下コマンドを入力します。
cordova platform rm ~~~~
エミュレータを起動する 見出しへのリンク
cordova emulate android
もしブラウザ上でデバッグしたい場合は
cordova serve android
これで GoogleChrome検証ツールを利用した上でデバッグすることができます。
ソース修正を反映したい場合は一旦 CTRL + C で終了し、またコマンドで実行しましょう。
実機で起動する 見出しへのリンク
cordova run android
ちなみにエミュレータや実機での起動は、AndroidStudio や Xcode でも起動できます。
その場合は以下ビルドコマンドを実施してから起動しましょう。
cordova build android
Cordova プラグイン追加・確認・削除 見出しへのリンク
cordova plugin add cordova-plugin-console
※ちなみに cordova-plugin-console を追加した理由は iOS スマホアプリで console.log が確認できなかったから。
Cordova ログが出力されない iOS スマホアプリの console.log 確認方法
プラグイン確認
cordova plugin ls
Cordova プラグイン削除
cordova plugin rm cordova-plugin-console
便利なライブラリもいっぱいあるから簡単なゲームでも作ろうかな。
以上です。