ハイブリッドアプリ vs クロスプラットフォームアプリ vs ネイティブアプリ

こんにちは。
マネックス・ラボのOと申します。
私は2018年にマネックス証券へ中途採用で入社し、2年間はシステムの保守業務を担当しておりましたが、もっと開発業務に携わりたいという希望が叶ってマネックス・ラボに部内移動させていただき、弊社サービスのSNS型投資アプリである「ferci」を開発するチームに加わりました。


ferciは、スマホ上で株式取引を行えるアプリで、ユーザーは株の銘柄ごとにクチコミを投稿できるSNS型投資アプリです。

ferci 1株からはじめる かんたん投資アプリ

ferci 1株からはじめる かんたん投資アプリ

  • MONEX, Inc.
  • ファイナンス
  • 無料

ferciアプリは、Swift言語で開発されたネイティブアプリになりますが、iOSやAndroidのアプリを開発する際、いくつかのオプションがあると思います。  
 今回の記事では ハイブリッドアプリ vs クロスプラットフォームアプリ vs ネイティブアプリ について比較してみました。
それぞれについて基礎概念を簡単に説明し、長所短所を見ていきたいと思います。

(1)ハイブリッドアプリ 

f:id:msoh:20201214153554p:plain

(2)クロスプラットフォームアプリ

f:id:msoh:20201214154805p:plain

(3)ネイティブアプリ

f:id:msoh:20201214154845p:plain

 

 1.ハイブリッドアプリ

 ウェブアプリとネイティブアプリを組み合わせたものだとよく言われます。ハイブリッドアプリは、アプリをネイティブで作りますがそのアプリにブラウザのウィンドウを入れ込んで一部または大部分の機能をウェブの形で提供するものです。(AndroidやiOS専用でそれぞれのストアに登録するネイティブアプリを作り、そのアプリの中にクロームやサファリのようなウェブサイトを見せるウィンドウを入れたもの。)このウェブブラウザのナビゲーションコントロールがないブラウザのウィンドウのことをiOSとAndroidではどちらもウェブビュー(WebView)と呼びます。

f:id:msoh:20201214155331p:plain
開発者はhtml,css,jsで作られたウェブビューを ラップ(wrap)したもの(アプリ)をストア(Apple storeやGoogle play)に登録し、利用者はアプリを実行すると、ウェブビューから利用するウェブに接続され、スマホから見るものは”ブラウザのウィンドウ(その中にhtml,cssが含まれているナビゲーションバーはない形)”になります。
 主な機能は、ウェブサイトに作り、このウェブビューから利用できるようにして、ウェブサイトの中で具現化できない機能はネイティブレベルで処理します。(例:音声認識やカメラなど)開発する際にはApache Cordovaやionicのようなフレームワークが使われたりします。

<長所>
html,css,jsがわかるのであればネイティブアプリに関する知識がなくてもアプリの開発ができる。ネイティブ機能のアップデートだけストアを通してアップデートが必要で、ウェブビューから見せる機能はウェブ側のみアップデートすればよいので、ネイティブアプリよりもっと柔軟な運用が必要な機能を提供しやすい。
<短所>
ほとんどのUI(ボタン、タイトル、ナビゲーション、などなど)を自分で作る必要がある(=ウェブサイトを0から作るような感じ。だが、もちろんJavaScriptのフレームのフレームワークやライブラリも適宜に使って作れる)。また、スマホの強力な機能を活用できない。例えば、ハードコアなビデオプロセッシングなどの場合、jsで作るにはかなり大変。ハイブリッドアプリで操作できるのは基本カメラの機能や位置情報、ネットワーク情報、連絡先、基本的なファイルシステム程度の利用は可能だが、スマホが持っている高級な機能を使うことは難しい。
<スマホの資源・機能の活用度>
f:id:msoh:20201214160044p:plainf:id:msoh:20201214160102p:plain

 2.クロスプラットフォームアプリ

 クロスプラットフォームアプリは、簡単に言えばネイティブコードではない言語でコーディングした後、iOSやAndroidが分かるコードに変換するアプリです。 

f:id:msoh:20201214160511p:plain

例えば、React Nativeでコーティングした後、JavaScriptにコンパイルし、iOSやAndroidがそれぞれのJavaScriptエンジンで実行します。また、Flutterの場合はDartコードで書いてCやC++でコンパイルし、Xamarinの場合はC#でコードを書いてIntermediate Language(IL)にコンパイルします。それぞれiOSとAndroidが分かる言語で変換されますのでスマホから実行できます。ウェブアプリはブラウザやウェブビューが提供する領域までしか機能を利用できませんが、クロスプラットフォームアプリはiOSやAndroidのOSのもっと深い領域まで色んな機能を使えるように作られてます。ネイティブアプリに比べるとパフォーマンスが落ちるという限界はありますが、それでも利用者が不便を感じないようなレベルでかなりいいクオリティーのアプリを作れます。

<長所>
コードを一つ書けば、2つのプラットフォーム(iOS / Android)で動作するので、開発時間を短縮できる。また、色んな分野にいる開発者が集まりやすいプラットフォームなので、色んな形のライブラリーやチュートリアルとコミュニティが形成されている。
f:id:msoh:20201214160851p:plain
f:id:msoh:20201214160859p:plain
f:id:msoh:20201214160909p:plain
<短所>
色んな長所があるがそれでもネイティブアプリではない。パフォーマンスイシューもある。ただし、決してクロスプラットフォームアプリのパフォーマンスが遅いというわけではなく、有名な大手企業で開発したアプリの一部もReact Nativeで動いているのもたくさんある。それでもパフォーマンスが少し遅くなるという問題が発生する可能性はある(変換するプロセスがあるため)。
<スマホの資源・機能の活用度>
f:id:msoh:20201214161133p:plainf:id:msoh:20201214161152p:plain

3.ネイティブアプリ

 ネイティブアプリは、文字の通り、AndroidやiOSのネイティブコードで開発したアプリです。スマホが誕生してから一番基本的な形態のアプリで、AndroidやiOSのOS環境の専用として作られたソフトウェアです。

f:id:msoh:20201214161308p:plain

iOSの場合、昔はObjective-C、最近はSwiftで開発されており、AndroidならJavaやKotlinで開発されています。AndroidとiOSそれぞれのガイドとフレームワークにそって開発が行われます。また、それぞれの環境の専用で開発されるため、AndroidやiOSにある全ての資源と機能を活用できます。なお、AndroidやiOSの最新機能の搭載が容易にでき、スマホのカメラや各センサー、ハードウェアの資源、内部ファイルシステムなどを、それぞれのOSが許容する限りいくらでも直接に活用できます。そのため、スマホの性能を最大限に活用する高クオリティーのアプリを作れます。

<長所>
ネイティブアプリだからこそスマホが持っている強力な機能を使える。
なんといってもネイティブなので、パフォーマンスがいい。
例えば、3Dで顔をマスクするカメラアプリのような高パフォーマンスが必要な場合でもいいパフォーマンスを出せる。
f:id:msoh:20201214161349p:plain
<短所>
iOSとAndroidのそれぞれプラットフォームの言語を習得する必要がある。また、iOSならXcode、AndroidならAndroid Studioについて習得が必要。学習コストが高い。
運用の面ではバージョンアップしたアプリをそれぞれのストアに登録するタイミングの調整が必要。
<スマホの資源・機能の活用度>
f:id:msoh:20201214161420p:plainf:id:msoh:20201214161429p:plain

 

おわりに

 今回はハイブリッドアプリ、クロスプラットフォームアプリ、ネイティブアプリについて簡単に比較してみました。上記の他にPWA(Progressive Web Apps)プログレッシブウェブアプリというのもあります。PWAは上記で書いたものとは仕組みが違いますが、代替するような手段としても考えられますので、ご興味のある方はこちらも調べてみて頂ければと思います。どのアプリであっても目的に合う適切な開発ができれば、そのアプリがベストソリューションになると思います。スマホアプリについて理解するのに少しでもご参考になれたなら幸いです。