こんにちは。
NCDCのフロントエンドエンジニアとして、主にモバイルアプリの開発を担当している本田です。
本記事は、多数あるアプリ作成方法の中から最適なものを選択するためのポイントを解説していく連載記事のひとつです。
過去の2記事は主に「非エンジニア」の方向けに書いていましたが、本記事からやや技術的な知識を持つ方向けの内容に寄ってきています。
もちろん多くの方に読んでいただきたいと思いますが、よくわからない方は無理にこの記事を読んだだけで判断せず、専門知識を持った方と相談しながらどの手法を採用するか考えていただくと良いと思います。
連載記事
- モバイルアプリとWebアプリの比較
- ネイティブアプリとクロスプラットフォームアプリの違い
- クロスプラットフォームアプリ開発技術の比較（やや技術者向け）（本記事）
- Webアプリの擬似モバイルアプリ化（PWA）について
目次
スマホで動作するアプリの全体像
下図はスマホで動作するアプリの全体像です。先の記事ではWebアプリとモバイルアプリの違いや、ネイティブアプリとクロスプラットホームアプリの違いを説明しました。
本記事ではクロスプラットホームアプリをさらに細分化して、実装方式による違いを説明します。
図の通り、クロスプラットホームアプリの中にネイティブUI型、独自レンダー型、Web view型、ガワアプリと４種類ありますが、まずその中の２つ、ネイティブUI型と独自レンダー型から説明します。
ネイティブUI型と独自レンダー型
ネイティブUI型と独自レンダー型の違いは、UIの描画処理をどこで行うかです。人が目にするアプリのUIを画面に表示すること（描画処理を行うこと）をレンダリングと言います。このレンダー処理をどの層で行うかが、ネイティブUI型と独自レンダー型の違いです。
クロスプラットフォーム開発技術「ネイティブUI型」
ネイティブUI型の場合、OSの中にあるネイティブレンダーを利用してUIを描画します。そのためアプリ側ではレンダリングを正確にコントロールすることはできません。
ネイティブUI型の代表的なフレームワークとしては、React Nativeが挙げられます。
ネイティブUI型のメリット・デメリット
React Nativeに代表されるネイティブUI型のメリットは、OSに適したUIで描画されるためユーザが操作しやすくなることです。iOSであればiOSが持っているネイティブレンダーを使用するため、iOSユーザーが使いやすいUIで表現されます。Androidの場合も同じです。
次にネイティブUI型のデメリットですが、開発時のコードは同一なのにレンダーをOSに依存するためデザインが統一できないことが挙げられます。同じアプリでもOSが異なると少し異なるUIで表現されてしまうのです。
また、デザインの統一が難しいのでOS毎に個別に設定するコードが必要になり、その分開発コストが少し増える可能性もあります。
クロスプラットフォーム開発技術「独自レンダー型」
独自レンダー型は、前述したネイティブUI型との比較で考えていただくとわかりやすいと思います。ネイティブUI型ではOS側にレンダーがありますが、独自レンダー型ではアプリ側にレンダーが入っています。OSに依存しないので自由なレンダリングができます。
独自レンダー型の代表的なフレームワークとしては、flutterが挙げられます。
独自レンダー型のメリット・デメリット
flutterに代表される独自レンダー型のメリットは、OSに依存しないUIを作成できることです。ネイティブUI型には異なるOS間でデザインが統一できないというデメリットがありましたが、独自レンダー型ならそのような問題はありません。
次に独自レンダー型のデメリットですが、これはネイティブUI型のメリットの反対になります。自動的にOSに適したUIで表現してくれないためユーザが操作に迷ってしまう可能性があります。（あくまでも可能性があるというだけであまり気にする必要はありません。世の中に多々ある優れたUIを実現するフレームワークを利用すれば解決できる問題だといえます）
React NativeとFlutter
続いて、ネイティブUI型、独自レンダー型それぞれの代表的なフレームワークであるReact NativeとFlutterについて説明します。
React Nativeは、Meta社(旧Facebook)が作成したアプリ作成フレームワークです。開発言語はJava Scriptを使用しています。
Flutterは、Google社が作成したアプリ作成フレームワークです。開発言語は Dartを使用しています。
React Nativeのメリット・デメリット
React Nativeのメリットは、Webエンジニアが使う言語であるJava Scriptで開発できるためWebエンジニアにとって扱いやすいことです。モバイルエンジニアに比べて、Webエンジニアはかなりの母数がいるので、React Nativeの技術者は集めやすいのです。IT人材不足が顕著な昨今、技術者を集めやすいことは大きなメリットといえます。
とくにWebエンジニアの中でもReactの経験者であればすぐにReact Nativeでの開発が可能だと思います。
OTA Updateが可能なこともReact Nativeの大きなメリットとして挙げられます。
この記事で詳細は端折りますが、OTA UpdateとはOver The Air updateの略でApp Store(またはGoogle Play)を経由せず（ストアの審査を通さず）最新バージョンをユーザーに届けられる技術です。
React Nativeのデメリットは、Webエンジニア「だけ」で開発するのは難しいことです。ストアの知識やネイティブ機能の知識が必要になるため、モバイルエンジニアの関与も必要になります。React Nativeで開発する場合、モバイルエンジニア1,2名と、あとはWebエンジニアというチーム構成が良いと思います。
Flutterのメリット・デメリット
FlutterはGoogle社が作成したフレームワークなので基本的にGoogleが推奨するデザインの原則であるマテリアルデザインを採用しています。そのためマテリアルデザインに準拠したUIであればスピーディーに開発できることがFlutterの大きなメリットです。
また、Android、iOSだけでなくWeb、Windows、Mac、Linuxの6つのプラットフォームに対応するアプリケーションが開発可能なこともFlutterの特長です。
React Nativeと比べると処理が高速なこともFlutterのメリットだといえます。先に説明したとおりReact Nativeは「ネイティブUI型」なので、Java ScriptからOS側のレンダーを呼び出します。内部でこのようなレンダー処理の流れを持っているため反応が少し遅くなります。
一方で、「独自レンダー型」のFlutterはアプリ内で直接レンダー処理を行うため、比較的素早い反応が可能です。
Flutterのデメリットは、Dart言語を学習する必要があることです。React NativeのようにWebエンジニアがすぐに扱えるわけではありません。
ただし、DartはJavaScript, Javaと言語仕様が似ているため、新たに学ぶといっても比較的学習コストは低いといえます。
Flutterは2022年現在かなりエンジニアに人気があるフレームワークであることも注目しておく必要があります。2年くらい前はReact Nativeと同程度、もしくはややReact Nativeには劣る程度でした。しかし、現在ではReact Native よりもFlutterの方が注目されています。
先に書いた通り、IT人材不足が顕著な昨今、技術者を集めやすいことは大きなメリットといえるため、エンジニアに人気があるか否かは重要な要素です。
React NativeかFlutterか？選択のポイント
ここからはReact NativeとFlutterのどちらを採用するか迷われている場合の、選択のポイントをいくつか紹介したいと思います。
実現したいUIの面から考える
- iOSとAndroid各OSに適したUI（OS標準の表現で）アプリを作成する必要がある場合は、ネイティブUI型であるReact Nativeがオススメ
- iOSでもAndroidでもUIを統一したアプリを作成する必要がある場合は、独自レンダー型であるFlutterがオススメ
機能や技術面から考える
- OTA Updateを行いたい場合は、React Nativeがオススメ
- 開発者の多くがJavaScriptの経験者である場合は、React Nativeがオススメ
- Windows、Mac などiOS・Android以外のOSにも対応する必要がある場合は、Flutterがオススメ
※実際にはもっと多様な選択のポイントや考慮すべき制約がありますが、この記事ではわかりやすく単純な例を用いた説明に留めています。
Web View型とガワアプリ
続いて、Web View型とガワアプリについて説明していきます。
クロスプラットフォーム開発技術「Web View型」
まずは、Web View型についてです。Web View型はモバイルアプリの中でWebアプリを動かすイメージです。
アプリの中にはWeb Viewというブラウザのようなものがあり、その中で、Webアプリを動かして機能を提供するのがWeb View型です。
（以前の記事「モバイルアプリとWebアプリの比較」も参考になると思うので併せてご覧ください。）
Webアプリは基本的にカメラ・マイク等端末側の機能（ネイティブ機能）を自由に使用できないのですが、この問題を解消するために、Web View型のフレームワークの中にはPluginというものが用意されています。Pluginを通すことで、Webアプリでもネイティブ機能を使用することができます。
Web View型の代表的なフレームワークとしては、Apache Cordovaが挙げられます。
クロスプラットフォーム開発技術「ガワアプリ」
ガワアプリというのは、アプリ内のWeb Viewを通じてWebサーバーに置いてあるプログラムを要求する仕組みです。サーバーにあるWebアプリを呼び出して実行し、アプリ側はそれを描画しているだけです。
ガワアプリの「ガワ」は「外側」や「何かを包む皮」の「ガワ」を指しているようです。要は外側だけモバイルアプリっぽく見せているが、実際はアプリ側にはほとんど機能を持たず、Webを表示することを主機能としているアプリです。
Web View型とガワアプリの違いは、アプリの中にWebアプリを持っているのか、サーバーにアクセスしてWebアプリを呼ぶだけなのかという点です。
「Web View型」と「ガワアプリ」のメリット・デメリット
WebView型のメリットは、Webエンジニアでも開発ができることです。
一方でデメリットは、パフォーマンスが低いことです。WebViewで描画すること自体がパフォーマンスを下げる要因なので、この問題は避けられません。
カメラ・マイク等端末側の機能（ネイティブ機能）も使用できますが、一部の機能に限定されることもデメリットとして挙げられます。
ガワアプリは、サーバーからWebアプリを呼ぶだけなので、既存のWebアプリをモバイルアプリのように動作させられることがメリットです。
アプリの更新が容易なことも大きなメリットです。「ガワ」には手を加えずサーバー側のアプリを更新すれば済むので、更新時にストアの審査を通す必要がないのです。
一方で、デメリットはパフォーマンスが低いことです。WebView型と同じくWebViewを使う時点でパフォーマンスが悪化するのでこの問題は避けられません。
カメラ・マイク等端末側の機能（ネイティブ機能）を使用できない点もデメリットとして挙げられます。
コーディングが難しいだけで、ガワアプリでもやり方によっては一部のネイティブ機能を使えますが、実現するために一般的なモバイルアプリ開発とは違った実装が必要になります。そのため、ネイティブ機能を多く使用する場合はガワアプリは不向きです（少なくとも開発者の観点からはお勧めできません)。
ガワアプリは一般的には複雑な処理を必要としないコンテンツ配信などのアプリに用いられるものと考えてください。
WebView型やガワアプリを選択する際のポイント
ここからはWebView型やガワアプリで良いかどうか迷われている場合の、選択のポイントをいくつか紹介したいと思います。
開発効率から考える
既存のWebアプリがあり、モバイルアプリ用に一部修正して転用することを考えている場合はWebView型やガワアプリが重要な選択肢になります。
WebView型のアプリをつくる場合、一部ネイティブ機能を使う部分だけPluginで実現するなど手を加えれば、それ以外の大部分はWebアプリのコードを転用できます。
ガワアプリの場合はもっと簡単です。サーバに置いてある既存Webアプリをそのまま呼ぶだけので、新しく開発するのは「ガワ」の部分だけで済みます。
機能面から考える
複雑な処理を実行しない場合はWebView型やガワアプリも選択肢になります。
一方で、長いリストを扱うような高いパフォーマンスが必要な処理はWebViewのパワーでは追いつけないので無理があります。
オフライン実行の必要があるか否かも選択の際に大事なポイントになります。WebView型はいわばアプリの中にWebアプリを持っている状態なので、オフラインでも実行できますが、ガワアプリはWebサーバにプログラムを要求しにいくのでインターネットにつながっていないと動きません。
まとめ
本記事では、クロスプラットフォームでモバイルアプリをつくる場合の実装方式による違いや選択のポイントをご紹介しました。
どの手法を採用するか正しく判断を下すためには、アプリに求める機能性、開発コスト、保守のしやすさ、技術の将来性…などさまざまな観点を持って考える必要があります。
そのため、ビジネスサイドの方とITサイドの方、両者が参加するプロジェクトチームで協議するのがお勧めです。外部ベンダーに開発を依頼する場合は実装方式の相談にも乗ってくれるようなパートナーを選定するのが良いでしょう。
NCDCは、モバイルアプリを用いたサービスの全体像を検討するところから、アプリ開発の要件定義、UX/UIデザイン、実装まで一元的にお客様をご支援することを得意としています。
目的に応じた適切な技術の選定からご相談いただけますので、モバイルアプリの開発を検討されている方はぜひお問い合わせください。
