タグ: Web制作

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">に切り替えるというものです。汎用性もかなり高いので、いろんな形で使ってみてはどうでしょうか。


4

「最近、サイトのレスポンスが悪い」そんな風に感じたことはないでしょうか?アクセスが増えてサーバーに負荷がかかっているならそれはうれしい悲鳴ですが、残念ながらそうとも限りません。サーバーの不調という線も考えられますし、リクエストしているファイルのうちどれかがネックになっているということも考えられます。いずれにせよ、解消の為にはいち早い原因究明が必須です。そんなときに役立つのがこれ。

HTTP Watch Basic(無料版)

このツールを簡単に説明すると、WEBページをリクエストしたときのレスポンスとHTTPステータスコードを一覧で確認できるツールです。インストールも簡単ですし、無料版でもかなり高性能なので、お勧めの一品です。


使い方は凄く簡単で、インストール後、メニューバーからツールを選択して、「HTTP Watch Basic」をクリックします。

hwb00


すると下の画像のようなコンソールが出てきますので、左端のレコードボタンをクリックします。

hwb01


この状態でレスポンスを調べたいページを表示すると、以下のようなグラフやステータスが表示されます。

hwb02


このツールで読み取れる情報は、レスポンスまでの時間、送受信の容量、リクエストのメソッドタイプ、HTTPステータス、リクエストURLです。上の画像はこのブログのレスポンスについてですが、この結果からレスポンスの足を引っ張っているのは、この間追加したツイッターのフォローボタンであるということがわかりました。もう少し安定感の良いものを探してみようと思います。

このような感じで原因究明に役立てみてはいかがでしょうか?



ここ最近スマホ用の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に吸収されたという事情もあり、今後の発展という意味では期待できないかもしれません。