はじめに

Angularとionicというフレームワークを使用して
ハイブリッドアプリの運用保守に携わってます。
その際に工数を大幅に削減できた例があったのでこちらでご紹介させていただきます。

Angular とは？

　　Googleが開発しているJavaScriptフレームワーク。
　　WEBアプリケーションの開発のために使用。
　　MVC・双方向データバインディングといった特徴がある。

ionic とは？

　　Ionic FrameworkはオープンソースのUIツールキットで、
　　HTML、CSS、JavaScriptなどのウェブ技術を使って、高性能で高品質な
　　モバイルアプリやデスクトップアプリを作ることが可能。

環境

　Angular           : 7
　ionic             : 4.9
　Cordova CLI       : 10.0.0
　Cordova Platforms : android 7.1.4 / iOS :4.5.5
　Node.js           : 10.14.0

※(ionic:4.9 その当時のバージョン。現在はサポート切れのため、アップデートしている)

結論

ハイブリッドのフレームワークを使用し、iOSのアプリのみを運用保守していたが、Android版のアプリも出して欲しいとの要望があった。

その際、ソースコードもほとんどそのままでよく、過去に作成したテストケースを流用してテストを実施。
ほとんどバグも発生せず、リリースができ、品質も問題なかった。

概要

1 アプリ実装の流れ

・ソースはバックログというサービスでGit管理している

２ファイル階層

app
assets
environments -- environment.prod.ts
             -- environment.ts

environment.prod.ts　>> 本番ビルド時に参照する設定ファイル
environment.ts　　　 >> 開発ビルド時に参照する設定ファイル

3 ビルドコマンド

本番向け

ios
ionic cordova build ios --prod --release -- --buildFlag="-UseModernBuildSystem=0" --verbose

android
ionic cordova build android --prod --release --verbose

本番向けのビルドコマンドを実施すると、難読化が自動的にかかるので、
アプリを解析されにくくできる。

開発向け

ios
ionic cordova run ios

android
ionic cordova run android

開発ビルド時は難読化はかからず、デバッグモードになるので
ローカル環境でリアルタイムで処理を確認しつつ、
ブレイクポイントで処理をとめつつ開発を進めることが可能。

4 iOSとAndroidアプリについて

１プロジェクトでiOSとAndroidアプリ両方を作成する際、ネイティブ言語を採用する場合

iOSアプリ　 >> objective-c、またはSwift
Androidアプリ　 >> Java、C# または　Kotlin　　と

アプリごとに使用する言語が違っていて、両方理解するには学習コストがかかったり、保守のリソース不足が起こるかと思われる。ハイブリッドアプリを採用することで、ウェブ技術を使って１ソースで２つのアプリをリリースすることが可能なので、工数の削減に役立っている

おわりに

近年流行している　【Vue.js】や【React】、【Flutter】など単一のコードからiOSアプリとAndroidアプリ、さらにWeb、デスクトップアプリケーションまで作成できるフレームワークが溢れている。プロジェクト開始時に先の運用保守のしやすさを見越した上で適切にフレームワークを選んでいきたい。

参考資料

Angular

ionic