なにこれ

クロスプラットフォームアプリを開発する手段はいくつかありますが、とっつきやすそうなIonicについて調査しました。実装方法というよりは、全体像と、React Native・Flutterとの比較についてまとめています。

📝私はWeb開発の経験はありますが、Ionicの経験があるわけではなく、これからやってみようという段階です。 そのため本記事はあくまでも調査結果をまとめたもので、実際の開発の経験に基づくものではありません。

Ionic概要

クロスプラットフォームアプリをWebの技術(HTML/CSS/JS)を使って作るためのフレームワークです。 iOS・Android・Electron・Web(PWA)などの複数の環境で動作させ、ネイティブ機能にアクセスするためのCapacitorと、 WebComponentベースのネイティブ風なUI Componentから構成されます。 UI Componentは、素のHTML/CSS/JSでも使えますし、SPAフレームワーク(Angular/React/Vue)とあわせても使えます。 それ以外にも、CLIやCI/CD自動化ツール、マーケットといった開発を支えるための周辺機能や、企業向け有償サポートも提供しています。

Ionic全体像

アプリ開発からストア公開までの手順の中でIonicが提供する機能は以下の図の青背景・青文字で示してある部分です。

ionic-landscape

以下で機能ごとの概要を説明します。

UI Component

参考: Ionic公式ドキュメント: UI Component

コア機能はWebComponentで作られており、素のHTML/CSS/JSでも使えますし、アダプターを使えばAngularやReactでも使えます(Vueは現在Beta版)。 以下の図のようにアプリが動作するプラットフォームによってCSSが切り替わるので、AndroidだとAndroid風、iOSだとiOS風のコンポーネントが表示されます。ダークモードにも対応しています。 クロスプラットフォーム開発の際、AndroidとiOS両方のスタイルに準拠したUIを設計するのは大変ですが、Ionicのようにあらかじめ双方のスタイルに対応したUIフレームワークを提供してくれているのはありがたいですね。

ionic-component-style

Capacitor

参考: Capacitor公式ドキュメント

クロスプラットフォームでアプリを動作させるためのライブラリです。ビルド時にはプラットフォームごとにWebViewを表示するネイティブアプリが生成され、WebView上でHTML/CSS/JSが動作します。 またGPSやカメラといったネイティブ機能にアクセスするためのAPIをプラグインとして提供しています。 プラグインには、Ionicが提供するプレミア版(企業向け有償サポートのみで使用可能)と、有志が提供するコミュニティ版の2種類があります。 Capacitor自身のプラグインだけでなく、Cordovaのプラグインも使用可能です。

Ionic CLI

参考: Ionic公式ドキュメント: Ionic CLI

アプリの生成から、ビルド、実機プレビューまでの一連の操作ができます。 ビルド資産はプラットフォームごとにソースコードとバイナリが生成され、それ以降はAndroid StudioとXCodeで作業しますが、CLIはそれらIDEを起動するところまでやってくれます。 Angularで開発する場合は、ionic generateコマンドでコンポーネントやサービスといったソースコードを自動生成できる強力な機能があります。 npmで提供されており、グローバルインストールの必要はなく、プロジェクトごとにローカルインストールして使えます。

Appflow

参考: Ionic公式ドキュメント: Welcome to Appflow

複数のIonicアプリを管理できるWeb上のダッシュボードです。 アプリの作成からストアへの申請・公開までのすべての工程を管理し、それらを自動化できます。 一度公開したアプリは、Web資産(HTML/CSS/JS)であればストアの審査を介さずにリアルタイムで更新可能です(参考記事)。 Appflowはかなり強力なツールですが有料プランでしか使えないのが残念です。

Ionic Studio

参考: Ionic公式ドキュメント: Welcome to Studio

GUIでIonicアプリを開発できるIDEです。 こちらも有料プランでしか使えません。 今のところ、Angular Ionic 4.x+ にしか対応しておらず、個人的にはReactに対応したら使って見たいという気持ちです。 ionic-studio

Ionic Market

参考: Ionic公式ブログ: Introducing the Ionic Market: Buy and sell Ionic starters, plugins, and themes

Ionicのスターター、プラグイン、テーマが公開されているマーケットです。 無料のもの、有料のもの豊富に用意されており、自分で公開することもできます。 お高いですが作りこまれたものも用意されていますので、効率的に開発をすすめる上で見ておいて損はないと思います。 ionic-studio

Enterprise Support

参考: Ionic公式ドキュメント: Pricing

