AjaxでファイルをアップロードするjQueryプラグイン「jQuery.upload」を紹介します。 jQuery.upload １．機能 フォームのファイルアップロード実行に「jQuery.upload」プラグインを利用することで、Ajaxによるファイルのアップロードが行えるようになります。 以下のサンプルでお試しください。 サンプル ２．プラグインのダウンロード jQuery.uploadのダウンロードページにある、「jQuery.upload 1.0.2 (Minified)」または「jQuery.upload 1.0.2」を右クリックして「名前をつけて保存」を選択（バージョン1.0.2は2012年8月現在のもの）。 「jquery.upload-1.0.2.min.js」や「jquery.upload-1.0.2.js」といったファイル名で保存します。 ３．プラグインの設定 クラ

ご存知の方も多いと思いますが、jQueryでセレクタを複数指定する方法を紹介します。 １．セレクタを複数指定する jQueryでセレクタを複数指定するには、セレクタを次のようにカンマで区切ります。 HTML <h1>foo</h1> <h2>bar</h2> <h3>hoge</h3> jQuery $('h1, h2, h3').css('font-size','20px'); 適用前 適用後 セレクタには、要素セレクタ・IDセレクタ・classセレクタなど、異なる種類のものを設定することももちろんできます。 HTML <div id="foo"> <p>aaa</p> </div> <div> <p class="hoge">bbb</p> </div> <div id="bar"> <p>aaa<span>bbb</span>ccc</p> </div> jQuery $('#foo

JavaScriptの文字列置換とjQueryのDOM要素置換について、まとめて紹介します。 特にJavaScriptの文字列置換はいつもやり方を忘れてしまうので、このエントリーに保存しておきます。 １．replace()による文字列置換 基本的な文字列置換は、JavaScriptのreplace()メソッドを利用します。 var text = "foofoo"; var result = text.replace('foo', 'bar'); 実行結果（resultの内容） barfoo ２．replace()の正規表現による置換 replace()メソッドの第1パラメータに正規表現を指定すれば、さらに強力な文字列置換が行えます。 var text = "foofoo"; var result = text.replace(/foo/g, 'bar'); 実行結果（resultの内容）

jQueryの要素の表示・非表示を判定する方法を紹介します。 １．基本 jQueryでは、要素の表示・非表示のためのメソッドとして、show()とhide()が提供されています。 show()は指定した要素を表示します。 $('#foo').show(); hide()は指定した要素を非表示にします。 $('#foo').hide(); が、表示・非表示を判定する方法として、isShow()やisHide()、isVisible()などは提供されていません。 ２．css('display')で判定する show()はdisplayプロパティ「block」、hide()はdisplayプロパティを「none」にするので、これを判定に利用します。 if ($('#foo').css('display') == 'block') { // 表示されている場合の処理 } else { // 非表示

jQueryで遅延ロード（遅延読み込み）を汎用的に実現する「ScrollTrigger」プラグインを紹介します。スクロールで要素が表示されたときに任意の関数を実行できます。 当ブログでも、記事ページ本文下にあるソーシャルブックマークボタンとFacebookのLikeBoxの表示にこの仕組みを使っています。 １．目的 Facebookの「いいね！」ボタンなど、最近ソーシャル系のパーツをブログなどに表示している方が少なくないと思います。 ですが、パーツの表示にはJavaScriptを使っているものがほとんどで、そのまま設置するとページのロード時間が遅くなるケースが多く、結果的にページ表示時間に影響することになります。 本プラグインは、そういったソーシャル系のJavaScriptのロードを遅延させることができ、初回のロード時間を短縮したいときに効果があります。 ２．機能 ページをスクロールして、

Googleが推奨する、ブラウザレンダリングに関する4つのベストプラクティスについて紹介します。 この記事は「Optimize browser rendering」を参考に書き起こしたものです。 Optimize browser rendering 元記事は2012年3月28日に更新されたものです。記事には5つの項目がありますが、残りの1つは情報がやや古いようなので割愛しました。 解釈が間違っている部分がありましたらどこかでつぶやいてください。 １．CSSセレクタを効率的に使用する 基本として、CSSのレンダリングは、記述されたセレクタについて、一番右端のセレクタ（キーセレクタ）から開始し、右から左方向に評価します。 で、多くの要素に一致するような非効率的なキーセレクタを避けることで、ページのレンダリングをスピードアップできるようです。 以下の子孫セレクタは非効率な例です。 キーセレクタが

「CSS Sprite」は背景画像などの複数の画像ファイルをひとつの画像にまとめて、画像の中から表示させたい部分の座標をbackground-positionプロパティで指定するという手法です。これにより画像ファイルのHTTPリクエスト数を減らすことができます。 この手法は背景画像での利用が一般的なのですが、img要素でも利用することができるようなので、本エントリーで紹介します。 本エントリーでは、次のソーシャルブックマークボタン用の4つの画像を1つにまとめて、CSS Spriteを行ってみます。 背景画像の場合はbackground-positionプロパティでさくっと表示できるのですが、img要素として表示させるのにかなり苦労しました。ということで、コピペで使えそうなサンプルも用意しました。 「そういう場合、背景画像に変更するのが本来では？」というツッコミはなしでお願いします（笑）。

.htaccessの作成が簡単にできる老舗のオンラインサービス「.htaccess Editor」を紹介します。 .htaccess Editor このサービスでは次の作成が行えます（2012年6月現在）。 操作内容主な使用ディレクティブ ファイル一覧の拒否アクセスURLにindex.htmlがない場合のファイル一覧の表示・非表示を決定Options -Indexes Options Indexes ベーシック認証ベーシック認証（ユーザー・パスワード入力によるアクセス）を有効にするAuthUserFile AuthGroupFile AuthName AuthType エラーページアクセスしたURLが存在しない場合などの代替エラーページを表示ErrorDocument デフォルトページURLをスラッシュで止めたときにアクセスするファイルの優先順位を決定DirectoryIndex WWW