主要なモバイル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フォントを使用したスマートフォン向け秀英体見本帳を公開

秀英体とは、大日本印刷オリジナルの書体です。秋からMORISAWA PASSPORTで秀英角ゴシック、秀英丸ゴシックが提供開始されるにあたり、スマートフォン向け見本帳を作成しました。以前より、Flash版の見本帳を公開していましたが、今回はWebフォントサービスのRealTypeさまにご協力いただき、秀英明朝/秀英初号明朝/秀英横太明朝/秀英丸ゴ/秀英角ゴ金/秀英角ゴ銀の6 書体を試験的にWebフォント化し、HTML版を作成しました。推奨閲覧環境はiOS5以上、Android 3.2以上となっております。本コンテンツではWebフォント機能を使用しているため、環境によってはフォントが適用されない場合がありますので、あらかじめご了承ください。 Flash版はこちら>Flash見本帳HTML版はこちら>スマートフォン向け秀英体見本帳(※2013/3/29現在、リニューアルに伴い公開停止中です。ご迷惑をおかけいたしますが、よろしくお願い致します。)  チャレンジしたこと Webフォントでの縦書き表現 CSS3のwriting-modeプロパティを使用すると、テキストを縦書き表示することができます。しかし、writing-modeを指定したテキストにWebフォントを指定すると、かなだけグリフが寝てしまう問題(参照:縦書きにWebフォントを使いたい!けど使えるのか検証してみた)がありました。そのため、HTML版秀英体見本帳内の縦組み部分ではSVGのtext要素、JavaScriptを使った縦組みライブラリのNehanを使用して縦組みを表現しています。

【HTML5】iPhone向けWEBアプリで、Audioを使ってみてハマった点【HTML5】iPhone向けWEBアプリで、Audioを使ってみてハマった点

HTML5のAudio要素を使い、再生する音を遅延無く切り替える方法を、先週8/20(土)に開催された「第5回おばかアプリ選手権」で紹介しましたアプリ、iBooNを例に紹介したいと思います。 iBooNの仕組み iBooNは、Mobile Safari上で動作するWEBアプリです。Mobile Safariから加速度を取得(iOS4.2から加速度センサーに対応)し、前後のシェイクジェスチャ(ぶーんと走らせる動き)、左右の傾き(ドリフト)に応じて異なる車の音を再生させています。 当初は複数のAudioファイルをプリロードさせ、ユーザのアクションに応じて各ファイルを再生させる予定でしたが、Mobile Safariでは複数のAudioファイルをプリロードして保持しておくことが難しく、1音しかプリロードされた状態で鳴らなかったり(参照:iPhoneでHTML5のaudio要素を使うときに気をつけたいこと)、ユーザのアクションごとにAudioデータのロードでタイムラグが発生し、動きによって音が出ているという感じがありませんでした。  ポイント

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