サブスクリプションは、HOBBY(無料)・LAUNCH(42ドル/月)・GROWTH(102ドル/月)の3種類で、それとは別に企業向け有償サポートを用意しています。Appflowのフル機能、Capacitorプレミアプラグイン(生体認証、オフラインストレージ、シングルサインオン含む)に加えて、Ionicのエキスパートによるコンサル、教育、コードレビューを受けられ、連絡窓口も用意されます。

公式ページ・コミュニティなど

公式ドキュメントに、大体の情報が載っており、参考記事へのリンクも多く掲載されているので、ココを起点に情報をたどるのが良さそうです。

Ionic、React Native、Flutter比較

Ionic React Native Flutter
開発元 Ionic
(2012年設立)
Facebook Google
GitHubスター 40.9k 86.8k 91.5k
言語 TypeScript, JavaScript TypeScript, JavaScript Dart
使えるSPAフレームワーク Angular, React, Vue(Beta版) - -
プラットフォーム iOS, Android, Web(PWAも対応可能), Electron iOS, Android, Web iOS, Android, Web, Windows, Mac, Linux
UI Web Component
(WebView上で動作)
ネイティブUI 独自UI
採用事例 NASAMcDonald'sDieselMarketWatchPacificaSworkit FacebookSkypeInstagramWalmartUber EatsAirbnb
📝AirbnbはReact Nativeからネイティブ開発にシフトしています。参考記事
Alibaba, Tencent, Square, Groupon, ebay, Google Assistant , Grab
ネイティブ上で動作する時のレイヤー layers-ionic layers-react-native layers-flutter
Qiitaの記事数とフォロワー数 546記事、290人 1501記事、741人
タグがreactnativereact-nativeに分かれていたので実際はこれより多いかもしれません。
1585記事、1155人

Ionic

👍 「現在世の中に広く普及しているWebの技術をつかって、1つのコードを書けばどこでも動くアプリ」というのがIonicのコンセプトにもなっているので、最大限Web開発の恩恵を受けることができます。SPAフレームワークやさまざまなHTML/CSS/JSライブラリ、Webを取り巻くエコシステム、チームで培ってきたWeb開発のやり方やノウハウ、これらを全て活かせますし、採用面においてもWeb開発のエンジニアを雇うことは、React NativeやFlutterのエンジニアを雇うより容易です。またフレームワークだけでなくCI/CD自動化やマーケットなども充実しており、企業向け有償サポートもあります。 Web開発をしてきた企業がモバイル開発に取り組む際は有力な選択肢の1つとなるでしょう。

❌ WebViewのためレンダリングパフォーマンスに限界があります。ゲームなどを作る場合は他2つを検討したほうが良さそうです。

📝ネイティブ機能の呼び出しに関しては、この記事のMike Hartingtonさんのコメントいはく「アプリ起動時のCordovaプラグインのロードが遅いと言われていたが、Capacitorプラグインになってから解消されている」らしいです。

React Native

👍 ネイティブのUIを使っているのでサクサク動きます。Reactの有識者であれば学習コストは低いです。Facebookをバックにした強大なコミュニティ、Instagramなど大手での採用事例も魅力です。日本語記事も多くあります。

❌ 用意されていないオリジナルのUIを作る場合はNativeの知識(Swift/iOS Kotlin/Android)が必要です。あとReact NativeはJSスレッド <===> ブリッジ <===> ネイティブスレッドのような仕組みで動作しますが、実装方法によってはJSスレッドに負荷がかかって遅くなることがあります。アニメーションにはとくに気を付けなければいけません。実際、パフォーマンスチューニング系の記事は多数あるのでハマりやすいポイントなのでしょう。

Flutter

👍 ネイティブのUIを使わずに独自のレンダリングエンジンでGPUを使って描画しているためパフォーマンスがネイティブ並みかそれ以上です。Googleという強大なバック、Alibabaなどの大手での採用事例があります。

❌ 2018年にv1.0がリリースで、まだ枯れていません。バージョンアップによる仕様変更もありえます。またFlutterで採用されているDartはまだあまり普及していない言語なので、学習コストがかかるうえに、独自のエコシステムを使う必要があります。採用面からみてもDart/Flatterエンジニアを雇うのは、他2つと比べて難しいでしょう。またUIがマテリアルデザイン固定なので、iOSユーザーからすると慣れないUIを使わされることになります。

まとめ

三者ともメリ・デメリがあってコンセプトも異なるので、自分たちの環境や重視する要素によってどれを選択するのかは変わってくると思います。Web開発に慣れ親しんだ私にとっては、学習コストが一番低いIonicでクロスプラットフォームアプリ開発を始めてみるのが良さそうだと感じました🍅

参考

Ionic公式ブログ

その他

Takumon
SIer's tech blog powered by Gatsby

Takumon Blog