主要なモバイル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

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

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

IllustratorからSVGを書き出して、SVGアニメーションを追加するIllustratorからSVGを書き出して、SVGアニメーションを追加する

iOS5のアップデートに伴い、Mobile SafariがインラインSVGに対応しました。そこで、このiOS5のMobileSafari向けに、キャラクターのイラストをIllustratorで書き出し、SMILアニメーションに挑戦してみました。   SVGをアニメーションさせる際の選択肢 SVGで書き出したグラフィックをアニメーションさせる場合、DOM操作、SMILアニメーションなどいくつかの方法があります。 ・SMILアニメーション・CSS3アニメーション・JavaScriptでの属性値変更・Canvasアニメーション SVGの仕様は非常に大きく、アニメーション機能としてSMIL Animationをサポートしています。SMILとは、Synchronized Multimedia

Sass/Compassを使ってCSSスプライトに挑戦してみました。Sass/Compassを使ってCSSスプライトに挑戦してみました。

CSSスプライトを作成する機会があったため、最近よく耳にするSassとCompassを使ってみました。CSSスプライトとは、複数の画像を1枚の画像としてまとめ、CSSで表示範囲を指定することにより表示する手法です。画像のリクエスト数を削減することができるため、高速化の手法の1つとして利用されています。 Sass/Compassについて  Sassとは、CSSの拡張メタ言語です。独自の文法で記述したファイルをコンパイルして、CSSを生成します。独自の文法といっても、CSSをそのまま書くこともできますし、CSSをベースに拡張されているので学習コストは低いです。変数や演算、ミックスインと呼ばれる関数のような仕組みや継承、条件式などの文法があり、CSSの冗長性や保守性、生産性の悪さを解消することができます。公式サイトは英語ですが、enja-ossというプロジェクトでリファレンスの日本語訳が進められているようです。 次にCompassとは、sassのフレームワークで、様々なミックスインやスタイルが用意されています。CSSスプライトをはじめ、ベンダープレフィックスを自動で追加してくれたり、sassファイルの変更を監視して自動でコンパイルしたりと便利な機能が満載です。今回は、このCompassのCSSスプライトの機能を使ってみます。Sass/Compassのインストール、設定ファイルの記述については割愛します。 CompassでCSSスプライト  CSSスプライトを生成するためには、まずSass管理下の画像ディレクトリ内に任意のディレクトリを作成し、スプライトの元となる画像を用意します。今回は以下のような構成で画像を用意しました。 続いて、.scssファイルを用意します。最低限書かなければいけないのは、以下の4行です。この4行で、指定したフォルダ内の画像をCSSスプライト画像にまとめ、表示用クラスを生成することができます。  @charset “utf-8”; @import