タグ: JavaScript

4
最近良く見かける、ページをスクロールするとメニューバーがページの上辺で固定されるUIですが、アレをこのブログでも実装したいと思っていろいろ調べたところ、JQueryを使えば簡単に実装が出来るみたいなので、やってみました。

まずは適用させたいCSSのクラスを用意します。このブログでは以下のクラスを対象にしました。 
.dropdown_bg{
      display:block;
      width:100%;
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0.92, #2e90c5), color-stop(0.47, #2e90c5), color-stop(0.00, #68AFD5));
      background: -webkit-linear-gradient(top, #68AFD5 0%, #2e90c5 47%, #2e90c5 92%);
      background: -moz-linear-gradient(top, #68AFD5 0%, #2e90c5 47%, #2e90c5 92%);
      background: -o-linear-gradient(top, #68AFD5 0%, #2e90c5 47%, #2e90c5 92%);
      background: -ms-linear-gradient(top, #68AFD5 0%, #2e90c5 47%, #2e90c5 92%);
      background: linear-gradient(to bottom, #68AFD5 0%, #2e90c5 47%, #2e90c5 92%);
      text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(255, 255, 255, 0.5);
}


  続いて、ポジションを切り替えるためのfixedクラスを用意しておきます。 
.fixed{
     position: fixed;
      top: 0;
      left: 0;
}


  以下のJSソースを<head> ~ </head>に挿入します。  
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  <script type="text/javascript">
    $(function() {
      var nav = $('固定したいクラス名');
      var navTop = nav.offset().top;

      $(window).scroll(function () {
      var winTop = $(this).scrollTop();

      if (winTop >= navTop) {
        nav.addClass('fixed')
      } else if (winTop <= navTop) {
        nav.removeClass('fixed')
      }
   });
  });
</script>


 このJavaScriptは簡単に言うと、スクロールイベントを取得して、固定したいクラスがウインドウTOPにきたときに<div class="dropdown_bg">を<div class="dropdown_bg fixed">に切り替えるというものです。汎用性もかなり高いので、いろんな形で使ってみてはどうでしょうか。


ここ最近スマホ用の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全般に利用できるフレームワークなので活躍の場はかなり幅広いです。導入のしやすさも抜群なので是非利用してみてください。