主要なモバイルUIフレームワークを比較してみました

WEB標準技術でアプリケーションを開発するためのUIフレームワークが増えてきました。モバイルWEB向けの業務アプリケーション開発に有用なUIフレームワークを選定するため、主要UIフレームワークのUIコンポーネントを中心に調査を行いましたのでその結果をご紹介したいと思います。
ドキュメントベースではありますが、業務アプリケーションの開発に必要な、フォーム要素やグラフ等の各種コンポーネントが揃っているか、スタイルのカスタマイズ有無、複数人開発に対応するためMVCフレームワークが統合されているか等に注目し調査を進めました。以下の項目に分けてご紹介していきます。

  • 調査対象フレームワークの概要
  • 対応環境
  • 主要UIコンポーネント
  • その他(CSS,MVCフレームワーク統合有無など)
  • 特徴

調査対象フレームワークの概要

 以下6つのフレームワークを対象に調査を行いました。

  • 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 Touch2Kendo UI MobilejQuery MobileDojo MobilejqMobiLungoJS
バージョン2.0.1.12012.2.9131.2.01.81.11.2
提供元Sencha Inc.Telerik Inc.The jQuery FoundationThe Dojo FoundationappMobitapquo Ink.
URLwww.sencha.com/
products/touch/
www.kendoui.com/
mobile.aspx
jquerymobile.comdojotoolkit.org/
features/mobile
jqmobi.comwww.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
ベースExtJSjQueryjQuerydojojQ.Mobi
(非依存型)

[追記及び訂正履歴]
※jQuery MobileのライセンスをMIT,GPLのデュアルライセンスからMITに修正致しました (2012/10/4)
※国内代理店に関する記述を削除致しました(2012/10/4)

対応環境

 次に、対応環境についてです。OSのバージョンの細かい違いはあるものの、iOS,Androidにはどのフレームワークも対応しているようです。jQuery Mobileのみ、WindowsPhoneにも対応しています。また、Sencha Touch2はネイティブ化にも対応(正確にはPhoneGapのラッパーのようなものが用意されているようです)している点が特徴的です。他のライブラリももちろん、PhoneGapと組み合わせばネイティブ対応可能だと思われます。
 

 Sencha Touch2Kendo UI MobilejQuery MobileDojo MobilejqMobiLungoJS
iOS
Android
WindowsPhone×××××
otherBlackberryBlackberryBlackberryBlackberry
ネイティブ化対応

主要UIコンポーネント

 各フレームワークを用いて主要なUIが表現可能か、APIドキュメントや公式のデモページを参考に表にまとめてみました。下記の表は、コンポーネントのクラスとしての存在有無ではないことをご了承ください。基本的なUIの名称はiPhoneのUIの名称を一部参考にしています。
 SenchaTouch2はビデオやオーディオのラッパーAPIまで豊富なコンポーネントが用意されています。jqMobiやLungoJSはモバイル向けWEBページ用のライブラリという印象を受けました。インナースクロールやfacebookライクなサイドナビゲーションメニューがあるので、このようなUIを備えたWEBページを作成したい際には有用かもしれません。
 

 Sencha Touch2Kendo UI MobilejQuery MobileDojo MobilejqMobiLungoJS
ビュー
ページトランジション
ナビゲーションバー
(ヘッダー)
ツールバー
(フッター)
×※××
タブバー
セグメンテッドコントロール×
ボタン
テーブルビュー(リスト)
フォーム要素
スライダー××
ピッカー××××
アラートビュー○※○※×
ポップオーバービュー○※×
アクションシート××××
グラフ××××
表組××××××
カレンダー××××××
ビデオ/オーディオ×××××
その他・カルーセル
・Pull to Refresh
・インナースクロール
・カルーセル
・Pull to Refresh
・レイアウトグリッド・カルーセル・インナースクロール
・カルーセル
・サイドナビゲーションメニュー
・インナースクロール
・サイドナビゲーションメニュー

※はドキュメントのみでは実装可否がはっきり確認しきれなかった部分です。

その他

その他、MVCフレームワークやテストフレームワークの統合有無、スタイルのカスタマイズ可否についてです。Kendo UI Mobile、jQuery Mobile、jqMobiはWeb上でテーマを編集し、ダウンロードできるツールが提供されています。Dojo MobileのスタイルはLESS、Sencha Touch2のスタイルはSASSで管理されているのが他のフレームワークとの大きな違いです。
 

 Sencha Touch2Kendo UI MobilejQuery MobileDojo MobilejqMobiLungoJS
スタイルのカスタマイズ
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などを必要としない非依存型

Related Post

Parse.comを使ったサーバサイド実装不要のフロントエンド開発[前編]Parse.comを使ったサーバサイド実装不要のフロントエンド開発[前編]

ParseはBaaS(Backend as a Service)と呼ばれる、アプリに共通して必要となるバックエンドの機能を提供するクラウドサービスのひとつです。BaaSを利用することで、データの同期やユーザ管理、プッシュ配信、ソーシャル連携など、アプリごとに独自の開発を行うことなく効率よく開発を進めることができます。  Parseでは、iOS、Android、JavaScript、.NET、OS Xと様々なプラットフォーム向けのSDKが提供されています。今回はこのParseのJavaScript SDKを使ってみます。 新規アプリケーションの作成

HTML5を使うべき10の理由HTML5を使うべき10の理由

プラグイン vs HTML5 それぞれの「適材適所」のエントリーの解説編です。続いてHTML5の判断材料です。同じく10項目挙げてみました。また文章ばかりです。 ○スマートフォン向けである(特にiOSも対象) iOSではPlug-inが排除されているのですから、何の余地もありません。またターゲットをAndroid等のスマートフォンに特化できるなら、HTML5が良いかと思います。Flash PlayerはAndroid OS2.2から対応していますが、パフォーマンスを出すには繊細にチューニングした開発が必要です。ただし、注意が必要なのは、HTML5で画面を作ったからといって、PCでもスマートフォンでもOK!という訳にはいきません。タッチやジェスチャに対応した画面作りが必要で、AppleのUIデザインガイドラインに従わないと違和感のある画面となります。

Kii Cloud JavaScript SDKを使ってアカウント登録とログイン機能を実装するKii Cloud JavaScript SDKを使ってアカウント登録とログイン機能を実装する

本記事は、Kii Cloud JavaScript SDKを使ったサーバサイド実装不要のフロントエンド開発[準備編]の続編です。準備編では、新規アプリケーションの作成からKii CloudのJavaScript SDKの概要までをご紹介しました。今回は、アカウント登録とログイン機能の実装についてご紹介します。※JavaScript SDKのv2.1.20から仮ユーザーの機能が追加され、アカウント登録をしない状態でもデータ操作が可能となったようです。 アカウント登録