タグ: フレームワーク

4

携帯・スマホサイトを主に担当しているので、PCサイトについては少し門外漢なのですが、デバイスが進化に伴って今までのような、スマホとPCで別々のサイトを作らなければという前提が少しずつ崩れてきているようにも感じた次第で、今のうちからある程度両立できるようにツールをチェックしておこうと考え、行き着いたのがtwitter社の「BootStrap(ブートストラップ)」です。

boots
BootStrap(ブートストラップ)ダウンロードサイト


この「BootStrap」ですが、いわゆるフロンドエンドのフレームワークなので、HTMLとCSSの知識があればあらかた実装が可能です。とは言ってもHTML5が前提なので、ここら辺の知識がないと少し難しく感じると思います。実際、僕もHTML5については自信をもって言えるほどの理解がないのでなかなかに苦労します。ではなぜ「BootStrap」なのか、そのメリットを上げていきます。

特にコンポーネントはかなり充実していて、ボタンやナビゲーションバー、フォームパーツ等の定番のものから、アラートやプログレスバーまで用意されているので、このツール一本で相当にサイトの作りこみを行えます。また、HTMLやCSSに自信がない人でもテンプレートが用意されていますし、initializrで大まかに形を作ってから、使いたいコンポーネントを実装していくという使い方も可能です。


導入方法については、

1.ダウンロードする。

2.以下のHTMLを作成する。

<!DOCTYPE html>
 <html>
    <head>
     <title>Bootstrap 101 Template</title>
     <!-- Bootstrap -->
     <link href="css/bootstrap.css" rel="stylesheet">
     <link href="css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
     <h1>Hello, world!</h1>
     <script src="http://code.jquery.com/jquery-latest.js"></script>
     <script src="js/bootstrap.min.js"></script>
    </body>
 </html>

3.公式サイトのガイドラインを参考にレイアウトを組む

4.公式サイトのガイドラインを参考にコンポーネントを実装する

といったところでしょうか。僕自身も実はこのツールを今日ダウンロードしてきたばかりなので、詳細な説明は出来ていませんが、もうちょっと使い慣れてきておススメしたい利用方法とかが見えてきたら記事にしたいと思います。


ここ最近スマホ用のUIフレームワークを比較検討をする機会があり、一言にスマホUIフレームワークといっても、各々一長一短があり、用途や目的によって使い分ける必要もあると感じましたので、本日はそれぞれのUIフレームワークを「導入の手軽さ」「カスタマイズ性」「動作の安定感」「デザインの美しさ」「対応範囲」の5軸で評価してみました。

今回比較するのは以下の4つ

1. JQueryMobile
jqm
以前のエントリーでも紹介した、言わずと知れたJQueyの正統なモバイル版フレームワークです。スマホのフレームワークではこれがデファクトスタンダードになりつつあります。

2. iUI
iui
これも以前のエントリーでも紹介しましたが、iPhone風のUIテイストのフレームワークです。もちろんiPhone以外にもAndroidやその他のプラットフォームにマッチしたテーマもいくつか用意されています。

3. Sencha Touch
snc
これも定番のフレームワーク。もともと有料だったのが現在では無料で利用できます。玄人向けのツールというイメージ。

4. JQTouch
jqt
割と早くから存在していたスマホ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に吸収されたという事情もあり、今後の発展という意味では期待できないかもしれません。



スマートフォンサイトのデザインを作るうえで、最も気をつけるべき項目の一つがフォームです。スマートフォンを使うようになって感じるのがブラウジング自体はかなり快適なんですが、登録や入力が凄く不便です。間違って違う選択肢を選んでしまったり、きちんとイベントを判別してくれなかったり。そこでサイトの利便性を落とさないためにもスマートフォンで使うことを想定したUIを実装していく必要があります。

だた、一言でフォームのデザインといっても、フォームのデザインは実は凄くやっかいなんです。端末のレンダリング仕様によって大きく差異が出やすい箇所ですし、タップやチェックなどのイベント毎にスタイルを用意せねばならず、かなりの労力を要します。

そこで、スピードを求められるWEB制作者を救うホワイトナイトの登場ですよ。それがJQueryMobile(ジェイクエリーモバイル)です。JQueryはもともとJavaScriptのフレームワークの一種で、インタラクティブなUIを実装するのに非常に大助かりなライブラリです。JQueryMobileはそのスマートフォン版ですね。

JQueryMobileダウンロード


これの何がいいかって、それはあらゆるスマートフォンのプラットフォームに対応しているのはもちろんのこと(iOS、Android、WindowsPhone、BlackBerry、Obada、palm webOS、symbian、MeeGoに対応)、

上記サイト上にデモ画面があって、そこで簡単にWEBページを作成し、そのままソースをダウンロードできてしまうということです。

JQM
デモ画面(iPad見たいなヤツ)の上部にパーツが表示されているので、それをドラッグ&ドロップでデモ画面に落とし込むとそのまま画面に反映されるので、HTMLの知識すらまったく必要がありません。細かい調整は編集したい要素をクリックすると右側にプロパティが開くので、そこで編集を行います。(より細かい調整が必要な場合は、一旦ダウンロードしてCSSファイルを修正してください)。実際に編集してダウンロードしてみました。かかった時間はものの数分!

jqm2

JQueryMobileサンプル


デザインもスマホらしくてとてもGoodです。もちろんフォームだけじゃなく、サイトのUI全般に利用できるフレームワークなので活躍の場はかなり幅広いです。導入のしやすさも抜群なので是非利用してみてください。