今回はモバイルアプリ作成時に使用できるUIフレームワークの違いや特徴を(大雑把に)まとめてみます。※あくまでも個人的な意見です。
対象のフレームワークは以下の4つです。
- jQueryMobile:http://jquerymobile.com/
- Ionic:http://ionicframework.com/
- OnsenUI:http://ja.onsen.io/
- Famo.us:https://famo.us/
上記4つはまず2つに大別できます。
すなわち、jQuryMobile or **その他(Ionic, OnsenUI, Famo.us)**です。
jQueryMobile or その他のフレームワーク
この2つはどちらもスマートデバイス用アプリ向けUIの作成を目的としていますが、主な違いとして
jQueryMobileはWebアプリ用のUIの作成を主目的としており、Ionicなどはハイブリッドアプリ用UIの作成を主目的としていることが挙げられます。
もちろん、jQueryMobileでハイブリッドアプリのUIを作ったり、その他のフレームワークでスマートデバイス用のWebアプリのUIを作成することは可能です。
また、jQueryMobileは一般的にパフォーマンスがよくないと言われており、これに対してIonicなどはパフォーマンスを改善する工夫が凝らされているということにも注目すべきかと思います。
Ionic or Onsen UI or Famo.us
これらは全てハイブリッドアプリのUIを作成することを主目的としているフレームワークです。
まずはそれぞれの特徴を以下にまとめます。
Ionic
- AngularJSをベースとしている
- Android 4.0以上(2.3系にも一部対応)、iOS 6以上に対応している
- Cordova, PhoneGap, Trigger.ioをサポートしている
- GUIベースでIonicアプリのテンプレート(UI)が作成可能な、Ionic Createrを提供している
- SASS(Syntactically Awesome Style Sheets)を用いて独自のUIを実装できる
- 公式のフォーラムが活発で、StackOverflowなどの投稿も多く比較的情報が探しやすい
Onsen UI
- AngularJS, jQueryで利用できる
- Android 2.3以上、iOS 6以上に対応の他、FirefoxOS, Chrome, Safariに対応している(Windows Mobile 8.1にも対応予定)
- Cordova, PhoneGapをサポートしている
- Monaca IDEを使用してテンプレートをカスタマイズできる
- CSS周りに、パフォーマンス重視のTopcoatライブラリを使用している
- 和製のフレームワークである(日本語のドキュメントがある)
Famo.us
- AngularJSとの連携が可能
- Android 4.1以上、iOS 4.3以上、Kindle, FirefoxOSに対応している
- Cordova, PhoneGap, Trigger.io, Crosswalkをサポートしている
- 独自のレンダリング技術を採用し、60fpsの高パフォーマンスを発揮できる
- 3D物理エンジンが組み込まれており、より直観的なアニメーションを実現できる
以上がそれぞれの特徴としてあげられますが、ここからは個人的な意見を述べたいと思います。
まずIonicですが、上記3つのフレームワークの中で最初に登場したこともあり、コミュニティが広くかつ活発で、情報が見つけやすい(学習しやすい)というのが最大のメリットではないかと思います。
また、公式のGet Startedが非常にシンプルでわかりやすく、比較的すぐに試せるということもよい点ではないでしょうか。
反面、パフォーマンスの観点から見ると他2つのフレームワークよりも多少見劣りするという印象を受けました。
続いてOnsen UIですが、現時点での対応プラットフォームが多く、iOSやAndroidなどのモバイルアプリのみでなくChromeやSafariといったWebブラウザ上での動作もサポートしていることがメリットだと思います。
また、日本人としてはやはりドキュメントが日本語で用意されているのは嬉しいポイントですね。
ただ、Ionicと比べると普及具合に難があり、インターネット上でサンプルやバグの情報などを探すのには多少骨が折れそうだという印象を受けました。
最後にFamo.usですが、特筆すべきメリットはなんといってもパフォーマンスの高さです。こちらにあるサンプルをいくつか試してみましたが、圧倒的な滑らかさに驚かされました。
3つの中で最も後発ということもあり、Onsen UI同様サンプルなどを探すことが難しかったり、デフォルトのテンプレートやGetting Startedのドキュメントが不足していたりと、比較的敷居が高い印象は受けましたが、今後が一番楽しみであるフレームワークと言えそうです。
最後になりますが、どのフレームワークもそれぞれのメリットを持っており、それゆえに何を使えばよいか迷うことは避けられないと思います。
そんなとき、今回の内容が少しでも役に立つことを願っています。
※記載している情報に間違いなどあれば、ご指摘いただけると嬉しいです。
参考:
http://www.gajotres.net/ionic-vs-onsenui/
http://www.gajotres.net/best-html5-mobile-app-frameworks-famo-us-review/
https://www.airpair.com/ionic-framework/posts/hybrid-apps-ionic-famous-f7-onsen