リモート開発メインのソフトウェア開発企業のエンジニアブログです

ハイブリッドアプリの最新トレンド

今までネイティブでアプリの開発を行ってきた方でも、今後ハイブリッドアプリ(クロスプラットフォームアプリ)での開発への切り替えを検討中の方も多いのではないでしょうか。私自身もハイブリッドでの開発経験はまだないので、どのような選択肢があり、今どのようなプラットフォームが人気なのかを調べてみました。

ネイティブ・ハイブリッドアプリのそれぞれの特徴

ハイブリッドアプリには、ざっとWebViewを使ったもの(Cordova系のIonic, 国産だとMonacaなど)とWebViewを使わないもの(React Native, Xamarin, Flutterなど)に分けることができます。ネイティブアプリも含めてまずはそれぞれの特徴を簡単におさらいしてみます。

ネイティブアプリ

iOSならObjective-CまたはSwift、AndroidならJavaまたは最近注目されているKotlinを使って作成されたアプリ。計算量が多いゲームなどのアプリでは今後も変わらずネイティブアプリが第一の選択肢となると思われます。

メリット

  • ゲームなどの重い計算があるものでも対応できる
  • レスポンスの速さなどの面において優れている
  • OSの最新のアップデートにも対応できる
  • ユーザーにとって使い慣れたOSのコンポーネントを使うことができる

デメリット

  • iOS/Androidに対して別々に開発をする必要があり、使用言語も異なるので通常二つのチームで別々に開発を行うことになる。当然、修正や機能追加も別々に行う必要がある。

WebViewを使ったものについて

htmlを描画して、これをアプリ内のウェブ表示を行うための機能(WebView)を通して表示することになるハイブリッドアプリ。

メリット

  • html/CSS/Javascriptなどのウェブ開発の技術を使用してアプリを作成することができる。
  • 共通化できる部分が多いので開発のスピードが速い

デメリット

  • WebViewを通しての表示になるので、(最新の機種ではあまり問題にならないとは言われているものの)速度などパフォーマンスはネイティブアプリに劣ると言われている
  • ユーザーが使い慣れたネイティブのUIコンポーネントを利用することができない
  • 計算量の大きなゲームなどには向かない

Webviewを使わないクロスプラットフォームアプリ

XamarinやReact Nativeや最近登場したFlutterなど、WebViewを通さずにそれぞれの使用言語をネイティブのコードを変換することで表示するタイプのクロスプラットフォームアプリが近年のトレンドになっています。ネイティブアプリと変わらないユーザーエクスペリエンスを得ることができると言われていて、特にFacebookが開発したReact NativeはInstagram、AirBnb、Uber、Skypeなどの誰もが知っている有名なアプリでも使われています。

メリット

  • 表示にはWebViewなどを通さずにネイティブのコードに変換して表示することになるのでネイティブに劣らないパフォーマンスを得られる
  • ユーザーが使い慣れた各プラットフォームのUIコンポーネントを使うことができる(Flutterなど独自のものを使うケースもある)
  • それぞれのプラットフォームに対してコードを書く必要がある部分もあるが、多くの部分でコードを共通化することができるので開発のスピードが速い

デメリット

  • アプリのサイズやメモリの消費量などがネイティブアプリに比べて大きいことがある
  • 計算量の大きなゲームなどには向かない

 

どのようなプラットフォームがあるのか

次にハイブリッドアプリ(クロスプラットフォームアプリ)の主なプラットフォームについてそれぞれの概要を簡単にまとめました。

Titanium

WebViewを使わずにクロスプラットフォームのアプリを作ることができる。リリースが2008年と長い実績があります。

リリース 2008年
運営会社 Appcelerator
料金 オープンソース版は無料だが制約がある
WebViewの使用 No
使用言語など JavaScript

PhoneGap(Cordova)

WebViewを利用するCordovaベースのプラットフォーム。ビジネス向けのハイブリッドアプリを提供するプラットフォームは、ほとんどがCordovaをベースにしていますが、(わかりづらかったのですが)現在はオープンソースのCordovaをもともと所有していたAdobeからの配布版がPhoneGapのようです。

