WEB標準技術でアプリケーションを開発するためのUIフレームワークが増えてきました。モバイルWEB向けの業務アプリケーション開発に有用なUIフレームワークを選定するため、主要UIフレームワークのUIコンポーネントを中心に調査を行いましたのでその結果をご紹介したいと思います。
ドキュメントベースではありますが、業務アプリケーションの開発に必要な、フォーム要素やグラフ等の各種コンポーネントが揃っているか、スタイルのカスタマイズ有無、複数人開発に対応するためMVCフレームワークが統合されているか等に注目し調査を進めました。以下の項目に分けてご紹介していきます。
- 調査対象フレームワークの概要
- 対応環境
- 主要UIコンポーネント
- その他（CSS,MVCフレームワーク統合有無など）
- 特徴
調査対象フレームワークの概要
以下６つのフレームワークを対象に調査を行いました。
- Sencha Touch2
- Kendo UI Mobile
- jQuery Mobile
- Dojo Mobile
- jqMobi
- LungoJS
まず、各フレームワークの概要と、実際に開発で使用する場合に必要となりそうな、サポートやフォーラムの有無、APIドキュメントの充実度合いについてです。どのフレームワークもデモページ、APIドキュメント、フォーラムが用意されています。ドキュメントや書籍といった情報量はSencha Touch2やjQuery Mobileが
多そうでした（日本語書籍はありませんが、Kendo UI Mobile、Dojo Mobileもドキュメントの量はそこそこあります）。ベースとなるライブラリはjQuery、ExtJS、dojoから選ぶことになるので、使い慣れたライブラリのUIフレームワークを選ぶというのも一つの選択肢かもしれません。
| Sencha Touch2 | Kendo UI Mobile | jQuery Mobile | Dojo Mobile | jqMobi | LungoJS | |
|---|---|---|---|---|---|---|
| バージョン | 2.0.1.1 | 2012.2.913 | 1.2.0 | 1.8 | 1.1 | 1.2 |
| 提供元 | Sencha Inc. | Telerik Inc. | The jQuery Foundation | The Dojo Foundation | appMobi | tapquo Ink. |
| URL | www.sencha.com/ products/touch/ | www.kendoui.com/ mobile.aspx | jquerymobile.com | dojotoolkit.org/ features/mobile | jqmobi.com | www.lungojs.com |
| デモページ | www.sencha.com/ products/touch/ demos/ | demos.kendoui .com/mobile/ overview/index.html | jquerymobile .com/demos/ 1.2.0/ | demos.dojotoolkit .org/demos/ mobileGallery/ demo-iphone.html | www.jqmobi.com/ testdrive/ | lungojs.tapquo .com/index.html |
| 事例ページ | www.sencha .com/apps/70 | demos.kendoui .com/aeroviewr/ demos.kendoui .com/mobile/ simulator/ | www.jqmgallery.com/ | – | – | – |
| APIドキュメント | docs.sencha.com/ touch/2-0/ | docs.kendoui.com/ api/framework/ kendo | jquerymobile.com/ demos/1.2.0/ | dojotoolkit.org/ api/ | jqmobi.com/ documentation.php | www.lungojs.com/ api/ |
| ドキュメントの充実度 | ◎ | ○ | ○ | ○ | △ | △ |
| 日本語書籍の有無 | △ | × | ○ | × | × | × |
| フォーラムの有無 | ○ | ○ | ○ | ○ | ○ | ○ |
| ライセンス | ・free commercial ・GPL | ・GPL | ・MIT | ・BSD ・AFL | ・MIT | ・free commercial ・GPL |
| ベース | ExtJS | jQuery | jQuery | dojo | jQ.Mobi | – （非依存型） |
[追記及び訂正履歴]
※jQuery MobileのライセンスをMIT,GPLのデュアルライセンスからMITに修正致しました (2012/10/4)
※国内代理店に関する記述を削除致しました(2012/10/4)
対応環境
次に、対応環境についてです。OSのバージョンの細かい違いはあるものの、iOS,Androidにはどのフレームワークも対応しているようです。jQuery Mobileのみ、WindowsPhoneにも対応しています。また、Sencha Touch2はネイティブ化にも対応（正確にはPhoneGapのラッパーのようなものが用意されているようです）している点が特徴的です。他のライブラリももちろん、PhoneGapと組み合わせばネイティブ対応可能だと思われます。
| Sencha Touch2 | Kendo UI Mobile | jQuery Mobile | Dojo Mobile | jqMobi | LungoJS | |
|---|---|---|---|---|---|---|
| iOS | ○ | ○ | ○ | ○ | ○ | ○ |
| Android | ○ | ○ | ○ | ○ | ○ | ○ |
| WindowsPhone | × | × | ○ | × | × | × |
| other | – | Blackberry | Blackberry | Blackberry | – | Blackberry |
| ネイティブ化対応 | ○ | – | – | – | – | – |
主要ＵＩコンポーネント
各フレームワークを用いて主要なUIが表現可能か、APIドキュメントや公式のデモページを参考に表にまとめてみました。下記の表は、コンポーネントのクラスとしての存在有無ではないことをご了承ください。基本的なUIの名称はiPhoneのUIの名称を一部参考にしています。
SenchaTouch2はビデオやオーディオのラッパーAPIまで豊富なコンポーネントが用意されています。jqMobiやLungoJSはモバイル向けWEBページ用のライブラリという印象を受けました。インナースクロールやfacebookライクなサイドナビゲーションメニューがあるので、このようなUIを備えたWEBページを作成したい際には有用かもしれません。
| Sencha Touch2 | Kendo UI Mobile | jQuery Mobile | Dojo Mobile | jqMobi | LungoJS | |
|---|---|---|---|---|---|---|
| ビュー | ○ | ○ | ○ | ○ | ○ | ○ |
| ページトランジション | ○ | ○ | ○ | ○ | ○ | ○ |
| ナビゲーションバー （ヘッダー） | ○ | ○ | ○ | ○ | ○ | ○ |
| ツールバー （フッター） | ○ | ×※ | ○ | ○ | × | × |
| タブバー | ○ | ○ | ○ | ○ | ○ | ○ |
| セグメンテッドコントロール | ○ | ○ | ○ | ○ | × | ○ |
| ボタン | ○ | ○ | ○ | ○ | ○ | ○ |
| テーブルビュー（リスト） | ○ | ○ | ○ | ○ | ○ | ○ |
| フォーム要素 | ○ | ○ | ○ | ○ | ○ | ○ |
| スライダー | ○ | × | ○ | ○ | × | ○ |
| ピッカー | ○ | × | × | ○ | × | × |
| アラートビュー | ○ | ○※ | ○ | ○※ | ○ | × |
| ポップオーバービュー | ○ | ○ | ○ | ○※ | ○ | × |
| アクションシート | ○ | × | × | × | ○ | × |
| グラフ | ○ | × | × | ○ | × | × |
| 表組 | × | × | × | × | × | × |
| カレンダー | × | × | × | × | × | × |
| ビデオ/オーディオ | ○ | × | × | × | × | × |
| その他 | ・カルーセル ・Pull to Refresh | ・インナースクロール ・カルーセル ・Pull to Refresh | ・レイアウトグリッド | ・カルーセル | ・インナースクロール ・カルーセル ・サイドナビゲーションメニュー | ・インナースクロール ・サイドナビゲーションメニュー |
※はドキュメントのみでは実装可否がはっきり確認しきれなかった部分です。
その他
その他、MVCフレームワークやテストフレームワークの統合有無、スタイルのカスタマイズ可否についてです。Kendo UI Mobile、jQuery Mobile、jqMobiはWeb上でテーマを編集し、ダウンロードできるツールが提供されています。Dojo MobileのスタイルはLESS、Sencha Touch2のスタイルはSASSで管理されているのが他のフレームワークとの大きな違いです。
| Sencha Touch2 | Kendo UI Mobile | jQuery Mobile | Dojo Mobile | jqMobi | LungoJS | |
|---|---|---|---|---|---|---|
| スタイルのカスタマイズ | ○ SASS | ○ ThemeBuilder | ○ ThemeRoller | ○ LESS | ○ jqUi style builder | ○ |
| MVCフレームワーク | ○ | ○ | × | ○ | × | × |
| テストフレームワーク | ○ Jasmine | × | × | ○ Dojo Objective Harness | × | × |
特徴
最後にフレームワークの特徴をまとめてみます。ほとんどのフレームワークがHTMLの独自データ属性に属性を追加していく形をとっていますが、SenchaTouch2はJavaScriptでUIを構築します。Kendo UI Mobileや、Dojo Mobileは表示デバイスごとにネイティブに近いThemeを自動選択可能な仕組みがあることが特徴的です。
| Sencha Touch2 | ・豊富なUIコンポーネント ・MVCフレームワークやテンプレートエンジンを統合 ・JavaScriptベースでUIを構築 ・ネイティブアプリ化対応 |
|---|---|
| Kendo UI Mobile | ・MVCフレームワークやテンプレートエンジンを統合 ・表示デバイスごとにネイティブに近いThemeを自動選択可能 ・HTMLの独自データ属性に属性を追加していくことによりスタイルを定義 |
| jQuery Mobile | ・Abobe Dreamweaverが対応 ・HTMLの独自データ属性に属性を追加していくことによりスタイルを定義 |
| Dojo Mobile | ・表示デバイスごとにネイティブに近いThemeを自動選択可能（ver1.7から。） |
| jqMobi | ・jQ.Mobiを使用し、jQueryと互換性を備えている ・jQuery Mobileより軽量、高速 |
| LungoJS | ・jQueryやmootoolsなどを必要としない非依存型 |
