Cordovaハイブリッドスマホアプリを作成する為に最低限知っておくべき知識とコマンド

Featured image

ハイブリッドスマホアプリを作成する機会があり、コマンドなどハイブリッドスマホアプリを作成するのに必要な知識を備忘録として書きます。

まずハイブリッドスマホアプリについて簡単に説明します。

ハイブリッドスマホアプリ開発とは

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

便利なライブラリもいっぱいあるから簡単なゲームでも作ろうかな。

以上です。

comments powered by Disqus