ここ最近スマホ用のUIフレームワークを比較検討をする機会があり、一言にスマホUIフレームワークといっても、各々一長一短があり、用途や目的によって使い分ける必要もあると感じましたので、本日はそれぞれのUIフレームワークを「導入の手軽さ」「カスタマイズ性」「動作の安定感」「デザインの美しさ」「対応範囲」の5軸で評価してみました。
今回比較するのは以下の4つ
1. JQueryMobile
以前のエントリーでも紹介した、言わずと知れたJQueyの正統なモバイル版フレームワークです。スマホのフレームワークではこれがデファクトスタンダードになりつつあります。
2. iUI
これも以前のエントリーでも紹介しましたが、iPhone風のUIテイストのフレームワークです。もちろんiPhone以外にもAndroidやその他のプラットフォームにマッチしたテーマもいくつか用意されています。
3. Sencha Touch
これも定番のフレームワーク。もともと有料だったのが現在では無料で利用できます。玄人向けのツールというイメージ。
4. JQTouch
割と早くから存在していたスマホUIフレームワークのパイオニア的なツール。Sencha Touchに吸収されたとのことですが、使い勝手がなかり違うように感じたので、今回の比較検討に含めました。
では早速比較してみましょう。
JQueryMobileについては以前のエントリーで書いたように、公式WEBサイト上でジェネレータを使って直感的にサンプルソースを形成できたり、有志による日本語リファレンスが充実していたりと、導入のハードルの低さはダントツです。
iUIとJQTouchはHTMLとCSSが理解できていれば問題ありませんが、フレームワークの仕様を理解するまでは少し手間取るかもしれません。
Sencha TouchはJavaScriptの知識がある程度必要なのと、フレームワークの規模も他のものよりも大きいので仕様を把握するまでちょっと骨が折れそう。
JQuery Mobileは導入しやすさの反面カスタマイズのしにくさがネックです。カッチリ組み込み過ぎて自由度が少ないというイメージ。iUIとJQTouchは結構似た感じですが、UIのパターンの多さ的にJQTouchのほうが自由度は高そうです。
Sencha Touchは逆にゴリゴリJavaScriptを弄れる人にとっては拡張性はかなり高いです。玄人向け。
検証の期間も短かったので、あくまで個人的な感想ですが、構成がシンプルな分、iUIが安定性が高いように感じました。JQTouchも結構いい感じですが、端末によって一部レイアウトが崩れていたりしたので、その分マイナス。Secha TouchはWebkitペースのブラウザじゃないと動かないという欠点があり、サードパーティ製のブラウザを利用しているユーザーを考慮してこの結果。JQuery Mobileは実はまだベータ版であり、動作はちょっと不安定で、かつ描画に時間がかかってしまう欠点があり、レスポンスを重視する方にはちょっとそぐわないかもしれません。ただ正式版がリリースされたら、この問題は解消されるかも。
個人的な意見になりますが、デザインは文句なしにJQuery Mobileが美しいです。次点はSencha Touch。 iUIはちょっとシンプルすぎる気がします。JQTouchは悪くないですが、ちょっとチープな感じがします。どの道、デザインも多少なりともカスタマイズして利用することになるので、余り気にするところではないかもしれませんが。
どのフレームワークも主要なプラットフォームは抑えていますが、Sencha TouchについてはWebkitブラウザのみ対応なので、ちょっと不安があります。
総括すると、すばやく、美しいデザインのサイトを作りたいならJQuery Mobile、カスタマイズ性を求めるならSencha Touch、安定感を取るならJQTouchかiUIといった感じです。ただ、JQTouchに関してはSencha Touchに吸収されたという事情もあり、今後の発展という意味では期待できないかもしれません。
今回比較するのは以下の4つ
1. JQueryMobile
以前のエントリーでも紹介した、言わずと知れたJQueyの正統なモバイル版フレームワークです。スマホのフレームワークではこれがデファクトスタンダードになりつつあります。
2. iUI
これも以前のエントリーでも紹介しましたが、iPhone風のUIテイストのフレームワークです。もちろんiPhone以外にもAndroidやその他のプラットフォームにマッチしたテーマもいくつか用意されています。
3. Sencha Touch
これも定番のフレームワーク。もともと有料だったのが現在では無料で利用できます。玄人向けのツールというイメージ。
4. JQTouch
割と早くから存在していたスマホUIフレームワークのパイオニア的なツール。Sencha Touchに吸収されたとのことですが、使い勝手がなかり違うように感じたので、今回の比較検討に含めました。
では早速比較してみましょう。
評価ポイント1 : 導入の手軽さ
JQuery Mobile | ★★★★★ |
iUI | ★★★☆☆ |
Sencha Touch | ★★☆☆☆ |
JQTouch | ★★★☆☆ |
JQueryMobileについては以前のエントリーで書いたように、公式WEBサイト上でジェネレータを使って直感的にサンプルソースを形成できたり、有志による日本語リファレンスが充実していたりと、導入のハードルの低さはダントツです。
iUIとJQTouchはHTMLとCSSが理解できていれば問題ありませんが、フレームワークの仕様を理解するまでは少し手間取るかもしれません。
Sencha TouchはJavaScriptの知識がある程度必要なのと、フレームワークの規模も他のものよりも大きいので仕様を把握するまでちょっと骨が折れそう。
評価ポイント2 : カスタマイズ性
JQuery Mobile | ★★☆☆☆ |
iUI | ★★★☆☆ |
Sencha Touch | ★★★★★ |
JQTouch | ★★★★☆ |
JQuery Mobileは導入しやすさの反面カスタマイズのしにくさがネックです。カッチリ組み込み過ぎて自由度が少ないというイメージ。iUIとJQTouchは結構似た感じですが、UIのパターンの多さ的にJQTouchのほうが自由度は高そうです。
Sencha Touchは逆にゴリゴリJavaScriptを弄れる人にとっては拡張性はかなり高いです。玄人向け。
評価ポイント3 : 動作の安定感
JQuery Mobile | ★★☆☆☆ |
iUI | ★★★★★ |
Sencha Touch | ★★★☆☆ |
JQTouch | ★★★★☆ |
検証の期間も短かったので、あくまで個人的な感想ですが、構成がシンプルな分、iUIが安定性が高いように感じました。JQTouchも結構いい感じですが、端末によって一部レイアウトが崩れていたりしたので、その分マイナス。Secha TouchはWebkitペースのブラウザじゃないと動かないという欠点があり、サードパーティ製のブラウザを利用しているユーザーを考慮してこの結果。JQuery Mobileは実はまだベータ版であり、動作はちょっと不安定で、かつ描画に時間がかかってしまう欠点があり、レスポンスを重視する方にはちょっとそぐわないかもしれません。ただ正式版がリリースされたら、この問題は解消されるかも。
評価ポイント4 : デザインの美しさ
JQuery Mobile | ★★★★★ |
iUI | ★★☆☆☆ |
Sencha Touch | ★★★★☆ |
JQTouch | ★★★☆☆ |
個人的な意見になりますが、デザインは文句なしにJQuery Mobileが美しいです。次点はSencha Touch。 iUIはちょっとシンプルすぎる気がします。JQTouchは悪くないですが、ちょっとチープな感じがします。どの道、デザインも多少なりともカスタマイズして利用することになるので、余り気にするところではないかもしれませんが。
評価ポイント5 : 対応範囲
JQuery Mobile | ★★★★★ |
iUI | ★★★★☆ |
Sencha Touch | ★★☆☆☆ |
JQTouch | ★★★★☆ |
どのフレームワークも主要なプラットフォームは抑えていますが、Sencha TouchについてはWebkitブラウザのみ対応なので、ちょっと不安があります。
総括すると、すばやく、美しいデザインのサイトを作りたいならJQuery Mobile、カスタマイズ性を求めるならSencha Touch、安定感を取るならJQTouchかiUIといった感じです。ただ、JQTouchに関してはSencha Touchに吸収されたという事情もあり、今後の発展という意味では期待できないかもしれません。