IT

Ionicが最高のフレームワークである理由

Ionicとはなにか

lonicは、HTMLやJavascript(TypeScript)系のWeb技術を使ってAndroid, iOSのスマホアプリやWindows,Mac向けのデスクトップアプリを作るフレームワークです。

iOS用にSwiftで作成し、Android用にKotlinで作成するといった方法ではなく、Ionicで作ったものをさまざまなプラットフォーム上で動作するアプリに出力することができます。

「Web Components」というWeb標準の技術が採用されており、もっとも推奨されているのはAngularですが、ReactやVueからも利用できます。また、実際はCpacitorというそれぞれのNativeとWeb技術を結びつけるフレームワークと組み合わせて使用します。

CordovaをはじめとしてWeb技術でスマホアプリを作成するプラットフォームはほかにもありますが、Ionicの大きな特徴は、

  • UIがNativeと全く同じ
  • CordovaよりNativeに近いので自由に開発できる

という点です。最高のフレームワークであるIonicについて特徴を解説します。

lonic Framework – lonic Framework 日本語ドキュメンテーションURL https://ionicframework.jp/docs/

最高のUI

わたしは以前Cordovaでスマホアプリを開発していました。HTMLとJavaScriptで記述したWebページがそのままAndroid, iOSで動作するアプリケーションになったことの感動を覚えています。

それでも開発を進めていく中でNativeではないことがバレたくないという気持ちが湧いてきました。決してCordovaが悪いわけではないのですが、HTMLとJavaScriptで記述したWebページがそのままアプリになる以上、どうしても素人感が出てしまうのです。例えばボタン一つとってもbootstrapを使えばWebでは綺麗に見えるのにアプリで見ると「なんか違う」感が拭えなかったです。Monacaのonsen.uiというものでNativeの見た目を再現できるということでしたが、個人的な感想としてMonacaは

  • ビルドがあまりにも遅すぎてPDCAが回せない
  • 有料でも作成できるプロジェクト数が不便を感じるほど限られている
  • Monacaという名称やonsen.uiという名前がときめかない
  • Monacaで一度作ると、Monaca上でしかメンテナンスできなくなる

というデメリットを感じ使用を中止しました。特に最後の「Monacaで一度作ると、Monaca上でしかメンテナンスできなくなる」というのは強烈で、有料プランでエンパワーメントしてもらえると思っていたのに、実際は囲い込まれているということで非常に残念に思いました。

その点、IonicはiOS/Android別の美しいUIを提供してくれます。IonicがAngularやReactから使えることからわかるように、Ionicの本質はUIコンポーネントのライブラリです。あるコンポーネント(例えばボタン)を設置したとしましょう。そうすると、iOSで表示した場合はAppleのHuman Interface Guidelinesに基づいたデザイン、Androidで表示した場合はマテリアルデザインと自動的に表示が切り替わります。これは実際に書いていて最高にウキウキするIonicの素晴らしいところです。

また、こちらの記事(Cordovaをdisる人類全員に読んでほしい「Cordovaつらいを考える」)に記載されているように、60fpsでの表示で滑らかに動くことや、無限スクロールが可能なことも拡張性を保証する大事なポイントだと考えています。

ページ遷移時の動作が最高

最近、スマホ画面の下にTabがあるアプリケーションが多くあります。Cordovaでも当然実装できるのですが、音楽を入れた時にページが切り替わるたび音楽が初めから再生されるという非常に残念な思いをしたことがあります。

その点、IonicはTabを切り替えてもバックグラウンド音楽が途切れない。。Nativeで開発しているわけではないのに、Nativeで違うことで悩まされないというのは地味ですが大きいと考えています。

この辺を非線形ナビゲーション」と「ナビゲーションスタック」というらしいですが、Ionicのドキュメントからコアコンセプトのページがなくなっていたので詳細をしらべることができませんでした。

バンドルサイズが小さい

特にAndroidでは顕著ですが、アプリケーションのバンドルサイズは非常に重要視されています。Androidアプリを開発されている方はご存知かもしれませんが、近年、Androidアプリの拡張子は.apkではないのです。デベロッパーはaboというプレビルドしたような形でアップロードしておいて、ユーザーがインストールする際、そのデバイスに最適化したapkをGoogleが生成してダウンロードします。日本のように通信環境が整っていない国も多いなかで、バンドルサイズを小さくすることがいかに重要視されているかわかると思います。

その点、lonicは、「Stencil」というWeb Components開発ライブラリによって作られており、バンドルサイズはとても小さくなります。

また、LazyLoadingという最初に全てを読み込むわけではなく、必要なものはあとで読み込む機能を実装しているので、軽量に高速で動作します。LazyLoadingはAngularにも実装されているので迷うかもしれませんが、こちらに英語ですがIonic X AngularにおけるLazy Loadingの実装方法について記事がまとまっています。このように公式が充実しているのもIonicのいいところです。

https://ionicframework.com/blog/how-to-lazy-load-in-ionic-angular/

なお、Angularについて解説した記事はこちらですので、Angularについて知りたい方はどうぞ。

Nativeの機能にアクセスできる

Ionicは(Cordovaもそうですが)Webページをアプリにできるだけではなく、そこにNativeのカメラ、位置情報などのAPIにアクセスできることは大きな魅力です。Ionicにはさまざまなプラグインがありますので、これを利用することでWeb技術を使いながら、それを超えたアプリケーションを作成することが可能です。

Ionicプラグインの導入方法

総括、その他

 Ionicについて簡単に解説しました。拡張性が担保されたフレームワークでプロジェクトをひとつ作り、それをそれぞれの最高のUIでクロスプラットフォームに出力できる点が一番気に入っています。

IonicをAngularで使って、写真から文字情報を抽出して爆速でレポートや記事を作成するアプリを作成しています。無料なのでよかったらどうぞ。

iOS => https://apps.apple.com/app/id1497498494
Android => https://play.google.com/store/apps/details?id=com.rainbowsv2.ocr

(参考文献)

ABOUT ME
Faust
1980年代生まれで東京都府中市育ち。大学は物理化学専攻してメーカへ。 Engineer of Python, Angular. Analyzing data and building app at Awesome Rainbows LCC. #SDGs #Python

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA