Apache Cordovaとは🤖

Apache Cordova（コルドバ）はオープンソースのモバイル開発フレームワークです。
クロスプラットフォーム開発の為の標準的なHTML5、CSS3、JavaScriptを使用できます。 iOSやAndroidのアプリ開発においてプラットフォームに依存しないアプリ開発の技術として注目を浴びています。
アプリケーションは各プラットフォームを対象とするラッパー内で実行され、標準準拠のAPIバインディングを使用して、センサー、データ、ネットワーク状況などの各デバイスの機能にアクセスすることで、
ウェブアプリとネイティブアプリを組み合わせた構造の「ハイブリッドアプリ」を開発することができます。

🧚‍♀️ハイブリッドアプリを使うメリットとデメリット😈

メリット①：開発コストを抑えることができる

iOSやAndroid向けのアプリを開発する際には、専用の開発環境や知識、技術がそれぞれに求められますが、ハイブリッドアプリの場合、アプリを開発する言語の取得は不要であり、HTML5、CSS3、JavaScriptが使うことができれば開発可能です。Webアプリの開発経験があれば、そこまで難易度は高くないです🤩

メリット②：メンテナンスが容易

iOSやAndroidアプリを開発する際には、対応が必要なOSバージョン全てでテストが必要ですが、ハイブリッドアプリであれば、webで表示する仕組みとなっているため、OSによる影響を受けにくいです✌️

デメリット①：スムーズに動作させることが難しい

マシンのスペック次第にはなりますが、ネイティブと同等のヌルヌル度合いで動かすことは難しいです☠️

デメリット②：細かな変更に対応しづらい

GPSやカメラなどのネイティブアプリの機能と連動させるためには、特定のフレームワークを使わなければならず、フレームワークに依存しやすいハイブリッドアプリでは、細かな変更には対応しづらいです👻

😵‍💫実装に苦労した点😵‍💫

上記のデメリット②でもあるように、細かな変更に対応しづらいという点です。
今回キッチンカーの料理事前注文アプリを開発したため、Mapとの連携は必須でした。
しかし、CordovaでMapを使用できるプラグインは非常に古く、１つしか存在していないため、使わざるを得ない状況でした。

＜Mapプラグインの実装＞

Cordovaがバージョン9以下であることを確認しておいてください。
Android10に対応したCordovaのバージョンでは、上記のプラグインは動作しないためです。。。

{
	...,
	"devDependencies": {
		...,
		"cordova-plugin-googlemaps": "^2.7.1",
	  "cordova-plugin-googlemaps-sdk": "github:mapsplugin/cordova-plugin-googlemaps-sdk",
	},
	...
	"cordova": {
	  "plugins": {
			...,
			"cordova-plugin-googlemaps": {
          "LOCATION_WHEN_IN_USE_DESCRIPTION": "This app wants to get your location while this app runs only.",
          "LOCATION_ALWAYS_USAGE_DESCRIPTION": "This app wants to get your location always, even this app runs in background."
      },
		}
	}
}

上記のプラグインを使用する際に、Mapを表示させたい部分の背景は透明にしておかなければMapが表示されない仕様になっていますが、別ページに遷移する時に、透明背景から元に戻さなければ、下記のように一瞬黒い背景が写ってしまう不具合が発生してしまいます。

そこで、上記不具合を解決するために<div>タグのスタイルを変更し、Vueのv-if/v-elseディレクティブを使用することで解決しました。

<div
  v-if="enableTrans"
  :style="{ background: 'transparent' }"
>
	<!-- you put the map div in here -->
 ... 
</div>
<div
  v-else
>
  ...
</div>

ハイブリッドアプリにはメリット、デメリットそれぞれありますが、適切な状況で選んでいただければ、開発もスムーズに進むと思いますので、ご参考にしてください！

※「Android ロボットは、Google が作成および提供している作品から複製または変更したものであり、クリエイティブ・コモンズ表示 3.0 ライセンスに記載された条件に従って使用しています。」