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

縦書きにWebフォントを使いたい!けど使えるのか検証してみた縦書きにWebフォントを使いたい!けど使えるのか検証してみた

最近、IT系の記事や勉強会でWebフォントの話題を見かけるようになってきました。以前の記事では、Webフォントサービスのデコもじを使ってRIAXDNPブログの記事タイトルのフォントを変えてみましたが、今回は縦書きにした文字にWebフォントを適用できるのか検証してみました。検証環境はWindows版Safari(5.1.2)とMac版Safari(5.1.1)です。 WEBフォントを使う Webフォントサービスを使わずに自分でフォントを定義する場合、フォントのライセンスに注意してください。今回のフォントデータはデモ用に弊社の秀英体開発室からお借りしました。CSS3では以下のように@font-face規則を使って、フォントを定義することができます。 @font-face {font-family:’DNPShueiMinPr5B’;      src:url(‘../../fonts/DNPShueiMinPr5-B.otf’) format(‘opentype’);} .myFontStyle {      font-family:’DNPShueiMinPr5B’;}

WebフォントをSVGからOTFに切り替えた際のハマりポイントあれこれWebフォントをSVGからOTFに切り替えた際のハマりポイントあれこれ

先日、1年ほど前に公開したスマートフォン向け秀英体見本帳を更新しました!スマートフォン向け秀英体見本帳は、モバイルブラウザを対象としたWebフォントを使った縦組み表現に挑戦したコンテンツです。スマートフォン向け秀英体見本帳はこちらから、推奨動作環境等はこちらをご覧ください。 更新、といっても、見た目はほとんど変わらないのですが、Webフォントのフォント形式をSVGから他の形式に切り替えました。SVGフォントの場合は不具合なく表示されていたものが、WOFFやTTF、OTFに切り替えた場合に表示の不具合が出たりして意外に大変でした。モバイルブラウザでのWebフォント表現のノウハウが少なく、問題が不明で未解決のものもありますが、今回ハマったポイントをご紹介します。 検証端末 今回の検証に用いた端末の端末名/OSバージョン/ブラウザは以下です。 AQUOS PHONE SERIE ISW16SH

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