リリース 2011年
運営会社 Adobe
料金 無料
WebViewの使用 Yes
言語・ライブラリなど JavaScript

 

Moba Pro

Monaca

Cordovaベースの国産のプラットフォーム。もともとはクラウドベースでアプリを作成できることが特徴だったようですが、ローカルでの開発にも対応しているようです。国産のプラットフォームということで日本語でのサポートを受けることができるのはメリットになりそうです。

リリース 2011年
運営会社 アシアル株式会社
料金 有料(個人使用のみなどの無料プランも有り)
WebViewの使用 Yes
使用言語など JavaScript, Angular

Xamarin

マイクロソフトが提供しているプラットフォーム。C#/.NET/Visual Studioでの開発に慣れている人にとっては魅力がありそうです。

リリース 2011年
運営会社 Microsoft
料金 無料(一定規模以上のエンタープライズ向けは有料)
WebViewの使用 No
使用言語など C#, .NET

Ionic

CordovaベースのWebViewを使用するプラットフォームで比較的新しい。多くの企業向けアプリなどに使用されているようです。

リリース 2013年
運営会社 Ionic
料金 無料
WebViewの使用 Yes
使用言語など TypeScript, Angular

React Native

Facebookが提供しています。Instagram、AirBnb、Uber、Skypeなどの多くの有名アプリがReact Nativeで作られています。

リリース 2015年
運営会社 Facebook
料金 無料
WebViewの使用 No
使用言語など JavaScript, React

Native Script

TypeScript, Angularを使用して開発ができる。React Nativeに比べると使用例は少ないようですが、評価は高いようです。

リリース 2015年
運営会社 Progress
料金 無料
WebViewの使用 No
 使用言語など Javascript, TypeScript, Angular

Flutter

Googleが提供する新しいツール。去年リリースということでまだ利用例は少ないようですが、評判は良さそうでした。描画にはOSのUIのコンポーネントは使えず、独自のコンポーネントを利用するようですが、iOSそっくりのコンポーネントもなども用意されていました。

リリース 2017年
運営会社 Google
料金 無料
WebViewの使用 No
使用言語など Dart

 

Google Trendsで比べてみた

あくまで参考の情報ですが、それぞれのプラットフォームをGoogle Trendsで比べてみました。XamarinとReact Nativeが一番多かったのでこれを固定にリリース順に比べてみました。

※PhoneGapとCordovaは同じようなものですが、比較に両方共入れています。また、Monacaは英語圏での使用はほとんどないようでほぼ数値がゼロでしたのでここでは除外しました。

企業向けのアプリなど、WebViewを使用するハイブリッドアプリも今後残っていくかと思いますが、2013年あたりに人気だったCordovaベースのPhoneGapは同じくCordovaベースionicに取って代わられた感じがします。また、React Nativeの注目がかなり高まっているようですが、Facebook提供ですでに有名アプリに多く使われているReact Nativeが注目されるのは当然かも知れません。

今後Googleが提供するFlutterの人気が高まっていくことが予想されますが、どうなっていくのか注目です。調べたところ概ね評価が高く、クロスプラットフォームの未来だ!と言っているような意見もありました。まだ採用しているアプリが少ないということですが、今後有名アプリで採用されたりすると将来的にReact Native以上に人気のプラットフォームになるかもしれません。

最後に

アプリ開発のトレンドの移り変わりは激しいものですが、今後ネイティブアプリに対してクロスプラットフォームアプリの割合が増えていくことは間違いないと思います。クロスプラットフォームの選択肢の中では現在はReact Nativeが優勢なようですが、5年後くらいには状況はすっかり変わっているのは間違いないでしょう・・・!(個人的にはFlutterに興味を持ちましたが、まだまだ開発コミュニティが発展していくのもこれからのようですので、2018年時点での現実的な選択肢ですとReact Nativeになりそうです😎)

← 前の投稿

Amazon EKSが一般公開されたので使ってみた

次の投稿 →

DockerでAWS Lambda用のNode.jsネイティブモジュールをビルドする

コメントを残す