【非エンジニア向け】アプリ設計基礎「モバイルアプリとWebアプリのどちらがいいのか？」②
はじめに
上記の記事の続きとなります。
この記事では、モバイルアプリを開発する上でいくつか存在する開発パターンについて紹介してきます。
◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆
モバイルアプリの開発パターン
モバイルアプリには、開発環境や使用する技術によって、開発するパターンがいくつか存在します。
ここでは、主にiOS(iPhone,iPadなど)とAndroidのアプリケーションを対象としたパターンを紹介してきます。
どのパターンを採用するかは、チームのリソース状況や、スキルセットにより異なりどれも一長一短です。
各パターンの特性を知り、チーム状況によって適切な手法を選択することで、開発工数の削減やトラブル削減が期待できます。
■ モバイルアプリ開発の主なパターン
・①各OSごとに開発
・②マルチプラットフォームのツールを使用して開発
・③Web(HTML)技術で開発(WebView)
・④Web(HTML)技術で開発(PWA)
それでは各パターンの詳細をみてきます。
◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆
①各OSごとに開発
モバイルアプリは、iOS、Androidの各ベンダー(Apple、Google)が提供する開発環境を使って開発するのが基本です。
このパターンは、iOSとAndroidそれぞれの開発環境で開発する、一番基本的なパターンです。
◆メリット
各環境に適した機能やUIを使って開発できる
iOSとAndroidでは出来ることやUI体験が微妙に違います。
iOSのユーザー、Androidのユーザーに上質な体験を提供するには、OSごとのルールや特性を把握して適切に開発する必要があります。
OSごとに個別に開発することで、適切な機能やUI体験をユーザーに提供することができます。
◆デメリット
(兼任できなければ) 各環境に専門のエンジニアが必要
全く異なる開発環境のため、必要なスキルもそれぞれ別に必要です。
職域としてはiOSとAndroidの2人のエンジニアが必要になります。
仮に兼任で一人で作れるエンジニアがチームにいた場合でも、2つのアプリを開発する必要があるため、工数自体は削減することはできません。
②マルチプラットフォームのツールを使用して開発
①の説明の通り、2つのOSでアプリを開発することはコストが高いという事情もあり、これらを1つの開発環境で一気に開発する手法が存在します。
これらは、AppleやGoogle以外の企業や団体が、開発を効率するために世の中に提供しているフレームワークやツール郡です。
有名なものをいくつか紹介します。
■ React Native
Facebookが主に開発しているフレームワーク。
ReactというWeb技術を利用して、基本的に全てJavascriptで開発する。
■ Flutter
Googleが主に開発しているフレームワーク。
Dartというプログラミング言語で開発する。
■ Ionic
Ionic teamというコミュニティで運営されているフレームワーク。
Web技術の複数を応用でき、基本的に全てJavascriptで開発する。
この他にもマルチプラットフォームの開発環境はいくつも存在します。
Webの技術を使った環境が比較的に多いのは、「モバイルアプリとWebアプリを同時に開発することが多い」「Web技術の方がオープンで歴史が長いためエンジニアの数が多い」などの理由が考えられます。
「Webの技術を知ってさえいれば、モバイルアプリも作れる」という技術の統一を図ることで、エンジニアの確保やメンテナンスコストの削減を意識しているのだと考えられます。
◆メリット
・開発工数を短縮できる
・習得に必要な技術を減らすことができる
2つのOSアプリを1つの環境で開発できるため、開発工数を短縮することが一番のメリットです。
また、本来であれば別々のアプリ開発技術の習得が必要な所を、一つに統一できるという点も、エンジニアの確保や教育面に不安があるチームにとってメリットがあるといえます。
◆デメリット
・メンテナンスコストが高くなる
・各OSの専門的な知識も必要
どの開発環境を選択するかで異なりますが、1つの環境で開発するということで、必ずしもコストが半分にはなりません。
最悪のケースでは、各OS環境に依存する問題が複雑に絡まり合い、別々に開発するよりも時間が掛かってしまう可能性もゼロではありません。
特に、OSのバージョンアップなどのメンテナンス時にこのような問題が顕在化することが多いです。
また、環境が一つだからといって、iOSとAndroidの知識が不要になるわけではありません。
各OSのリリース作業や、ストアへの申請、バージョンアップ対応など、モバイルアプリ特有の開発知識が全くない状態だと問題発生時に苦労することもあると思います。
③Web(HTML)技術で開発(WebView)
iOSやAndroidには、簡易版ブラウザのようなHTMLを表示するための『WebView』という仕組みが存在しています。
3つめの方法としては、このWebViewを使って、アプリの機能を全てWeb技術で開発してしまおうという方法です。
比較的昔から取られてきた手法で「ガワネイティブ」といった言葉で呼ばれることもあります。
◆メリット
・モバイルOSについてそれほど知識がいらない
・(Webアプリも作る場合は)Webアプリと共通部品化できる
モバイルアプリを開発する必要はありますが、使用する技術はWebViewに限定されるため、それほど専門的な知識がなくてもアプリ開発ができるというのがこの方法のメリットです。
また、Webアプリも併用して開発する場合は、使用する画面や部品の一部を共有化することが可能のため工数削減に繋がります。
◆デメリット
・複雑な機能を作ると開発コスト(特にメンテナンスコスト)が増加する
・(Webアプリも作る場合は)完全に共通化できない
・(上手く作らないと)UXが下がる
WebViewは単純な機能開発であれば便利ですが、モバイル端末のセンサー機能を使うような複雑な機能を使おうとすると逆にコストが高くなります。
Webの世界とモバイルの世界は基本的に分断されており、それを橋渡しするための特別な処理を別途プログラミングする必要があるためです。
また、同様の理由で、Webアプリと目的が同じ機能であっても、完全に共通の画面として開発できないケースがあります。
複雑化した結果、Webアプリ用のHTML画面とモバイルアプリ用のHTML画面の2つの開発が必要になるケースは少なくありません。
UIの作り込みにも気をつける必要があります。
本来のモバイルアプリのUIとWebアプリのUIは考え方や体験が異なるため、注意して開発しないと、ユーザーに対して良くない体験を提供するリスクがあります。
④Web(HTML)技術で開発(PWA,TWA)
最後に紹介する方法は、PWA(Progressive Web Apps)、TWA(Trusted Web Activity)といった新しい技術を使いモバイルアプリを開発する方法です。
※ これら方法は主にGoogleが推奨していることもあり、基本的にはAndroid以外では、完全な体験を提供できない可能性があることに注意が必要です。
PWAとは、今まではモバイルアプリでしか実現できなかった重要な機能(Push通知、インストール可能、オフラインのフィードバックなど)をWebアプリ上で実現することを目的としたWebアプリの技術(規格)です。
PWAで作られたアプリケーションは、ブラウザで動作しながらもスマートフォンのホーム画面にインストールが可能で、URLの入力バーを表示させないこともできるため、他のモバイルアプリと近い体験をユーザーに提供できます。
TWAは、Web技術だけで開発されたページをモバイルアプリとしてストアで配信することができるAndroidの機能です。
(WebViewだけで開発されたアプリに近しい概念です)
次の記事がわかりやすいため、興味があれば読んでみてください。
わかりにくいですが、PWAをTWAとしてストアへ配信することも可能です。
これらの技術を活用することでWebアプリを限りなくモバイルアプリのように動作させることができます。
◆メリット
開発技術をWeb技術に集中できる
現時点では、完全にモバイルアプリと同じ体験を提供することは難しいですが、Webアプリで実現できる機能であれば、モバイルアプリとほぼ同じ体験をユーザーに提供することができます。
(主にPWAの話で、TWAにはAndroidの知識も多少必要です)
WebViewのようにモバイルアプリの技術は必要としないため、Webアプリ開発にリソースを集中できることがメリットです。
PWAはブラウザ上でWebアプリとしても動作します。
◆デメリット
・Webの基本技術に加えて、PWAやTWAの技術習得が必要
・OSやバージョンによる動作差異が発生する可能性がある
本来のWeb技術だけではなく、PWAとしてアプリを開発するための知識が必要になります。
これらの技術は比較的新しいく、今までのWeb技術に慣れている人は知識のアップデートが必要です。
また、「Webアプリとモバイルアプリの境をなくしていこう」という動きは、基本的にGoogleが推奨しておりiOSとは若干の温度差があります。そのため、iOSとAndroidのOS間や、SafariとChromeのブラウザ間で機能差異が発生する可能性があります。
iOSではPWAはストアで配信できないといった事象がその一つです。
◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆
どのパターンを選んだら良いか(個人的な見解)
どのパターンを採用したらよいのかは、チームの状況やスキルセット、アプリの特性によって変わってきます。
ここでは、あくまで僕個人が考える状況とパターンをご紹介します。
【モバイルの特性を活かした専門性が高いアプリの場合】
★ 各OSごとに開発
例えば、音声解析や、画像解析、その他カメラや無線を使った機能をメインに比較的専門性の高いアプリを開発したい場合は、OSごとに別で開発することを推奨します。
マルチプラットフォーム環境やWeb技術ベースの環境では、そもそもやりたいことが実現できない可能性があります。
仮にマルチプラットフォーム環境で実現することができたとしても、経験上そのような専門性の高い機能はメンテナンス時にトラブルが発生しがちです。
また高速のパフォーマンスを求められるようなアプリケーションについても各OSごとに開発したほうが良いでしょう。
マルチプラットフォームやWebベースでは、OSごとに細かいチューニングができないためです。
【iOSまたはAndroidの経験豊富なエンジニアが1人以上いる場合、かつシンプルな機能の場合】
★ マルチプラットフォームのツールを使用して開発
iOSまたはAndroidで経験豊富なエンジニアが一人以上いて、一般的な機能のアプリを開発する場合は、Flutterのようなマルチプラットフォームの開発環境を選択することをおすすめします。
理由は、iOSまたはAndroidの経験豊富なエンジニアがいれば、マルチプラットフォームで発生するOS固有のトラブルを比較的スムーズに解決できることが期待できるためです。
(未経験のOSのトラブルは学習が必要ですが、モバイルアプリの経験値から比較的早く順応できる可能性が高いです)
今後の開発の効率化を考えて、マルチプラットフォーム開発のノウハウを蓄積することにはメリットがあるように感じます。
【Webの経験豊富なエンジニアが1人以上いる場合】
★ Web(HTML)技術で開発(PWA,TWA)
チームにWebの開発経験が豊富なエンジニアがいる場合、PWAのようなユーザビリティが高いWebアプリを開発することを推奨します。
WebViewベースのアプリは、Webとアプリの両方のノウハウが必要なため比較的難易度が高く、メンテナンスコストも高いためどんなパターンでもあまり推奨しません。
Webエンジニアが経験豊富の場合は、PWAのようなWeb技術に集中できるパターンのほうが、開発効率、メンテナンス効率が高いと考えています。
◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆
まとめ
読んでいただきありがとうございました。
今回は、モバイルアプリ開発における開発パターンをいくつか紹介しました。
今後も、「モバイルアプリとWebアプリのどちらがいいのか？」という内容にフォーカスして記事を追加していきたいと思いますので、興味がありましたら読んでいただければ幸いです。
◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆
アンケートのお願い
このチャンネルでは、これから提供していくコンテンツやサポートの内容を改善していくために、アンケートをお願いしています。
ぜひアンケートにご協力ください。
この記事が気に入ったらサポートをしてみませんか？