XとYを別々に取得したい

値の検証

var bgPosDef = $('#hoge').css('backgroundPosition');

IE8まで（9は未検証）

console: null（空）

Firefox, Chrome, Safari, Operaなど

console: 50px 50px

IEは返されるデータがない！こういうところがみんなが嫌いな所以ですかね。IEはbackgroundPositionではなくて、backgroundPositionXのようにXかYを指定して個別に引き抜きます。

var bgPosX = $('#hoge').css('backgroundPositionX');
var bgPosY = $('#hoge').css('backgroundPositionY');

XとYを取得する

計算を行う場合は、数値にしておく必要があるのでついでに。

var bgPos = bgPosDef.split(' '), // 半スペで分ける
// bgPos[0] == X, bgPos[1] == Y
bgPosX = bgPosY = 0;
bgPosX = bgPos[0].replace('px', '');
bgPosY = bgPos[1].replace('px', '');
// pxを削除する

IEはpxを削るだけです。

bgPosX = $('#hoge').css('backgroundPositionX').replace('px', '');
bgPosY = $('#hoge').css('backgroundPositionY').replace('px', '');

条件分岐で分ける

var bgPosDef = $('#hoge').css('backgroundPosition'),
  bgPosX = bgPosY = 0;
if ( bgPosDef ) { // backgroundPositionの値が取れた場合
  var bgPos = bgPosDef.split(' '),
  bgPosX = bgPos[0].replace('px', '');
  bgPosY = bgPos[1].replace('px', '');
} else { // 取れなかった場合
  bgPosX = $('#hoge').css('backgroundPositionX').replace('px', '');
  bgPosY = $('#hoge').css('backgroundPositionY').replace('px', '');
}

これくらいはjQueryで対応してくれてもいいような気がしないでもない。。

どんだけ話題に乗り遅れてるねんっていう話なんですけど、いまさら@Anywhereを使ってみました。

つぶやけるだけのTwitterクライアント – Only tweet

きっかけは、つぶやけるだけの俺俺クライアントがほしくて、Twitterの機能をJSで簡単に導入できる「@Anywhere」の使い方メモ – Rewishでなんとなく出来ることは読んでいた@Anywhereで十分やんじゃあつくれるな、という理由です。

はっきり言ってChrome(Windowsだけ)のアプリケーション登録がないとまったく使えないしょうもないやつです。でもアプリケーション登録すればキャプチャみたいに使えます。結構便利。

JavaScriptだけで作れるので、JavaScriptしかわからないけどちょっとやってみたい人にはちょうどいい感じかもです。

開発環境を整える

開発と言っても@AnywhereはJavaScriptだけで使えるので、用意するものは、テキストエディタとTwitterのAPIキーだけです。

APIキーの発行と、読み込むソースまでは、Rewishの
Twitterの機能をJSで簡単に導入できる「@Anywhere」の使い方メモ – Rewishを見てもらえば分かると思いますし、面倒くさいので省略します。

アクセス権限については、http://dev.twitter.com/appsで変更できるようになってるので、Read & Writeにしておきます。

@Anywhereの基礎知識

twttr.anywhere(function(twitter) {
  // 引数のtwitterがデータを持っているため
  // ここで@Anywhereの機能が使える
});

@Anywhereの機能を使いたいときは上記のようにtwttr.anywhere(function(twitter){ });の中に記述します。

サインインとサインアウトなど機能の実装

サインイン

twitter.signIn()

を使うかRewishでも紹介されている

connectButton()

を使います。connectButtonは以下のように引数でオプションを指定することができます。

twitter("#hoge").connectButton({
  authComplete: function() {
    // 認証が完了した後の処理
  },
  signOut: function() {
    // サインアウトした後の処理
  }
});

が、今回はtwitter.signIn()を利用しました。一番簡単な方法は指定した要素のonclickで実行するだけです。超簡単ですね。

document.getElementById("signIn").onclick = function() {
  twitter.signIn();
  return false;
}

signIn()を実行すると、TwitterのOAuthウィンドウが開いてそちらで認証後に元のアプリケーションに返されます。返ってきたときに何か実行したい場合は、authCompleteというトリガーを使います。

↓のようにjQueryみたいにトリガーをbindすることができます。トリガーにbindするfunctionは2つ引数を持っていて、イベントハンドラのeと、@Anywhereから渡されるuserです。userには、サインインしたユーザーの情報が入っているので、2つ目の引数は必ず受け取りましょう。

twitter.bind("authComplete", function(e, user) {
  // hogehoge
});

Only Tweetでは、サインイン後に

• ユーザー名を表示
• ユーザー名の後ろにサインアウトリンクを表示
• 使い方をTweetボックスに置き換え

というように置き換えています。

受け取ったuserの使い方

user.data(プロパティ)でscreen_nameやアイコン画像などを表示できます。

sign.innerHTML = [
  '<p>Logged in as : <a href="http://twitter.com/' + user.data('screen_name') + '">',
    user.data('screen_name'),
  '</a> (<a href="javascript:void(0)" onclick="twttr.anywhere.signOut();">Sign out</a>)</p>',
].join('');

サインアウト

サインアウトアクション自体は任意の要素でtwttr.anywhere.signOut()を実行するだけです。HTMLに入れる場合は、アンカーのonclickにでも入れておけばいいと思います。

<a href="javascript:void(0)" onclick="twttr.anywhere.signOut();">Sign out</a>

サインアウト後に何か実行したいときはautoCompleteと同じように、signOutというトリガーにfunctionをbindします。

twitter.bind("signOut", function(e) {
  // hogehoge
});

アクセス時のサインイン判定

アプリケーションにアクセスしたときに、すでにサインインしているかどうかで表示する内容を変えたい場合

twitter.isConnected()

を利用します。既にサインインしていればtrue、そうでない場合はfalseが返されます。

if ( twitter.isConnected() ) {
  // サインインしている場合
} else {
  // サインインしていない場合
}

Tweetボックス（つぶやくやつ）の表示

サインインしているとき、指定したIDの要素にTweetボックスを表示します。これには文字数カウントやらつぶやくボタンやら含まれているので、表示すればそのままつぶやくことができます。ただしこのTweetボックスはiframeで書き出されるので動作の微調整とかは行えません。むーん不便。。

twitter("hoge").tweetBox({
  label: /* いまなにしてる？のところ */,
  defaultContent: /* 予め表示しておく文言 */,
  onTweet: function(e) { // Tweet後のコールバック
     // hogeking
  }
});

つぶやけるだけのTwitterクライアントの実装

サインイン前

サインイン後

CSSは置いておくとして、用意したHTMLはこんなのです。

<div id="wrap">
  <div id="header">
    <h1><a href="./">Only tweet</a></h1>
    <p id="sign"></p>
  </div>
  <p class="desc">つぶやけるだけのTwitterクライアント</p>
  <div id="tweetBox">
    <ol id="step">
      <li><em>HOP</em>: Connect with Twitterボタンを押す</li>
      <li><em>STEP</em>: OAuth認証画面でconnectを押す</li>
      <li><em>JUMP</em>: つぶやく</li>
    </ol>
    <p id="attention">Tweeted</p>
  </div>

  <div id="footer">
    <small>Powered by <a href="http://twitter.com/">Twitter</a>. | <a href="./about.html">about</a> | <a href="http://twitter.com/5509">5509</a></small>
  </div>
</div>
<div id="loadingBg"></div>
<div id="loading"><p>Connecting @anywhere...</p></div>

なんかソース的に微妙なところもあると思いますけど、俺俺クライアントなので放っておきましょう。JSで追加すればいいやんなところも書いてあったりしますし。

仕様を決める

• authCompleteでp#signをSigned inに書き換え、div#tweetBoxもつぶやけるように書き換え
• アクセス時にサインインしていなければ、p#signはサインインボタンを表示
• アクセス時にサインインしていれば、authCompleteと同じ状態にする
• 待ち時間が発生するような箇所ではローディングのくるくるを表示
• Tweetが成功したら、成功したよ！的な文言を表示する

使いそうなものを変数に、機能を関数にしておく

var d = document;
var $d = function(id) { return d.getElementById(id); };
var sign = $d("sign");
var tweetBox = $d("tweetBox");
var step = $d("step");
var loadingBg = $d("loadingBg");
var loading = $d("loading");
var attention = $d("attention");

だいたい2回以上使うようなものは変数にいれときます。使ってなくても気にしない。

// ローディングの表示
function showLoading() {
  loadingBg.style.display = "block";
  loading.style.display = "block";
}
// ローディングの非表示
function hideLoading() {
  loadingBg.style.display = "none";
  loading.style.display = "none";
}
// サインインの表示、サインインクリック時は一旦ローディングを表示する
function addConnect(T) {
  sign.innerHTML = "<a href='javascript:void(0);' id='signIn'><img src='img/connect.gif' alt='Connect with Twitter'></a>";
  d.getElementById("signIn").onclick = function() {
    showLoading();
    T.signIn();
    return false;
  }
  hideLoading();
}

やっぱり2回以上使いそうなものはfunctionにしておきます。使ってなくても気にならない。

@Anywhereを利用して実装する

twttr.anywhere(function(twitter) {
  // 基本的に処理はここに書く
});

サインイン時にHTMLを入れ替えるfunctionを定義しておく。

var addHTML = function(User) {
  sign.innerHTML = [
    '<p>Logged in as : <a href="http://twitter.com/' + User.data('screen_name') + '">',
      User.data('screen_name'),
    '</a> (<a href="javascript:void(0)" onclick="twttr.anywhere.signOut();">Sign out</a>)</p>',
  ].join('');
  
  twitter("#tweetBox").tweetBox({
    label: "Tweet, tweet, tweet, tweet and tweet",
    defaultContent: "",
    onTweet: function(e) {
      attention.style.display = "block";
      setTimeout(function() {
        attention.style.display = "none";
      }, 2000);
    }
  });
  hideLoading();
}

アクセスしたときにサインインしているか、いないかで行う処理を変える

if ( !twitter.isConnected() ) {
  // サインインしていない場合は、addConnectでサインインリンクを表示
  addConnect(twitter);
} else {
  // サインインしている場合はstepを非表示にして、tweetBoxを表示する
  var User = twitter.currentUser;
  step.style.display = "none";
  addHTML(User);
  hideLoading();
}

最後にauthCompleteとsignOut時にコールバックをbindする。

twitter.bind("authComplete", function(e, user) {
  // ステップを非表示にしてtweetBoxを表示後ローディングを隠す
  step.style.display = "none";
  addHTML(user);
  hideLoading();
});
twitter.bind("signOut", function(e) {
  // サインアウトが完了するまでローディングを表示する
  // #signを空にして、tweetBoxを削除して、addConnectを実行する
  showLoading();
  sign.innerHTML = "";
  tweetBox.removeChild(tweetBox.getElementsByTagName("iframe")[0]);
  addConnect(twitter);
  step.style.display = "block";
});

完成ソースコード

ちなみにJavaScriptは全て</body>直前に書いてるので、window.onload的なやつは必要ないです。そのまま実行しましょう。

<script src="http://platform.twitter.com/anywhere.js?id=r3awJe8TS1nZhH4hUxtk4w" type="text/javascript"></script>
<script type="text/javascript">//<![CDATA[
var d = document;
var $d = function(id) { return d.getElementById(id); };
var sign = $d("sign");
var tweetBox = $d("tweetBox");
var step = $d("step");
var loadingBg = $d("loadingBg");
var loading = $d("loading");
var attention = $d("attention");

function showLoading() {
  loadingBg.style.display = "block";
  loading.style.display = "block";
}
function hideLoading() {
  loadingBg.style.display = "none";
  loading.style.display = "none";
}
function addConnect(T) {
  sign.innerHTML = "<a href='javascript:void(0);' id='signIn'><img src='img/connect.gif' alt='Connect with Twitter'></a>";
  d.getElementById("signIn").onclick = function() {
    showLoading();
    T.signIn();
    return false;
  }
  hideLoading();
}
twttr.anywhere(function(twitter) {
  //addConnect(twitter);
  var addHTML = function(User) {
    sign.innerHTML = [
      '<p>Logged in as : <a href="http://twitter.com/' + User.data('screen_name') + '">',
        User.data('screen_name'),
      '</a> (<a href="javascript:void(0)" onclick="twttr.anywhere.signOut();">Sign out</a>)</p>',
    ].join('');
    
    twitter("#tweetBox").tweetBox({
      label: "Tweet, tweet, tweet, tweet and tweet",
      defaultContent: "",
      onTweet: function(e) {
        attention.style.display = "block";
        setTimeout(function() {
          attention.style.display = "none";
        }, 2000);
      }
    });
    hideLoading();
  }
  if ( !twitter.isConnected() ) {
    addConnect(twitter);
  } else {
    var User = twitter.currentUser;
    step.style.display = "none";
    addHTML(User);
    hideLoading();
  }
  twitter.bind("authComplete", function(e, user) {
    step.style.display = "none";
    addHTML(user);
    hideLoading();
  });
  twitter.bind("signOut", function(e) {
    showLoading();
    sign.innerHTML = "";
    tweetBox.removeChild(tweetBox.getElementsByTagName("iframe")[0]);
    addConnect(twitter);
    step.style.display = "block";
  });
});
//]]></script>

つぶやけるだけのTwitterクライアント – Only tweet

あとはTwitter APIのJSONPからscreen_nameでTLとか取得すればなんとなくTwitterっぽいのもできるので、興味がある人はぜひ。

はじめに、この記事は役に立つリンク集ではないです。

ブログを初めて2年ちょっとが過ぎ、半年くらいやるやる言ってやらなかったexValidationもようやく公開できたのもあって、自分の中で一段落したので、今まで公開したプラグインの振り返り等も兼ねて書きました。

そもそもは誰かの役に立てばいいなと思って始めたブログなので（ほとんど役に立たないものだと思いますけど）もしかするともしかしてどこかで誰かの役に立てるものもあるかもしれません。

ところで最初のプラグインを公開したときは、（JavaScript的な意味で）それはもう何も知りませんでした。そんな感じで今でも恥ずかしいコードなんですけど、最初の頃はもっと恥ずかしいコードなんですね。だから見ないで…

いままで公開したjQueryぷるぎんたち

プルダウンで日付を入力(選択)するイライラを解消するDateSupport.js

サンプル

この頃は些細な生年月日の日付選択にもイライラしてました。。そんなことはさておいて、ただのしがないコーダーだったこの頃の僕にとってjQueryの存在はかなり大きかったです。

JavaScriptというよりプログラミングの基礎知識も何もなしに、とりあえずやってみよう的な感じで始めて最初にできたプラグインがこのDateSupportでした。記念すべき（？）最初のプラグインなのにまったく懐かしくないのはなぜだろう…

プルダウンで都道府県などを入力(選択)するイライラを解消するPrefSupport.js

サンプル

DateSupportでHTMLを取得してDOMを操る技術（？）を身につけて（？）調子に乗った（！）のか、あの鬱陶しい都道府県のプルダウンも展開しました。

今思えばどうしてタイトルに「jQuery」「プラグイン」の2つが入っていないのか。。これもやっぱり懐かしく思えないのはなぜ…

リアルタイムフォームバリデーション jQuery.validation.js

サンプル

確か国産のバリデーションプラグインがなかった、という理由で作ったjquery.validation.jsですが、正直実装方法が全く分からず、正規表現やcallback、書き方などその他もろもろ色々勉強になったやつですこいつ。最初に叩きで書いたバリデーションエンジンを@akkun_choiに書き直してもらって、今でも基盤として使ってます。書き直してもらったコードは当時全く意味が分かりませんでした。ありがとう…このプラグインは利用してくれた方のコメント（要望）を元に、徐々にバージョンアップして最終的に色んなバリデーションを行えるようになりました。最終バージョンでは開発当初は絶対書けなかったようなことまで書けるようになってました。

このプラグインは人生を少なからず変えた重要なやつかもしれないです。

selectボックスをシンプルなプルダウンに拡張するjQselectable(jQuery.selectable.js)

サンプル

何ヶ月か前に作ったDateSupportとPrefSupportを元に作りなおしたのがこのselectableでした。今は書き直して色々仕様も変わったりしていますが、公開当初はそれはもう色々ひどかったような気がします。

個人的には最高のユーザー体験じゃろ、って思ってるんですけどね。どうなんでしょう。

スライドスクロールページ内リンク jQuery.slideScroll.js

サンプル

JavaScriptを始めたきっかけはするんするんスクロールだったので、ちゃんと内容を理解してこれを書けたっていうのはなんだか前へ進めた気がしてうれしかったですね。

ひと味違ったページ内スクロールをjQuery Easingプラグインで実装する jQuery.easing.scroll.js

サンプル

せっかくするするスクロールを書いたのに、jQueryを使うと数行でもっとすごい動きを実装できるといういい例でした。easing使ったほうがきれいにスクロールするんです。これは使わなくていいので、easingを使いましょうよ。

bit.lyで短縮された元のURLをプレビューする jQueryプラグイン

サンプル

思い入れが全然ないなこれ…

入力補助でユーザーの負担を減らそう 予約語を表示するtangoHokan.js

サンプル

たしかこの辺は管理画面を使いやすくしたくて作ってました。

セレクトボックスに新しいオプションを追加していけるスクリプト

サンプル

なんかちょっと斬新なことがしたくて、作ってみたものの使いどころはまったくありませんでした。一番微妙なやつですねこいつは。

パスワード入力欄の最後の文字列をヒントとして表示するjQueryプラグイン

サンプル
iPhoneのUIみたいなのが作りたくて、でもロジックが分からなくて逃げたらこういう形になりました。公開したら、まさにiPhoneのやつみたいなのを海外で公開した人がいて、ロジックみたら僕には無理やったなっていう結果でした。

TwitterのHover Cardを実装するjQueryプラグイン twttrFloatTip

サンプル

@anywhereが公開されるちょっと前くらいに、HoverCardを使いたいなと思って書いたんですけど、数ヵ月後に案の定@anywhereでHoverCardが実装できるようになったので、不要になったかわいそうなやつです。

ありそうでなかった？要素をふわっと表示させるjQueryプラグイン whatInOut

サンプル

斬新なタイトルで注目を集めた（嘘）whatInOutはWindows7のウィンドウを開くときみたいな、ふんわりとしたアニメーションがほしくて書きました。今さらというか、今だからというか、whatInとwhatOutはほとんど使い物にならなくて、whatSlideInとwhatSlideOutがいい感じですね。

どんなフォームにも使えるjQueryのフォームバリデーション exValidation

サンプル

ずっと書き直したかったjQuery.validation.jsを仕様変更などして書き直したものです。やりたいようにやっていったら「jquery Inline Form Validation Engine」にかなり近いものになってしまったのですけど、jQselectableと一緒に使えるとかexValidationにしかないようなオプションとかもあるしこれでいいか、で公開しました。

ふりかえり

僕は別にJavaScriptの知識が豊富なわけでもないし、すごいコードを書けるわけでもないですが、その時できる範囲内でたまに出来ないことが必要になったりして、聞いたりしてちょっとずつ理解して今ではなーんとなく理解できるようになりました。

本当にしがないコーダーだった頃に比べると、できることは増えていて、それもこれもjQueryのおかげだったりするんですけど、jQueryにばっかり頼っていてもできることは増えないのでJavaScriptはもっと理解したい。

プラグインとかは特に誰に向けて書いてるわけではないですけど、コメントとかTwitterで反応があるとうれしいです。コメントの返事さぼったりしてすみません。これからもさぼったりすると思いますけど、コメント本当にうれしいです。

そんなわけで、これからもぼちぼち書いていけたらいいなとか思いながらも、そろそろ次のステップに進まないとなぁと思っているわけで、次の言語をどうしようと重たい腰が一向にあがらない毎日です。

jquery.validation.jsというフォームバリデーションプラグインを公開していますが、使える場面が割と限定されてしまうような作りだったので、より幅広く使えるようにexValidationという名前で新しいjQueryプラグインとして作り直しました。伴って仕様や使い方が異なる部分も多いので、ドキュメントとして書いておきます。ただし前半のバリデーションルール周りは同じエンジンを使ってるので、ほぼ同じです。ちなみにすごい長いです。。

validation.jsにはあったけど、exValidationにはない機能はだいたい省いたものなので、こちらでの実装は基本的には行いません。それないと不便、、な機能があれば随時追加拡張していく予定なのでコメントでください。全ての要望には応えられませんので、、それだけ了承ください。

• サンプル1: エラーを右上に表示
• サンプル2: エラーを下に表示

トピックス

• ダウンロード
• 使い方
  • 1. JSファイルを読み込む
  • 2. 基本バリデーションルール
  • 3. select, checkbox、radio、複数項目の場合
  • 4. select要素を対象にする場合
  • 5. 再入力をチェックする場合
  • 6. 入力文字数をチェックする場合
  • 7. アクティベート
  • 8. アクティベート（ここでルールを指定する場合）
• オプション
  • サンプル1のパターンで実行する
  • サンプル2のパターンで実行する
  • errFocusを使う
  • Ajaxでポストする
  • 任意の要素にバリデーションをbindする
  • エラー時に関数を実行する、エラーがない場合に関数を実行する、スクロール位置を固定する
    • エラー時に関数を実行する
    • エラーがない場合に関数を実行する
    • スクロール位置を固定する
• API
  • jQselectableとの併用
• バリデーションルール
• その他

ダウンロード

バリデーションエンジン

exValidation.js
exValidation.min.js

バリデーションルール

exChecker-ja.js

サンプルファイル

exValidation.zip

使い方

1. JS・CSSファイルを読み込む

exValidaitonに必要なファイルは「exvalidation.css」「jQuery」「exvalidation.js」「exchecker-ja.js」の4つです。

<link type="text/css" rel="stylesheet" href="css/exvalidation.css" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.4.2");</script>
<script type="text/javascript" src="js/exvalidation.js"></script>
<script type="text/javascript" src="js/exchecker-ja.js"></script>

「exchecker-ja.js」は基本的なバリデーションルールを記述したファイルなので、これを読み込むことで以下に記述する最低限のバリデーションを行うことができます。

2. 基本バリデーションルール

exchecker-ja.jsに基本のバリデーションルールを記述しています。下記のclassをフォーム要素（グループの場合はspanなどの要素）に割り振るか実行時にrulesというプロパティで指定すること（実行時のプロパティでバリデーションルールを指定する）でルールを決めることができます。

• required – 必須項目
• select – select要素用の必須項目
• radio – radioボタン（いずれかひとつ、グループ分けの親要素必須
• checkbox – checkbox（いずれかひとつ、グループ分けの親要素必須
• group – 複数の項目をまとめる場合（詳しくは後述
• retype-対象にするID – 再入力チェック
• email – メールアドレスチェック（*@*.*）
• hankaku – 全角禁止
• zenkaku – 全角のみ
• hiragana – ひらがなのみ
• katakana – カタカナのみ
• furigana – ふりがな（ひらがな、数字、アルファベット、〜、ー、()）
• tel – 電話番号(形式チェックはなし)
• numonly – 数字のみ
• nocaps – 英数字（小文字）のみ
• zip – 郵便番号(形式チェックはなし)
• url – URL（http(s)://）
• minX – X文字以下
• maxX – X文字以上

また、適用させる項目はrequiredとhankakuは他の項目と同時に含めることが出来ます。例えば下記のようにクラスにemail, hankaku, requiredを指定した場合は

<input type="text" name="mail" id="mail" value="" class="email hankaku required" />

必須項目・メールアドレスチェック・全角禁止になります。またクラスに記述する順序は任意で構いません。ところでバリデーションを行うinput要素には固有のidが必須になります。

特殊なタイプのチェック形式は以下のようになります。カッコ内はあってもなくても可

メールアドレス：*@*.*
電話番号：*(-)*(-)*
郵便番号：***(-)****

3. checkbox、radio、複数項目のバリデーション

checkbox、radio、複数項目をチェックする場合は
spanなどのインライン要素(*1)でグループを明示した上でここではspan要素としますが span要素にid、classを割り当てます。

例えば、メールアドレスを@前と後で分ける場合は

<input type="text" name="mail2" id="mail2" value="" class="" />
@
<input type="text" name="mai3" id="mail3" value="" class="" />

といったように分けるのが一般的なのでこれをチェックする場合は以下のようになります。

<span class="group required hankaku email" id="groupmail"><input type="text" name="mail3" id="mail3" value="" class="" />
@
<input type="text" name="mail2" id="mail2" value="" class="" /></span>

ポイントは上にも記述していますが、複数のinput要素をまとめるspanを用意してそのspan要素にid、classを割り当てます。

classはgroupが必須になり、あとはinput単体で指定するものが使えます。なので今回の場合はclassには group, required, hankaku, email が入ることになります。

以下はradioボタンの例です。

<ul class="radio" id="radioarray">
  <li><label for="radio1"><input type="radio" name="radio" id="radio1" value="" /> 男</label></li>
  <li><label for="radio2"><input type="radio" name="radio" id="radio2" value="" /> 女</label></li>
</ul>

radio、checkboxは例外になり、必須項目としてしかチェック出来ないのでclassにrequiredは必要ありません。

上記の例ではグループ化がspan要素ではなくul要素になっていますがCSSでinline指定(*1)すれば大丈夫です。要はdisplayプロパティがinline(inline-blockでも可)であればなんでも大丈夫です。

*1) 幅を持たせたブロック要素でも可ブロック要素は幅初期値が親に対して100%になるので エラーチップが画面から見切れることがあります。

4. select要素を対象にする場合

select要素を対象にする場合は

<select name="sex" id="sex" class="required">
  <option value="" selected="selected">選択してください</option>
  <option value="male">男</option>
  <option value="female">女</option>
</select>

のようにvalueが空のoption要素を含めます。value属性を指定しないとvalidationは行われません。初期値には必ず空のvalue属性を指定してください。(初期値にはselected属性を指定することが推奨されています)
select要素は選択されているoptionが変わった場合にvalidationが行われます。

5. 再入力をチェックする場合

メールアドレスやパスワードなど再入力を促す項目がある場合、それもvalidationの対象にすることができます。たとえば、

<input type="text" id="mail" name="mail" value="" class="email hankaku required" />

の後に

<input type="text" id="remail" name="remail" value="" class="" />

といった再入力項目があるとします。この項目は先のメールアドレス入力項目 input#mail と同じものを入力してもらうので

<input type="text" id="remail" name="remail" value="" class="retype-mail required" />

のようにクラスに retype-対象にする項目のID を含めます。今回は対象にする項目(メールアドレス入力項目)のIDはmailとなっているので retype-mail としています。

再入力チェックは複数項目の場合も有効で、単純に3と組み合わせるだけです。

<span class="group required hankaku email" id="groupmail"><input type="text" name="mail2" id="mail2" value="" class="" />
@
<input type="text" name="mail3" id="mail3" value="" class="" /></span>

の再入力項目は

<span class="group required retype-groupmail" id="regroupmail"><input type="text" name="remail2" id="remail3" value="" class="" />
@
<input type="text" name="remail3" id="remail3" value="" class="" /></span>

となります。

6. 入力文字数をチェックする場合

パスワードなどの項目に入力文字数の制限をかけたいときは

<input type="password" id="pass" name="pass" value="" class="required min6 max12" />

のようにclassに

• minX
• maxX (Xはともに任意の数字)

を含ませます。もちろんmin・maxどちらか一方だけを指定でき、また他のすべてのチェックと併用することができます。
ただし複数項目のメールアドレスは 文字列に@を含めるので1文字多く数えられます。(メールアドレスに入力文字数制限を使うことはないと思うのでそのままにしてます。)

7. アクティベート

最後に任意のJSファイルで以下のように実行します。

$(function(){
  $("form").validation();
});

8. アクティベート（ここでルールを指定する場合）

input要素に直接ルール（class）を指定しなくても、実行時に指定することができます。この方法のほうがHTMLを極力汚さないのでおすすめです。（ちょっとだけ処理遅いですが）

$("form")
  .exValidation({
    rules: {
      name: "required",
      kana: "required katakana",
      email: "required email hankaku group",
      pass: "required min6 max12",
      repass: "required retype-pass",
      radio: "radio",
      checkbox: "checkbox"
    }
  });

上記のように、rulesというオプションで指定します。値はそれぞれ [id: rules] となります。

オプション

exValidationは汎用性を持たせるために色々なオプションがあります。

使い方は見てるだけだと分からないと思うので、具体的なサンプルを2つ用意してます。

• サンプル1: エラーを右上に表示
• サンプル2: エラーを下に表示

サンプルのパターン1

サンプル1の形式で実行する場合は以下のようにします。（サンプルではrulesをオプションで指定しています）

$("form")
  .exValidation({
    rules: {
      name: "required",
      kana: "required katakana",
      email: "required email hankaku group",
      pass: "required min6 max12",
      repass: "required retype-pass",
      radio: "radio",
      checkbox: "checkbox"
    },
    stepValidation: true
  }); 

サンプルのパターン2

サンプル2の形式で実行する場合は以下の通りです。errInsertPosとerrPositionを指定することでサンプル2のような形のエラー表示にすることができます。

$("form")
  .exValidation({
    rules: {
      name: "required",
      kana: "required katakana",
      email: "required email hankaku group",
      pass: "required min6 max12",
      repass: "required retype-pass",
      radio: "radio",
      checkbox: "checkbox"
    },
    errInsertPos: 'after',
    errPosition: 'fixed'
  });

errFocusを使う

errFocusを使うとエラーが出ている状態で対象要素にフォーカスすると、エラーチップ以外に[fadeOut]というclassを付与します。デフォルトでは .fadeOut { opacity: .2 } を指定しているので他のエラーが透ける感じですね。(ただしIEでは動作しません。。)

errFocusのサンプル

Ajaxでポストする

exValidationでは通常のポストバックに加え、customSubmitというオプションを使うことでAjaxによるポストや、その他独自のポストを行うことができます。customSubmit実行時は通常のポストバックはキャンセルされます。

$("form")
  .exValidation({
    customSubmit: function() {
      $.ajax({
        url: "data.php",
        type: "POST",
        dataType: "json",
        data: {
          name: $("#name").val()
        },
        success: function(data) {
          console.log(data);
        }
      });
    }
  });

下記のサンプルで、エラーがない状態でポストすると、コンソールログにObjectが表示されます。（コンソールがある環境で確認してください）

Ajaxポストのサンプル

任意の要素にバリデーションをbindする

customBindを使うと任意のボタンぽい要素（例えばアンカーとか）にポスト時のバリデーションを付加することができます。ポスト内容はcallbackで設定します。

customBind: {
  object: $(任意のhoge),
  listener: '任意のpiyo',
  callback: function() { /*実行したいfuga*/ }
}

例えば、日記を書くフォームがあったとして、通常のボタンに通常Ajaxポスト、プレビューボタンにはcustomBindでAjaxポスト、などのように使うことができます。

$("form")
  .exValidation({
    customBind: {
      object: $('#submit'),
      listener: 'click',
      callback: function() {
        alert('Fake POST');
      }
    }
  });

サンプルではただのアンカー要素にcustomBindしています。

customBindのサンプル

エラー時に関数を実行する、エラーがない場合に関数を実行する、スクロール位置を固定する

エラー時に関数を実行する

エラーがあったときに関数を実行したい場合はcustomAddErrorを指定します。指定した関数はスクロール前に実行されます。

エラーがない場合に関数を実行する

エラーがないときに関数を実行した場合はcustomClearErrorを指定します。指定した関数はsubmitやcustomSubmit前に実行されます。

スクロール位置を固定する

スクロール位置を固定したい場合は、customScrollAdjustを指定します。customScrollAdjustはデフォルトはfalseになっていますが、数値または数値を返す関数を指定できます。

この3つを一連の流れで実装したサンプルがありますので確認してください。

var validation = $("form")
  .exValidation({
    rules: {
      name: "required",
      kana: "required katakana",
      email: "required email hankaku group",
      pass: "required min6 max12",
      repass: "required retype-pass",
      radio: "radio",
      checkbox: "checkbox"
    },
    errInsertPos: 'after',
    errPosition: 'fixed',
    customAddError: function() {
      if ( $("#alert").length<1 ) {
        $("p.attention").before("<div id=\"alert\"><strong>入力内容に誤りがあります。</strong></div>");
      }
    },
    customClearError: function() {
      $("#alert").remove();
    },
    customScrollAdjust: function() {
      return $("#alert").offset().top;
    }
  });

ポイントはcustomScrollAdjustではcustomAddErrorで表示した追加エラー分のポジションを取得して返しているところでしょう。

スクロール位置の固定やエラー時の追加関数のサンプル

API

実行時にインスタンスを指定しておくと、APIを利用することができます。

var validation = $('form').exValidation();

laterCall

laterCallを使うと任意のタイミングで指定したフォーム要素をバリデーションできます。

var validation = $('form').exValidation();
$('#button').click(function() {
  validation.laterCall('#name');
});

laterCallのサンプル

jQselectableとの併用

laterCallを利用するとjQselectableと併用することができます。具体例はサンプルを確認してください。

var validation = $("form").exValidation();
var selectable = $('#pref').selectable({
  callback: function() {
    validation.laterCall('#pref');
  }
});

バリデーションルール

exChecker-ja.jsを読みこめば基本的なバリデーションは行えますが、独自のルールを使いたいときは、exChecker-ja.jsを修正、追記するか、新しいバリデーションルールを書いたファイルを読み込みます。バリデーションルールは以下のように定義します。

(function($) {
  // Extend validation rules
  $.extend(validationRules, {
    retype: [
      '入力内容が異なります',
      function(txt, t) {
        var elm = $('#'+$(t).attr('class').split('retype\-')[1].split(/\b/)[0]);
        if ( elm.hasClass('group') ) {
          var chktxt = $('input', elm), txt = $('input', t);
          for ( var i=0, flag=false; i<chktxt.length; i++ ) {
            if ( chktxt[i].value==txt[i].value ) flag = true;
            else flag = false;
          }
          if ( flag ) return true;
        } else {
          return elm.val() == txt;
        }
      }
    ],
    email: [
      '正しいメールアドレスの形式を入力してください',
      /^[^\@]+?@[A-Za-z0-9_\.\-]+\.+[A-Za-z\.\-\_]+$/
    ]
  });
})(jQuery);

exValidation側で用意しているvalidationRulesをextendする形でルールを記述します。バリデーションはclass名で行うので

class: [
  "エラーメッセージ",
  /RegExp/ or function(txt, t) {}
]

のようにハッシュのプロパティの中にメッセージとルールを配列として記述します。単純に正規表現だけでチェックするときは、Array[1]には/RegExp/、その中でさらに分岐などの条件を含む複雑なバリデーションルールの場合は、Array[1]にfunction(受け取るテキスト, 対象フォーム要素のid: 省略可) {}で記述します。

その他

たぶんバグとか潜んでるので、あればコメントやTwitterで教えてください。前のvalidation.jsもそうでしたが、利用してる人の支えで安定していくので、、よろしくお願いします。

サイトの検索で外部検索エンジンを使うときなど、サイトはUTF-8なのに用意された検索エンジンはShift_JIS、、のようにサイトと検索エンジン側の文字コードが違う、というのはよくある話で、そうすると文字化けを起こします。

hiddenパラメータで文字コードを送る

そういうときはhiddenパラメータでサイト側の文字コードを埋め込んでおくといいです。

<input type="hidden" name="charset" value="UTF-8" />

以下のようにform要素に入れておきます。

<form action="hogehoge">
  <input type="hidden" name="charset" value="UTF-8" />
  <input type="text" name"text" value="" />
  <input type="submit" value="submit" />
</form>

accept-charset属性

formのaccept-charsetという属性で検索エンジン側の文字コードを指定することでも回避できるようですが、IEが未対応なようで、実用的ではないです。

概要など

リンクがマウスカーソルから逃げ回ります。それだけです。

注意とか

• 捕まえにくいやつもいれば簡単に捕まえられるやつもいます
• 小さいやつは逃げ足が速いです注意。
• リンクが多ければ多いほど重くなります。
• IEだとだいたい重いです。
• Chromeでさくさく。

使い方

以下のリンクをブックマークバーにドラッグして、ブックマークバーからクリックするだけです。また、サイトのリンクに埋め込むことで、自分のサイトで使うこともできます。

つかまえてごらーん

どんなものか分からない方は、とりあえず上のリンクをクリックしてみるといいです。

ブックマークレットのソース

javascript:(function(){var s=document.createElement('script');s.charset='UTF-8';s.src='http://5509.me/sample/bookmarklet/runaway.js'; document.body.appendChild(s)})();

ソースコード

RunAway.js

うーん

誰得プラグインシリーズは大体ブックマークレットのほうが面白かったのかもしれないとか思ったり思わなかったり。

Thanks

アニメーション部分のソースはhisasannさんが以下の記事で作成していたものを、許可を得て転用しています。

jQueryでマウスから逃げるRunAwayFromMouse書いてみた Part2 | HouseTect, JavaScript Blog

ユーザーローカルさんのUserHeatというサービスを使っているのですが、マウスの動き・よくクリックされている箇所・どこがよく見られている等が一目で分かるので、ナビゲーションや記事の書き方の改善などに役立てることができますね。（全然役立てれてませんけど）

どこが見られてるの？

個人的に全然役に立てられていないこのUserHeatでの集計結果ですが、ひょっとしてひょっとすると誰かの役に立つかもしれないので晒して共有します。ただページが長くて全部入りきってないものがほとんどですけど…その辺は想像でカバーですね！

ちなみにサムネイルは左から順にマウストラック、クリックマップ、ヒートマップです。サムネイルクリックでフルサイズのキャプチャを開きます。

あ、どなたか解析してくれる人募集してます。。

リアルタイムフォームバリデーション jQuery.validation.js

自作プラグインの紹介ページで、ページ上部にダウンロードインストールなど主要セクションがあり、中盤以下は細かい使い方になってます。ありがたいことにダウンロードに集中してますね。ほんとありがとうございます。

• リアルタイムフォームバリデーションのアーカイブ

CMSとしてのWordPressでサイト構築をするときに便利な13のプラグイン

よくあるプラグインまとめページです。上の方からざっと見てブックマークして離脱、という行動パターンが多そうです。これは一番紹介したかったCustom Field GUI Utilityにクリックが集中してるのでよかったパターンですね。

• CMSとして使うWordPressプラグインのアーカイブ

jQueryを使ったスライド開閉メニューをCookieでコントロールする

チュートリアル系の記事です。比較的下のほうまで見られてますね。ソースコード部分に集中してそうな感じなので、もっと補足コメント入れたほうがいいのかも。

• アコーディオンナビゲーションのコントロールのアーカイブ

じわじわ便利なjQuery1.4で追加された機能いろいろ+α

むしろ1.4の新機能よりも伝えたかったjQueryの機能部分が全然見られてないYO。。やっぱりおまけはおまけでしかない感じですね。書き方が悪いのか。。

• jQuery1.4の新機能とあんまり知られてない機能のアーカイブ

まとめ

はてなスターが面白いほど認知されてないｗ
たしかにデザインというか色味的にみえにくいですし。。それか左の記事メタ部分にその辺（SBM、Twitter含め）置いて、スクロールに付いてきたほうがクリックされそう。

広告がもっと入ってるブログとか、実際のサイトの結果で見たらもっとおもしろいかもしれませんね。

ちなみにUserHeatのトップページ下部にはサンプルとして、登録されているサイトの集計結果を一部見ることができる（そもそも集計結果のページはURLさえあれば誰でも見れます）ので、参考になりますよ。nanapiとか百式の集計結果など参考になりそうです。

jQueryオブジェクトからDOM要素にアクセスする方法やメソッドで渡されるjQueryオブジェクトの扱いなど基本といえば基本ですが、再認識メモです。なので、タイトルは自分に覚えとけよってことです。。

jQueryオブジェクトからDOMにアクセスする

$(‘#id’)にすれば#idを取得できますが、この状態だとDOM要素を選らんでいる状態ではないので、DOM要素のプロパティにはアクセスできません。

$('#link').href
// これは無理

1-1. $()[0]

要素を引数にしたjQueryオブジェクトはDOM要素が配列で格納されている状態なので

$('#link')[0]
// DOM要素の参照になる

console.debug($('#link')[0]);
// 評価結果 - DOM要素
// <a id="link" href="llink.html">

とすることで配列の中からDOM要素を指定することができるので、プロパティにアクセスすることができます。

var href = $('#link')[0].href;
// 以下と同じですけどね
var href = $('#link').attr('href');

※ 追記 10.06.29
コメントいただきましたので追記します。上記は同じ値ではないようなので注意が必要です。（僕が注意します）

this.hrefはDOM上の記述に寄らずhttp://からのパスが返りますが、$(this).attr(‘href’)はDOM上の記述に沿った内容が返ります。

via: jQueryを使い始めたときに感じる 13の疑問

1-2. $().get(0)

そもそも配列だけを抜きたいときは.get()メソッドを使いますが.get(0)というように引数に0(index)を入れると上記と同じ効果が得られます。

$('#link')[0]
// ↑と↓は同じ意味
$('#link').get(0)

console.debug($('#link').get(0));
// 評価結果 - DOM要素
// <a id="link" href="llink.html">

jQueryオブジェクトに対してメソッドで渡されるthisの扱い

DOM要素の取得方法は上記の通りですが、$().each(function() {});のようにjQueryがもっているメソッドを実行する際、メソッド内で実行対象を受け取ることができます。ただ、この受け取れるthisについても補足しておくと、、

2-1. eachとかclickなどのjQueryメソッド内でのthis

これはちょっと肝なのですが、eachメソッドやclickメソッドなどのjQueryがもともと持っているメソッド内で渡されるthisはjQueryオブジェクトではないんですね。DOM要素になっています。要素が複数ある場合は配列として渡されます。

$('#link').each(function() {
    console.debug(this);
});

// 評価結果 - DOM要素になっている
// <a id="link" href="llink.html">

※ 単一のjQueryオブジェクトに対してeach使うの気持ち悪いですけど、例ってことで。。

2-2. 自作メソッド内でのthis

2-1に対して、jQueryがもともと持っているメソッドに対して自作メソッド（プラグイン関数など）で渡されるthisはjQueryオブジェクトになっています。

$.fn.myMethod = function() {
    console.debug(this);
}
$('#link').myMethod();

// 評価結果 - jQueryオブジェクトとして渡される
// jQuery(a#link llink.html)

つまり。。。

基礎はちゃんと押さえておかないと後で面倒くさいってことです。。

先日のHootSuiteバージョンアップで公式RTと引用する形のRTを切り替えられるようになりましたね。今までは引用する形のRTしか使えなかったので少し不便でしたが、これで両方を使い分けられるようになりました。なったんですけど、いちいち切り替えるのがかなり面倒くさくて、毎回同じことなんかやってられないです。

そこで探していたところ@h_kurosawaさんがBookmarkletを公開してくれていたので、UserScript化させてもらいました。ChromeとFirefoxで動作確認してます。

インストール

This script for Chrome and Firefox with Greasemonkey

• Install UserScript

使い方

インストールした状態でHootSuiteを開くとフッターに以下のようなチェックボックスが追加されています。引用する形のRTを「Web Retweet」、公式RTは「Official RT」の表記にしています。

これをクリックすることで公式RTに切り替えることができます。

チェックした状態としてない状態でRTを試してみてください。簡単ですね！

jQueryを使えば超簡単にアニメーションもできますし、フェード効果の実装も楽々できますね。簡単に実装できるので結構使ってるサイトを見ますが、カーソルを素早く乗せたり外したりするとチラチラすることが多いんですよね。

何言ってるか文章だと伝わりにくいので、サンプル1を確認してみてください。

どうでもいいっちゃどうでもいいのかも知れないですけど、こういう小さなこだわりって結構重要なんじゃないでしょうか。

で、このチラチラ、簡単に解決できるので知らなかった人は覚えておくといいかもです。

結論は簡単で

• .stop(true, false)を.animate()の前に入れる
• .animate()メソッドのオプション部分でqueue: falseを指定する

のいずれかです。

このときに.stop()メソッドを利用するのですが、.stop()メソッドには2つ引数を指定できて、引数の値で動作もちょっと変わったりします。実際に動作を見てもらったほうが早いのでサンプルを用意しました。

サンプルと同じように順番に見ていきましょう。

1. そのまま

サンプル1のボックスに連続してホバーしてください。チラチラしますよね。

ソースコード

$('#s1 div.box')
    .hover(function() {
        $(this).animate({
            opacity: .5
        }, {
            duration: 200
        })
    }, function() {
        $(this).animate({
            opacity: 1
        }, {
            duration: 200
        })
    });

2. .stop(true, true)

サンプル2のボックスに連続してホバーすると、ぴかぴかしますね！

ソースコード

$('#s2 div.box')
    .hover(function() {
        $(this).stop(true, true).animate({
            opacity: .5
        }, {
            duration: 200
        })
    },function() {
        $(this).stop(true, true).animate({
            opacity: 1
        }, {
            duration: 200
        })
    });

3. .stop(true, false)

サンプル3のボックスにキューがたまっている状態で他のブロックにホバーすると、キャンセルします。たぶん一番自然。

ソースコード

$('#s3 div.box')
    .hover(function() {
        $(this).stop(true, false).animate({
            opacity: .5
        }, {
            duration: 200
        })
    }, function() {
        $(this).stop(true, false).animate({
            opacity: 1
        }, {
            duration: 200
        })
    });

4. queue: false

サンプル4のボックスにキューがたまっている状態で他のブロックにホバーすると、キャンセルします。.stop(true, false)と同じ効果。これも自然。

ソースコード

$('#s4 div.box')
    .hover(function() {
        $(this).animate({
            opacity: .5
        },{
            duration: 200,
            queue: false
        })
    }, function() {
        $(this).animate({
            opacity: 1
        }, {
            duration: 200,
            queue: false
        })
    });

簡単にチラチラを回避できるのでぜひ覚えておきましょう！

以下のどちらかですね！今回は.animate()メソッドで紹介してますが、.stop(true, false)はfadeIn(), fadeOut(), fadeTo()にも使えますよ！

• .stop(true, false)を.animate()の前に入れる
• .animate()メソッドのオプション部分でqueue: falseを指定する

• 動作サンプル

【番外編】

番外編にして最もクール。

jQueryが他のライブラリと干渉してプラグインが動かない！なんてことありませんでしたか？干渉するなら無効化すればいいですよ。このプラグインでね！

Live demo (コンソールとかで見てください)

• jdtNoQuery.js

使い方

jQueryのあとにjdtNoQuery.jsを読み込むだけです。ここ重要です。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", '1.4');</script>
<script type="text/javascript" src="js/jdtnoquery.js"></script>

注意

プラグインちゃうやんっていうツッコミはコメント等で受け付けてます。

本当に最後

昨日公開した「誰が使うの？何の役にも立たないjQueryプラグイン10選」の番外編というか総集編というか、もう総力戦というか。ようはオチです。ありがとうございました。

Windowを広げると逆にカラムを縮めるプラグイン jDTreverseLiquid

リキッドレイアウトはテキストメインのサイトで見やすさを発揮しますね。でもそんなの当たり前です。Window幅に反比例してカラムサイズが変わるのがこれからの主流ですね！

右クリックどころかクリックすらも禁止するjQueryプラグイン jDTNeverClick

右クリック禁止のサイトあるじゃないですか。あれ本当に最低のユーザビリティだと思ってたんですけど、違いますね。クリックまで禁止して始めて最悪のユーザビリティが生まれるんです。これからはクリックも禁止の時代です。

スムーズにスクロールしないjQueryプラグイン「jDTScroll」

スムーズにスクロールすることが当たり前だと思ってる現代人にはぴったりのプラグインですね。スクロールバーだってやる気があるときないときあるんです。わかってあげてよ。。

チェックボックスがはんぱない結束力を発揮する jDTSynergyCheckbox

チェックボックスってユーザに決められ通の動作しかできないんですよ。かわいそうじゃないですか？チェックボックスにも意思があると思うんですよね。そう、こんな風に…

うっかりタブの中身を盗まれるjQueryタブプラグイン jDTTabs.js

大切なタブの中身も天下の大泥棒の手にかかればほらこの通り。

人の嫌がることを進んで出来るプラグイン jDTGnoKyouhu.js【グロ注意】

嫌だと言われると余計意地悪をしたくなってしまうのが人間の性。Gは大多数の人が嫌悪感を持つということは、、Gを大量に表示させればみんな嫌がるんじゃ…！（サンプルは念のためモザイクをかけてます）

これからの新標準 jDTLightBox

フツーのLightboxに飽きていた、みんなとは違うLightboxを実装したい、と思っていたあなた。僕が作りました。この新感覚Lightboxをぜひお試しください。

クリックさせないリンク jDTRunAway

リンクはクリックできるものだと思っていませんか？クリックできない・させないリンクもいるんです。意地の悪いやつらですね。

ものすごい勢いでロールオーバーするjQueryプラグイン「jDTRollover」

ロールオーバー。それはロル男の人生そのもの。

大切なところは見ちゃいや… jDTGirigiriMosaic.js

え？サイトの画像をそのまま表示してる？だめですよ…そんな卑猥なものを生で表示するなんて…いやらしい…

おまけ

これらのプラグインはGooglecodeにあります。（ドキュメントはありませんが…）実はどんな案があってっていうのはこのGooglecodeのWikiに集約されてました。

もし興味のある奇特な方がいれば、参考になるかわかりませんが、ぜひ実装して（作って）教えてください！

あとがき的な

世の中には役に立つプラグインはあっても役に立たないプラグインは(あまり)ないんじゃないか、的な発想から生まれたこのしょうもない企画。そもそもの発端は僕がこのまとめ記事「誰が使うの？何の役にも立たないjQueryプラグイン10選」を書きたいと言ったことでした…まさか本当にやるなんて…

参加メンバー（アイデア出しと実装など）もまさか本当にやるとは思ってなかったでしょう。実装してくれたRewishさんとYusukeNakanishiさんありがとう！一番しょうもない案をばんばん出してくれたhilokiさんもありがとう！

十分ふざけたので次は真面目なの作ります。

Live demo
Download demo files

導入方法

1. jQueryとｊDTGirigiriMosaicを読み込む

<script type="text/javascript" src="js/lib/jquery.js"></script>
<script type="text/javascript" src="js/lib/jdtgirigirimosaic.js"></script>

3. 実行する

$()で対象にする画像を指定します。

jQuery(function($) {
  $('img').jdtGirigiriMosaic();
});

オプション

薄いほうが卑猥…

Live demo
Download demo files

注意

薄くするなんて卑猥！！！！！！

IE

はcanvas使えないので別途使えるようにする何かをつかってください…

リンクがクリックしにくかったら…まあうざいでしょうね。
そんな素敵なプラグインをつくってみました。

Live demo
Download demo files

導入方法

1. jQueryとjDTLightBoxを読み込む

<script type="text/javascript" src="js/lib/jquery.js"></script>
<script type="text/javascript" src="js/lib/jdtlightbox.js"></script>

3. 実行する

$()で対象にする要素を指定します。（サンプルではアンカーに適用していますが、きっとなんにでも使えるはず）

jQuery(function($) {
  $('a').jdtRunAway();
});

オプション

やりすぎると大体重くなる

Live demo
Download demo files

注意

ｱﾊﾊﾊﾊ つかまえてごらーん

Thanks

アニメーション部分のソースはhisasannさんが以下の記事で作成していたものを、許可を得て転用しています。こんなばかなプラグインのために、、快諾していただきありがとうございます。

jQueryでマウスから逃げるRunAwayFromMouse書いてみた Part2 | HouseTect, JavaScript Blog

ユーモアが足りないからじゃないですかね。

というわけでユーモアたっぷりかどうかはアレですが、これからのWebサイトをひっぱっていくであろう新標準LightBoxをつくりました。1から作りました。

Live demo
Download demo files

導入方法

1. jQueryとjDTLightBoxを読み込む

<script type="text/javascript" src="js/lib/jquery.js"></script>
<script type="text/javascript" src="js/lib/jdtlightbox.js"></script>

3. 実行する

$()で対象にする要素を指定します。（アンカーに適用します。）

jQuery(function($) {
  $('#lightbox a').jdtLightBox();
});

オプション

期待を裏切れます。

Live demo
Download demo files

注意

え？余計見にくい？見にくいなら閉じろ！

Live demo
Download demo files

導入方法

1. jQueryとjDTTabsを読み込む

<script type="text/javascript" src="js/lib/jquery.js"></script>
<script type="text/javascript" src="js/lib/jdttabs.js"></script>

2. タブのHTMLを用意する

タブのHTMLは以下のようにします。

<div id="jdtTabs">
  <ul class="tab">
    <li><a href="#tab1">tab1</a></li>
    <li><a href="#tab2">tab2</a></li>
    <li><a href="#tab3">tab3</a></li>
    <li><a href="#tab4">tab4</a></li>
    <li><a href="#tab5">tab5</a></li>
  </ul>
  
  <div id="tab1">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
  aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
  aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
  aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
  aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
  <div id="tab2">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br />
  bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br />
  bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br />
  bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br />
  bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
  <div id="tab3">ccccccccccccccccccccccccccccccccccccccccccccccccc<br />
  ccccccccccccccccccccccccccccccccccccccccccccccccc<br />
  ccccccccccccccccccccccccccccccccccccccccccccccccc<br />
  ccccccccccccccccccccccccccccccccccccccccccccccccc<br />
  ccccccccccccccccccccccccccccccccccccccccccccccccc</div>
  <div id="tab4">ddddddddddddddddddddddddddddddddddddddddddddddddd<br />
  ddddddddddddddddddddddddddddddddddddddddddddddddd<br />
  ddddddddddddddddddddddddddddddddddddddddddddddddd<br />
  ddddddddddddddddddddddddddddddddddddddddddddddddd<br />
  ddddddddddddddddddddddddddddddddddddddddddddddddd</div>
  <div id="tab5">eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee<br />
  eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee<br />
  eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee<br />
  eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee<br />
  eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</div>
</div>

3. 実行する

$()で対象にする要素を指定します。

jQuery(function($) {
  $('#jdtTabs').jdtTabs();
});

オプション

やってやった感を演出。

Live demo
Download demo files

注意

俺に盗めないものなんてないんだぜ？

結束力大事ということでチェックボックスに某倶楽部並の結束力を与えてみました。
オプションを使えば違う意味でのシナジーを発揮します。

Live demo
Download demo files

導入方法

1. jQueryとjDTSynergyCheckboxを読み込む

<script type="text/javascript" src="js/lib/jquery.js"></script>
<script type="text/javascript" src="js/lib/jdtsynergycheckbox.js"></script>

2. 実行する

$()で対象にする要素を指定します。

jQuery(function($) {
  $('input').jdtSynergyCheckbox();
});

オプション

チェックボックスたちの不満の声。

Live demo
Download demo files

注意

チェックボックスだって不満はあるんです。

ユーザーのうざがってる顔が見たいという鬼畜なあなたのために、右クリックどころかクリック・ダブルクリックすら禁止するjQueryプラグイン作りました。

Live demo
Download demo files

導入方法

1. jQueryとjDTNeverClickを読み込む

<script type="text/javascript" src="js/lib/jquery.js"></script>
<script type="text/javascript" src="js/lib/jdtreverseliquid.js"></script>

2. 実行する

$()で対象にする要素を指定します。

jQuery(function($) {
  $(document).jdtNeverClick();
});

オプション

オプションを使えば、割り当てるlistenerとアラートの表示非表示・文章を変更できます。

Live demo
Download demo files

注意

わかってますよね？

普通じゃ嫌・みんなと同じは嫌なあなたのために「Windowを広げると縮む・縮めると広がるプラグイン」を作りました。

Live demo
Download demo files

導入方法

1. jQueryとjDTreverseLiquidを読み込む

<script type="text/javascript" src="js/lib/jquery.js"></script>
<script type="text/javascript" src="js/lib/jdtreverseliquid.js"></script>

3. 実行する

$()で対象にする要素を指定します。

jQuery(function($) {
  $('＃contents').dtReverseLiquid();
});

オプション

オプションを使えば、広がる割合の設定、コールバック関数を使うことができます。

Live demo
Download demo files

注意

ネタです。

以前に作ったWordPressプラグイン「WP-AutoPagerize」ほぼ書き直して作り直したので、新しいものとして公開します。変更点を書いても仕方がないので主な要件を書いておきます。けっこう色んな環境で使えるようにしたつもりです。

• jQuery不要
• 管理画面からオプションの変更ができる
• 自動読み込みに加え、ボタン（リンク）クリックで読み込むオプション
• ページ番号を追加しないオプション
• ページ読み込み前の処理をJSで追加できるようにした
• ページ読み込み後の処理（コールバック）をJSで追加できるようにした

動作サンプルもあります。

ダウンロード

• WP-AutoPagerize (WordPress Plugin Direcory)

インストール

1. WP-AutoPagerizeディレクトリをpluginsディレクトリにコピー
2. 管理画面のプラグインからアクティベート

テンプレートに

<?php wp_head(); ?>

と

<?php wp_footer(); ?>

がないと動作しないので、確認しておいてください。

ページャーを含んでいるので、ページャーを表示させたい箇所に以下のコードを入れて下さい。またコードは、記事ループの直後においてください。（でない場合は、要素の挿入位置オプションを利用して、追加記事の位置を指定してください)

<?php if(function_exists('wp_autopagerize')) { wp_autopagerize(); } ?>

このブログにも入れてみました。GreasemonkeyのAutoPagerizeは動作しなくなりました。

↑こんな感じになってます。個人的にローディング画像など変えてみました。

オプション

オプションは全てプラグイン管理画面から行います。WP-AutoPagerizeをインストールしてアクティベートすると、WordPress管理画面の設定の項目に「WP-AutoPagerize」が表示されますので、こちらから変更します。

Thanks

完全にPHPをコードを書いてもらったrewさんと、ずっと使い続けてくれたシロさんに感謝です。

• rew @ Rewish
• シロ @ かちびと.net

ようやくドメインを http://moto-mono.net/ から http://5509.me/ に移転しました。ドメインの移転ということで、念のため前のデータは全て残しつつ、htaccessで新しいドメインにリダイレクトしています。その辺のメモ。色々キャプチャ取り忘れたので、画像が全然なくて意味わからないかもしれないです。タイトルにもある通り、WordPressでのデータ移転も含めて書きました。

準備

1. 新しいドメイン（ディレクトリ）にWordPressをインストールしておく

そのままなんですけど、先にインストールしておきます。プレフィクス（テーブル接頭語）は基本的に以前のブログと同じもので大丈夫ですが、同じDBを使う場合はあとあと置換するプレフィクスにしておきます。ここではgogo09_。

2. wp-contentをコピーしておく

テーマとかプラグイン、アップロードした画像ファイルなどもろもろ入っているのでこれもアップロードしておきます。

3. データをまるっとバックアップ

データのエクスポートはWordPress Database Backupで。
Redirectionも使っているのですが、このRedirectionのログがあほみたいに容量（6MB強）が大きかったのでこれだけチェック外しました。

4. プレフィクスを置換する

そもそも違うDBを使う場合はそのままで問題ないですが、今回は同じDBを使っているので、プレフィクスを置換しました。ダウンロードしたバックアップSQLデータをテキストエディタで開いて（シンタックスハイライトはオフにしないと大変なことになります）、一発置換でいいです。

“next_” >> “gogo09_”

データの取り込みからWordPressへの適用

1. バックアップデータをインポートする

プレフィクス置換済みのものをインポートします。インポートはphpMyAdminのImportから行いました。

2. ドメインを書き換える

設定が古いドメインのままになっているので、まずはDBを書き換えます。ドメイン設定は、プレフィクス_optionsに含まれています。

Browseから一覧を表示してsiteurlの項目の値を新しいドメインに書き換えます。

3. WordPressにアクセスする

http://新しいドメイン/wp-admin からWordPressにアクセスします。するとデータが更新されて、中身盛りだくさんなブログになっているはずです。

3-1. 基本設定のWordPressの場所を変更する

上のほうですね。新しいドメインに変えます。

3-2. アップロードファイルを変更する

これも新しいディレクトリに変えておきます。

4. 記事などに含まれる古いドメインを新しいドメインに書き換える

これはSearch Regexというプラグインを使うと簡単に書き換えることができます。

検索するとずらっと出てくるので、Search patternに検索語、Replace patternに置換するものを入れてReplate & Saveボタンをクリックすることで一発置換できます。

ここまでで、新しいドメイン上で今までのデータを持ったブログができました。

(5.) パーマリンクの変更

ドメインを変えたことにあわせて、記事のパーマリンクも変更しました。なんせ長かった･･･

今までのパーマリンク：/%year%/%month%/%day%/%postname%.html
新しいパーマリンク：/log/%postname%

だいぶすっきり！

mod_rewriteを使ったリダイレクトの設定

このままだと諸々登録されている古いブログのほうにアクセスが集まってしまうので、新しいブログへリダイレクトを設定します。htaccessでmod_rewriteの指定を行います。ドメインが変わるので、恒久的なリダイレクトになり、ステータスコードは301を使います。

mod_rewriteの指定方法は「URLの書き換え Rewrite」を参考にしてください。

RewriteRule ([^\/\.]+)\.html$ http://5509.me/log/$1 [R=301,L]
RewriteRule index.php http://5509.me/ [R=301,L]
RewriteRule ^(feed|about|labs)$ http://5509.me/$1 [R=301,L]
RewriteRule ^(tag|category)(\/.*)$ http://5509.me/$1$2 [R=301,L]
RewriteRule ^([0-9]+)(\/[0-9]+)? http://5509.me/log/$1$2 [R=301,L]

1行目は、旧記事URLから新しいURLへのリダイレクト。
2行目は、トップページのリダイレクト。
3行目は、ページとfeedのリダイレクト。
4行目は、タグとカテゴリページのリダイレクト。
5行目は、アーカイブページのリダイレクト。

記事URLのリダイレクト

重要なのは1行目なので、そこだけ解説しておきます。たとえば、要素をふわっと表示させる〜のURLは

http://moto-mono.net/2010/04/30/whatinout.html

ですが、新しいURLのルールは

http://5509.me/log/whatinout

に変わります。共通する箇所は太字になっているところなので、この部分を正規表現で取得します。正規表現は

([^\/\.]+)\.html$

になり、（）で取得した部分を$1で取得できるのでリダイレクトのURLは

http://5509.me/log/$1

となります。

にそれぞれなっています。基本的に正規表現が使えるはずですが、チカッパはapacheのバージョンが1.3.xx系だったので \d{2} とかが使えませんでした。

Google Analyticsなど使っているサービスのドメイン変更など

最後に、使っているサービスのドメインを変更しておきます。これが結構多くて大変でしたね。。

それにしても

全部の数字が0とか新鮮ですね･･･なんとなく記念にキャプチャした。

さみしくなんかないよ･･･！

で、名刺と一緒にロゴとパターンも作ってもらって、ブログのロゴと背景をそれに置き換えました。ロゴはゆにをモチーフにしたものだそうでこれまたかわいい･･･

ちなみに裏のかえるは自分で貼ったステッカーなので、お渡ししてる分にはかえるはいないです。でも貼ったらますますかわいくなったので、なにか貼りたいなー。

5509の読み方

「ごーごーぜろきゅー」が正しい読み方らしいですけど、「ごじゅうごおく」っていう読み方もあります。もう「ごーごー」でいいんじゃないですかね（投げやり

ふわっとするためだけにeasingが必要になるいけてない仕様なんですけど、easingを別のところでも使ってカバーしてください（！）それかeasing関数を書いてもらえると･･･

Live demo
Download demo files

導入方法

1. jQueryとeasingプラグイン、whatinoutを読み込む。

<script type="text/javascript" src="js/lib/jquery.js"></script>
<script type="text/javascript" src="js/lib/easing.js"></script>
<script type="text/javascript" src="js/lib/whatinout.js"></script>

3. 実行する

$()で対象にする要素を指定します。実際に使う場合は、ふわっと表示させたいときにwhatIn()、ふわっと消したいときにwhatOut()、ふわっとスライドインしたいときにwhatSlideIn()、ふわっとスライドアウトしたいときにwhatSlideOut()を実行します。この辺はshow()やhide()、fadeIn()やfadeOut()と使い方がよく似ているので問題はないでしょう。

jQuery(function($) {
	$('.whatInOut').whatIn({
		sizeFrom: 95,
		duration: 500
	});
	$('.whatInOut').whatOut({
		sizeTo: 95,
		duration: 500
	});
	$('.whatInOut').whatSlideIn();
	$('.whatInOut').whatSlideOut();
});

オプション

実行時の引数にオプションを与えることで、設定をある程度変えることができます。使うことが出来るオプションは以下の通りです。

whatIn()とwhatOut()、whatSlideIn()とwhatSlideOut()ではそれぞれオプション項目の名前がちょっと違います。

whatIn()

whatOut()

whatSlideIn()

whatSlideOut()

Live demo
Download demo files

仕様

• インラインな要素には適用できないっぽいです（改善中かも
• 連続して実行してもたぶん大丈夫
• クロスブラウザ

Special Thanks

mukimukiメンバ、@yunozy

CSS Nite LP, Disk 9「Coder’s Higher」で「Coding with jQuery」というタイトルのお話をさせていただきました。

出演させていただいたことはもちろん、ずっとお話したかった方々にお会いできたり、mukiオフだったりとても楽しい1日でした。出演者のみなさま、聞いてくれたみなさま、スタッフのみなさま、本当にありがとうございました。

どれくらい緊張したのかっていうのは、写真の顔のてかり具合を見れいただければ･･･汗がはんぱなかったです。終わったあとは髪型が60%くらい変わってましたね。

本当はもっと突っ込んだところとかも話したかったのですが、結構流し気味だったので。。ともあれ、今回一番伝えたかったことは、jQueryもっと使ってみようよ！っていうことで、少しでもやってみよう！という気持ちになっていただけたのならうれしいです。

あ、あとたぬきも人気だったようでなによりです。たぬきかわいいねんで。

紹介した本

この2つはかなりの良著で、JSを始めたいと思っているコーダー・Webデザイナーの方には最適です。JSの基礎もあったりするのですが、とりあえずはこの2つを読んでみて、突っ込んだところが必要になってきてからでいいと思います。

Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL)
	西畑一馬 アスキー・メディアワークス 2010-02-12 売り上げランキング : 41463 おすすめ平均 プログラム初心者にお勧め 自分でJavascript操作したい人にお勧め Amazonで詳しく見る by G-Tools

追記： DOM Scripting標準ガイドブックは絶版なようで、Amazonでもマーケットプレイスでしか買うことができません。現在ジュンク堂であれば、在庫が少しあるようなので、予定がある人はお早めにどうぞ。

http://www.junkudo.co.jp/detail.jsp?ID=0107952153

DOM Scripting 標準ガイドブック ~やさしく学ぶ、JavaScriptとDOMによるWebデザイン~ (Web Designing BOOKS)
	Jeremy Keith (著), 中村 享介 (監修), 吉川 典秀 (翻訳) 毎日コミュニケーションズ 2007-06-21 売り上げランキング : 18058 おすすめ平均 これからのWEBデザインには必須の本 初心者にはおすすめできません。 デザイナに役立つ良書です Amazonで詳しく見る by G-Tools

var isFlashInstalled=function(){if(navigator.plugins["Shockwave Flash"]){return true;}try{new ActiveXObject("ShockwaveFlash.ShockwaveFlash");return true;}catch(a){return false;}}();

if文で使えます

if ( isFlashInstalled ) {
  alert('Flash Player is installed');
} else {
  alert('Flash Player is not installed');
}

実行サンプル

圧縮前のソースはこんなんです。

var isFlashInstalled = function() {
  if ( navigator.plugins['Shockwave Flash'] ) {
    return true;
  }
  try {
    new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
    return true;
  } catch (e) {
    return false;
  }
}();

ソース見てもらえば分かると思うんですけど、本当は

!!navigator.plugins['Shockwave Flash']

これだけでいけるんですよね。IEのせいで超ムダに長くなってますw

Urchin6のUTMとGoogle Analytics(以下ga)を併用するときはUrchin側の導入コードが少し変わります。

1. 必要なファイルの準備

「__utm.gif」をサーバー（ドメイン）ルートにコピー。

2. UTMを利用するためにgaのコードに追加

urchin.jsを使っている場合

<script type="text/javascript">
_userv=2; // ここを追加
_uacct="UA-XXXXXXX-Y";
urchinTracker();
</script>

ga.jsを使っている場合

<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-xxxxxx-x");
pageTracker._setLocalRemoteServerMode(); // ここを追加
pageTracker._initData();
pageTracker._trackPageview();
</script>

どちらもローカル サーバー モードの変更で、デフォルトではGAのサーバーのみに送信しているので、これをローカルサーバー（Urchinのサーバー）にも送信するように設定できます。

参考： http://www.google.com/support/googleanalytics/bin/answer.py?hl=jp&answer=76305

ドキュメントを見てると、「__utm.gif」はルートじゃなくてもよさそう。その場合は

_ugifpath = 'newLocalGifPath'; // urchin.jsの場合
pageTracker._setLocalGifPath(newLocalGifPath); // ga.jsの場合

でそれぞれ指定してあげればよさそう。
あ、Urchinの取得タイプをUTMに変更するのを忘れずに･･･

100317 16:28 追記：
Twitterの言語が日本語になっている場合、Hover Cardは表示されないようです。Englishにすれば表示されるので、オフィシャルのものとあわせて確認してみてください

最近Twitterに実装された、HoverCard（@screen_name リンクにカーソルをのせるとユーザー情報が表示されるやつ）を実装できるjQueryプラグインです。

デザインがちょっと違う・listsがfavouritesになっている、など違う点もあるのですが、基本的には同じように実装できるようにしました。インラインは現時点で未実装ですが、要望がそれなりにあれば実装しようかと思っています。

Live demo
Download demo files

導入方法

1.twttrFloatTip.css、 jQueryとtwttrFloatTip.jsを読み込む。

<link type="text/css" rel="stylesheet" href="css/twttrFloatTip.css" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load('jquery','1.4.2');</script>
<script type="text/javascript" src="js/twttrFloatTip.js"></script>

2. 適用する要素を決める

サンプルでは a.twに適用しています。要素のテキストをTwitterのscreen_nameとして情報を取得します。

<a href="http://twitter.com/dotcoder" class="tw">dotcoder</a>

3. 実行する

$()で対象にする要素を指定します。

jQuery(function($){
  $('a.tw').twttrFloatTip();
});

使い方？

ソースを読んで適用したら、対象要素にカーソルをのせるとカートが表示されます。要素が表示領域の半分よりも上にあれば、要素の下に、半分よりも下にあれば、要素の上にカードが表示されます。

上に表示されるキャプチャ

下に表示されるキャプチャ

実際の動き等はデモを見てください。

オプション

実行時の引数にオプションを与えることで、設定をある程度変えることができます。使うことが出来るオプションは以下の通りです。

テンプレート（temp）

引数のdataからパラメータを取得できるので、自由にテンプレートを変更できます。使えるパラメータは以下の通りです。

テンプレートの書き方

テンプレートは以下のように、function(data) {} の中でreturnで返すようにします。

jQuery(function($){
  $('a.tw').twttrFloatTip({
    temp: function(data) {
      return [
        '<div>',
          data['user_name'],
        '</div>'
      ].join('');
    }
  });
});

テンプレート（loading）

ローディングテンプレートの中では、ローディングテキストのみ利用できます。ローディングテキストは「this.loadingText」です。

オプション利用時のサンプルコード

jQuery(function($){
  $('a.tw').twttrFloatTip({
    user_name: 'href',
    href: 'http://hogehoge.com/',
    loadingText: 'hogeding',
    hideDuration: 100,
    temp: function(data) {
      return [
        '<div>',
          data['user_name'],
        '</div>'
      ].join('');
    }
  });
});

Live demo
Download demo files

仕様

* の項目はオプション等で変更できるようになる予定です。

• データの受信にはJSONPを使ってます
• 一度受信したデータはページを遷移するまでキャッシュされます
• * インラインのHover Cardは現在未実装
• 受信しているデータの関係で、オフィシャルで lists になっている項目は favourites になってます
• * Lates Tweet で @で始まるユーザ名やリンクがある場合は、アンカーを貼る仕様にしています
• 要素からカーソルを外して500ミリセカンド後にCardが消えるようになっています

Special Thanks

@rew @ rewish
割と強引に色々見てもらいました。

更新履歴

2010.03.31

横の判定も追加して、右寄りのときは左に表示するように

2010.03.29

オプション項目を追加

// Set Styles
function set_styles(elm, hash) {
  for( var c in hash ) {
    elm.style[c] = hash[c];
  }
}

これさえあれば、あとは簡単

set_styles(element, {
  margin: '5px 0 5px 5px',
  width: '100px',
  height: '100px',
  fontSize: '14px'
});

こんな感じにjQueryの.css()と同じように（ちょっと違うけど）書けます。便利。

普段Google Analyticsを利用するとき、デフォルトでga.jsで利用するようになっていますし、基本的にurchin.js（古いやつ）はUrchinと併用するときくらいしか使わないと思いますが、、

gaはデフォルトでhttp・httpsに対応したコードを生成するので問題ないですが、上記のリンクから古いコードを選ぶと、最初に指定したドメインに対してしかコードを生成しません。

たとえば http://5509.me に対してurchin.jsのコードを生成すると以下のようになります。

これをhttp・httpsが混在するCMSなどで利用すると、IEではhttpsのページで以下のようなセキュリティ警告が表示されます。

解決するには、ga.jsの生成コードのようにURLのprotocolによって読み込み先を変える必要があります。

この部分を･･･

<script src="https://ssl.google-analytics.com/urchin.js" type="text/javascript"></script>

以下のコードに修正する

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/urchin.js' type='text/javascript'%3E%3C/script%3E"));
</script>

これでセキュリティ警告が出ることもなくなります。

いまさら感満載なので、みなさん既に知ってると思いますがいくつかメモしておくのと、もしかしたらあんまり知られてないかも知れないjQueryの機能も少し紹介しておきます。

トピックス

• 属性などをまとめて指定+ついでにイベントなどもまとめて指定
• 複数イベントをまとめてbind
• 個別にeasing指定
• アニメーションを指定時間待機させる.delay()
• DOMオブジェクトを丸ごと配列に入れる.toArray()
• .offset()で値を書き込めるようになった
• 1.4じゃないけど、もしかしたらあんまり知られていない機能
  • .append()メソッドで複数個のオブジェクトをappendする
  • jQueryのメソッドのアクセス方法
  • .hover()の真相

属性などをまとめて指定+ついでにイベントなどもまとめて指定

これかなり便利というか、すっきり書けます。

今までも属性はまとめて指定できたのですが、テキストとかイベントとかCSSとかはチェーンで繋いで書いてましたよね。こんな感じに。分かりやすいと言えば分かりやすいけど、やっぱりどうしても読みにくいですね。

$('<a/>')
  .attr({
    id: 'sample',
    name: 'sample',
    href: 'http://5509.me'
  })
  .click(function() {
    alert('clicked');
  })
  .css({
    paddingBottom: '2.5em',
    fontSize: '14px'
  })
  .text('click me!');

1.4ではこう書けます。。

$('<a/>', {
  id: 'sample',
  name: 'sample',
  href: 'http://5509.me',
  click: function() {
    alert('clicked');
  },
  css: {
    paddingBottom: '2.5em',
    fontSize: '14px'
  },
  text: 'click me!'
});

すっきり！みやすくなりました。

複数イベントをまとめてbind

そうそう、イベントも何回もチェーンで繋ぐと見にくくなって仕方なかったんですよね。下記のようにチェーンを使わずまとめて指定できます。

$('#box').bind({
  click: function() {
    alert('clicked!!');
  },
  mouseover: function() {
    alert('over!!');
  },
  mousemove: function() {
    alert('move!!');
  }
});

ちなみに1.4ではないですけれど、イベントのhandlerが同じならまとめて指定できますね。

$('#box').bind('click focus blur', function(){
  alert('matometa!');
});

個別にeasing指定

え･･･？縦横バラバラにeasing指定できるんですか･･･

$('#box').animate({
  top: 300,
  left: 300
},{
  duration: 1000,
  specialEasing: {
    top: 'easeInOutCirc',
    left: 'easeOutBounce'
  }
});

ただし、scrollTopとscrollLeftには使えないようです。それはそうか。

アニメーションを指定時間待機させる.delay()

setTimeout()とか使わなくていいんですよ。これまたすっきり書けます。
たとえば、fadeOut()後500ミリセカンド待ってからもう一度fadeIn()させたいときはこんな感じに書けます。

$('#box')
  .fadeOut(400)
  .delay(500)
  .fadeIn(400);

DOMオブジェクトを丸ごと配列に入れる.toArray()

いちいちpushとかする必要ないんです。.toArray()するだけです。

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

$('ul>li').toArray();

↓このように配列になります。

['<li>1</li>','<li>2</li>','<li>3</li>','<li>4</li>']

.offset()で値を書き込めるようになった

うん、これはそうでもないか･･･

$('#box').offset({
  top: '10px',
  left: '25px'
});

1.4じゃないけど、もしかしたらあんまり知られていない機能

.append()メソッドで複数個のオブジェクトをappendする

.append()はDOMでもjQueryオブジェクトでも何でもつっこめて便利なのですが、これカンマで区切ると複数個入れることができます。

$('#box').append(
  '<a href="#">1</a>',
  '<a href="#">2</a>',
  '<a href="#">3</a>'
);

ちなみに、.after()と.before()でも同じようにカンマ区切りで複数の要素を追加できます。

$('#box').after( // .before
  '<a href="#">1</a>',
  '<a href="#">2</a>',
  '<a href="#">3</a>'
);

jQueryのメソッドのアクセス方法

一般的に.(ドット)で繋いでいきますが、プロパティと同じなので当然、[methodName]でも呼び出せます。

$('#box').click(function() {
  alert('clicked');
});

$('#box')['click'](function() {
  alert('clicked');
});

追記： .hover()の真相

なにかありそうなタイトルにしましたが･･･
.hover()メソッドでは下記のように、マウスオーバーとマウスアウト時のイベントをまとめて指定できて便利ですよね。

$('div').hover(
  function() {
    alert('on');
  },
  function() {
    alert('off');
  }
);

マウスオーバーとマウスアウトと書きましたが、実は.hover()は.mouseover() / .mouseout() のショートカットではなく、.mouseenter() / .mouseleave() のショートカットです。これらの違いについてはjQuery APIのサンプルを見てもらうのが一番早いと思います。

http://api.jquery.com/mouseover/ – ページ真ん中らへんにDemoがあります。

一度領域に入ってしまえば、enterで、領域から出ない限りleaveにはなりません。何気なく使っていても、特に問題はないところですが、挙動がおかしいと思ったときなどに知っていれば、対処方に辿り着きやすいかもしれません。

まとめ

jQueryを使えば、クロスブラウザも（ある程度は）簡単に対応できるし、やりたいこともたった数行で実現できてしまうので、速度の面とかはとりあえず置いておいて、どんどん色んなことをやってみればいいんだと思います。

コーダー・Webデザイナー向けの勉強会「.coder（どっとこーだー）」 を大阪で行います。

とりあえず決まっていることを以下にまとめておきます。調整中項目などは決まれば随時追加していきます。参加表明はATNDから行ってください。

何か話したい！とかあればATNDかこちらのコメントにお願いします。

お知らせとか

このブログでも行いますが、連絡用Twitterアカウントを用意したので、こっちもフォローしてください。

http://twitter.com/dotcoder

第1回の概要

テーマ

JavaScript。主にjQuery関連が多いと思います。

対象

JSを少しでも触ったことのあるコーダー・Webデザイナー。（またはJSに興味があり、これから使っていきたいと思っている人。）

形式

一人3分〜10分程度の持ち時間でJS関連の話題で話すライトニングトーク形式。参加者全員が話すの必須じゃないですが、出来れば何かしら話してもらいたいです。今のところ5人くらい話す人が決まってます。

スタンス

ゆるく、楽しく。

募集人数

18人

場所

エル・おおさか（大阪府立労働センター） （大阪市中央区北浜東3-14）

日時

3月20日 18時～21時

会費

たぶん500円くらい

参加表明

ATNDのページから行ってください

前々から存在は知ってましたが、使ったことはありませんでした。使ってみたところこれが超快適･･･！確かにコーディングが3倍速くなるかも知れない。これを知らなかったなんて僕のコーディング人生は何だったんでしょうか。

で、わざわざZen-Codingのよさについて書いたところで意味がないので、Zen-Codingについては以下のエントリ等が参考になると思います。

• TextMate+Zen-Codingで超速コーディング？
• HTMLコーディングが3倍速くなる？「Zen-Coding」
• Coda で Zen-Coding を使う

ブログ記事をHTMLで書いている人に超きっとおすすめ

WordPressの記事をZen-Codingで編集したいなとか話してたんですが、どうやらtextareaでZen-Codingを可能にするライブラリが公式であるんですね･･･そしてこれが素晴らしい出来でブログ記事を書く速さも3倍1.5倍くらいになりそうです。特に技術系のブログを書いてる人には手放せないツールになるんじゃないでしょうか。

以下WordPressに適用して編集した際のキャプチャです。公式サンプルそのまんまで申し訳ないですがそういうことです。

この状態でCmd+E(Ctrl+E)で･･･

このように展開できます。

WordPressに導入する方法

僕はWPユーザーなので、WordPressに導入する方法を書いておきます。ちなみに、ビジュアルエディタは邪魔なのでオフにしておきます。（どちらでもいいですが）

プラグインを使って導入する

【追記】rewさんがプラグイン化してくれました。なかなか登録が完了しないようです･･･

• WordPressにZen Codingを導入するプラグイン「WP Zen-Coding」

以下は古い内容です。WordPressのバージョンアップに伴って消えるのでプラグインを使ったほうがいいですね。

Zen Coding for <textarea>のダウンロード

まずはソースコードをダウンロードします。

ダウンロード

Download: Zen Coding for <textarea>

公式サンプル

Zen Coding for <textarea> Sample

WordPressの管理画面で読み込む

ダウンロードしたら解凍して出てくる「zen_textarea.js」か「zen_textarea.min.js」を適当なフォルダにコピーして

• /wp-admin/admin-header.php

を開いてたぶん69行目辺りが</head>のすぐ上なので、そこで読み込ませます。

わずか2ステップで実装できてしまいました。ただこの方法だと記事編集画面以外のテキストエリアにも適用されてしまうので、それが嫌な人は<?php if(){} ?>か何かで編集画面でのみ適用するようにするといいでしょう。

タグをあまり使わないWordPressユーザーにははてな記法プラグイン

そんなにタグばっかり使わない人にはrewishさん作のはてな記法プラグインがちょうどいいと思います。テーブルなどもどんどん使えますし、こちらもかなり便利です。

.ready()メソッド

.ready()メソッドという呼び方がパッとしない人もいると思います。こういうのです↓

$(function(){
  // .ready()が呼び出されたときに実行されるハンドラ
});

jQueryを実行する際のおまじないみたいなものですね。これの中にjQueryコードを書いていくとページロード時（Documentの読み込みが完了時）に実行してくれます。

何気なく使ってる人も多いと思いますが、実際のところこれは何？ということで、少し掘り下げてみましょう。

.ready()を使う際の形式

jQuery APIによれば、以下の3つが.ready()として同じように使えるようです。

1. $(document).ready(handler)
2. $().ready(handler) (推奨されていない使い方)
3. $(handler)

handler

DOM Readyの時点で実行されるfunction
無名関数function(){}がこれに当たります

つまり、それぞれを実際に使う場合は

1. の場合

$(document).ready(function(){
  // 実行する命令
});

見て分かる通り、Documentがreadyになったら、つまりDocumentの読み込みが完了したら実行します。

2. の場合（使えるが推奨はされていない）

$().ready(function(){
  // 実行する命令
});

1.のdocumentを省略した状態。ただし公式ドキュメントでも注意書きがある通り、この形式では使わないほうがよさそうです。

3. の場合

$(function(){
  // 実行する命令
});

こちらは、一番よく見る例のアレですね。$(document).readyを$と省略した形です。一番文字数が少なくて済むのでよく使われています。

$ = jQuery

jQueryを使っていると$という文字をたくさん使いますが、これはjQueryのエイリアスになっています。つまり以下のコードは同じことを意味します。

$('a').click(function(){});
jQuery('a').click(function(){});

よく知られているところでは、Prototype.jsも同じように$を使っていて、jQueryと同時に使うと$の衝突が起こります。この場合、$.noConflict()を使って

var $j = jQuery.noConflict();

のようにして、$の代わりに$jをjQueryとして使うことで回避したりします。

強制的に$をjQueryとして使う場合

より安全に、.ready()の中だけは$をjQueryのエイリアスとして使う場合、次のように実行します。

jQuery(document).ready(function($){
  // この中では$はjQueryとして扱われる
});

コメントに書いたように、この書き方だと、Prototypeなどの$を使っているライブラリを同時にロードしていても、.ready()の中だけは$をjQueryとして扱うことができます。ただし、Prototypeの$は当然使うことは出来ないです。

さらに省略形と合わせることもできます。このほうが使いやすいでしょう。

jQuery(function($){
  // この中では$はjQueryとして扱われる
});

実行パターンまとめ

というわけで推奨されていない物以外をまとめると以下の4つになります。どれを使っても実行結果は同じなので、好みになると思いますがおすすめはトラブルが少なそうな4.ですね。

1. 基本のパターン

$(document).ready(function(){
  // 実行する命令
});

2. よく使われているパターン

$(function(){
  // 実行する命令
});

3. 他のライブラリも使うことを考慮した場合のパターン

jQuery(document).ready(function($){
  // 実行する命令
});

4. 2と3を組み合わせたパターン

jQuery(function($){
  // 実行する命令
});

ちょっと補足

THE HAM MEDIAのハムさんが補足を書いてくれましたので、こちらもあわせて読むとさらに理解が深まると思います。

• Re: 今さら聞けないjQuery実行パターンまとめ【実行のタイミングって？ちょっとした補足】

参考

.ready() – jQuery API

http://api.jquery.com/ready/

先日公開されたGoogle Buzzですが、流行るとか流行らないは別としてとりあえずサイトにBuzzを投稿するためのボタンを実装してみましょう。と思ってAPIを見てたんですが、まだその辺については公開されてないのか見あたりませんでした。そもそもBuzzするって何て言うんですかね。Buzzる？なんか変。。

今のところ便利そうなのは以下の、Google Readerのブックマークレットを使う方法でしょうか。

• Add a “Buzz It” button to your Website, Blog or Forum

超簡単に実装できます。

実装方法

アイコンをhttp://buzzusers.com/images/buzzicon.pngかhttp://buzzusers.com/images/gbuzz.pngから保存して、ボタンを追加したい位置に下記のコードを貼るだけです。（アイコンのsrcは変えてください）Google ReaderがURLとタイトルを取得するのでどのページにも下記のコードで実装できますが、この方法では一覧ページには実装できません。一覧ページにも実装したい場合は、Tech Crunchのように個別にURLからタイトルやURLを渡す必要があります。

<a href="javascript:var%20b=document.body;var%20GR________bookmarklet_domain=&quot;http://www.google.com&quot;;if(b&amp;&amp;!document.xmlVersion){void(z=document.createElement(&quot;script&quot;));void(z.src=&quot;http://www.google.com/reader/ui/link-bookmarklet.js&quot;);void(b.appendChild(z));}else{}"><img src="ここはアイコンのURL" alt="Buzz It"/> Buzz It</a>

サンプルということで、このブログにも実装してみました

…使わないでしょうけど。

クリックするとGoogle Readerのブックマークレットが画面右上に表示されるのでそこからBuzzへ投稿できます。画面の遷移がないので投稿しやすいです。

この方法で実装するところの問題といえば、Google ReaderのブックマークレットがページのタイトルとURLを取ってくるため、一覧ページには使えないところでしょうか。

おまけ

一覧ページにも実装する場合は以下のリンクで実装できます。[URL][タイトル][サマリー]のところに対応する値を渡してください。

<a href="http://www.google.com/reader/link?url=[URL]&title=[タイトル]&snippet=[サマリー]">Buzz It</a>

jQueryを使えば単体でもフェードやスライドなどのアニメーションを誰でも簡単に使えますが、animateメソッドを使うとより便利に凝ったアニメーションを実行することができます。animateメソッドを使って何かを作るときに役立ちそうなチュートリアルと、すぐ使いたい人向けのプラグインを集めました。

• TIPS/チュートリアル
• プラグイン/animateメソッドの拡張など
• プラグイン/単体で使えるものなど
• プラグイン/スクロール系

TIPS/チュートリアル

animate(params, options)

http://semooh.jp/jquery/api/effects/animate/params,+options/
まずはjQuery animateの基本を押さえましょう。

Using jQuery Stop

http://css-tricks.com/examples/jQueryStop/
アニメーションのキューをコントロールする。これを押さえれば結構なんでもできますたぶん。hoverで色々したい場合などはstop(true,true)が 便利です。

Start/Stop Slider

http://css-tricks.com/startstop-slider/
もうひとつCSS-Tricksから、スライダーの作り方。

Sliding Boxes and Captions with jQuery

http://buildinternet.com/2009/03/sliding-boxes-and-captions-with-jquery/
マウスオーバーでキャプションがスライドしてくる。

Create a Thumbnail with Fading Caption Using jQuery

http://www.queness.com/post/844/create-a-thumbnail-with-fading-caption-using-jquery
キャプションを前面に表示するんですけど、サムネイルのアニメーションとの組み合わせがきれい。

Create a jQuery Popup Bubble

http://www.dvq.co.nz/web-design/create-a-jquery-popup-bubble-effect/
ツールチップも表示方法を変えるだけでかわいくなりますね。実装も簡単です。

Animate validation feedback using jQuery

http://www.jankoatwarpspeed.com/post/2009/09/16/Animate-validation-feedback-using-jQuery.aspx
フォームの未入力必須項目を揺らす。↓で紹介しているプラグインと組み合わせると点滅などできますね。

プラグイン/animateメソッドの拡張など

GX

http://gx.riccardodegni.net/
アニメーションに特化した拡張プラグイン。色を変えたり、キューを利用したシームレスなアニメーションなどを行えます。

COLOR ANIMATIONS

http://plugins.jquery.com/project/color
こちらはjQuery作者のJohn Resig氏がつくったカラーアニメーションプラグイン。

Background-Position Animations

http://plugins.jquery.com/project/backgroundPosition-Effect
background-positionをアニメーションできるようになります。

応用すると
http://snook.ca/archives/javascript/jquery-bg-image-animations/
こんな感じに楽しげなナビゲーションがつくれます。

addCommand.js

http://lab.hisasann.com/addCommand/
連続するアニメーションをネストせずに書いていけるプラグイン。複雑なアニメーションをする場合などに便利です。

jQuery Easing Plugin

http://gsgd.co.uk/sandbox/jquery/easing/
Easingと言えばこれ。jQueryのanimateメソッド内で指定するだけで色んな動きが使えます。

プラグイン/単体で使えるものとか

Flip!

http://lab.smashup.it/flip/
表示要素をくるっと回転させるエフェクトで切り替える。アイデアが面白いですね。

Roundabout for jQuery

http://fredhq.com/projects/roundabout/
3Dの回転を実現するプラグイン。ドラッグできたらもっといいんですけどね。

LavaLamp for jQuery lovers!

http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/
元々mootoolsプラグインだったLavaLampをjQueryで実現するプラグイン。装飾のないグローバルナビゲーションもこれひとつでちょっと目を引くナビゲーションになります。

可変レイアウトグリッドjQueryプラグイン

http://blog.xlune.com/2009/09/jqueryvgrid.html
グリッド系は色々ありますが、こちらが一番きれいに動きますね。

jQuery Approach

http://srobbin.com/jquery-plugins/jquery-approach/
カーソルが対象要素に近づくにつれてに文字サイズを小さくしたり透過度を上げたり･･･durationではなくカーソルの位置に合わせてanimateメソッドを実行しているような感じ。結構面白いです。

プラグイン/スクロール系

jQuery Scroll Follow

http://kitchen.net-perspective.com/open-source/scroll-follow/
スクロールに合わせて要素がついてくる。ナビゲーション等に使うのが一般的ですかね。

LOCALSCROLL

http://plugins.jquery.com/project/LocalScroll
内部の要素をスクロールで移動させてページ切り替えのようにみせる。

Easingスクロールプラグイン

http://5509.me/2009/05/18/page-scrolling-with-jqueryeasing.html
Easingプラグインを利用したするするスムーズスクロールプラグイン。スクロールの動きを選べます。

他にも･･･

jQuery関連のプラグインはほとんどがアニメーション絡みだったりするので、紹介した以外にもまだまだ山ほどあります。Flashと比べるのはそもそもあれですが、JSだけでも動きのあるサイトは作れますので、ピンポイントにでも実装してみてはいかがでしょうか。

で、なんだか誤解が生じているかも知れないので先に言っておくと、セミナー形式ではなく、みんなで5分10分ずつでもしゃべっていく形で考えています。LTみたいな感じですね。本気でやるぜ！ってなったら色々と気張ってしまうし、持続もしないでしょうし、ゆるい感じで進めていきたいです。

(JavaScript)勉強会としているのは、今後も継続して行い、回によって扱うテーマを変えることも想定しているためです。目的としては、関西（主に大阪）のコーダー・Webデザイナーなどフロントエンドの人たちの交流、情報の共有です。僕が色んな人と話をしたいというのが一番の目的とかなんとか･･･でも早い話が、Sugamo.cssの真似ですよね。すみません。

とりあえず決まっていることを以下にまとめておきます。調整中項目などは決まれば随時追加していきます。参加表明などはrewさんが調整してくれているので、そちらについてもまたお知らせします。

とりあえず興味あるよ！何か話したい！とかあればコメントにお願いします。

お知らせとか

このブログでも行いますが、連絡用Twitterアカウントを用意したので、こっちもフォローしてください。

http://twitter.com/dotcoder

第1回の概要

テーマ

JavaScript。主にjQuery関連が多いと思います。

対象

JSを少しでも触ったことのあるコーダー・Webデザイナー。（またはJSに興味があり、これから使っていきたいと思っている人。）

形式

一人3分〜10分程度の持ち時間でJS関連の話題で話すライトニングトーク形式。参加者全員が話すの必須じゃないですが、出来れば何かしら話してもらいたいです。今のところ5人くらい話す人が決まってます。

スタンス

ゆるく、楽しく。

募集人数

最大25人まで。25人も集まった場合、僕がどうしていいか分からなくなると思いますが、数字については完全にアタリです。集まらなくても最低人数で開催します。

場所

調整中。

日時

調整中。3月20〜22日のいずれかで考えていますが、会場の都合もあるので、4月になるかもしれません。

会費

調整中。たぶん500円くらい必要になるかと思います。

2010年も早いもので1ヶ月が終わりもう2月ですね。唐突ですが、4月に開催されるCSS Nite LP, Disk 9「Coder’s Higher」に出演させていただきます。LPといえば東京ですね。僕は大阪なので、Twitterから伝わってくる東京のイベントの盛り上がりに、いつか参加できればなんて思っていたのですが、思わぬ展開で参加できることになりました。

僕のセッションではjQueryを扱いますが、Coder’s HigherだけにHTML5やCSS3、スピードコーディングなどコーダーの方にはわくわくが止まらない内容になっています。色々な人に会えるのが今から楽しみで仕方ないです。。東京の皆さまよろしくお願いします！

ところで、現在gihyo.jpで一緒に執筆しているmukimukistの一人、THE HAM MEDIAのハムさんも出演します･･･！

このブログでは今までプライベートな話題を書いていなかったので、なんとなく避けていましたが昨年9月に転職し、現在はディレクターとして働いています。gihyoさんで連載させていただいているのもあり、記事数もめっきり減っていますが、新感覚のUIを求めて毎日を過ごしていますので、またその内新しいプラグインでも作りたいです。また週4記事更新とかやりたいですｗ

jQselectableのプロジェクトページはGooglecodeになります。
jQselectable: http://code.google.com/p/jqselectable/

名前がselectableからjQselectableに変わったのですが、これはjQuery UIにselectableという便利なプラグインが存在するためです。

実際にUI selectableを使う人はほとんどいないと思いますが、せっかくなのでメソッド名も変えました。ただ変わったと言っても実際にはselectableからも呼び出せますので、特に何も気にすることはありません。
前もってUI selectableをロードしてるときは今までのselectableメソッドが無効になります。
ただ併用する場合はUI selectableを先にロードさせる必要があります。この辺はprototypeとjQueryのそれと同じような感じです。

$.fn.selectable = $.fn.jQselectable;

$(elm).selectable();
$(elm).jQselectable();
// どちらでもいい

使う人にとってはコードなんかどうでもいい所ですが、書き直したことでjQselectableを実行した後に、JSやAJAXを使って動的に内容が書き変わっても、rebuildメソッドを実行することでjQselectableの内容を最新に更新することができます。

selectableのページを新しくしたので詳しい使い方などはそちらを見てもらうとして、ここではrebuildメソッドの使い方を簡単に説明します。

var selectable = $(elm).jQselectable(); // 実行
selectable.rebuild(); // 再構築

上記のような再構築が必要ない場合は、今まで通り

$(elm).jQselectable();

だけです。

昨年11月にjQuery.selectable.jsをアップデートしたjQselectableというプラグインをGoogle Codeで公開しました。公開直後にTwitterから広がり、PHPSPOTさんでも紹介されたり、jQselectableは色々な方に見ていただけましたが、肝心のドキュメントがありません。。基本的に使い方はjQuery.selectable.jsと同じで、今回説明するrebuildというメソッドを追加しました。

まずはサンプルをご覧ください。

View the Demo
Download sample files

必要ファイルの読み込み

jQueryをGoogleのJSAPIから読んでいますが、ローカルでもいいです。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");</script>
<script type="text/javascript" src="js/jQselectable.js"></script>
<script type="text/javascript" src="js/ajaxzip2.js"></script>

実行手順

jQselectableの実行

ここはjQuery.selectable.jsと同じです。

var pref = $("#pref").jQselectable({
  set: "fadeIn",
  setDuration: "fast",
  opacity: .9
});

が、ひとつだけ違うところがあって

var pref = $("#pref").jQselectable({

実行したものを変数に入れておきます。

AjaxZip2を実行するためにハンドラをバインドする

AjaxZip2の使い方は分かっているものと仮定して進めますので、初めてな方はAjaxZip2の配布ページを確認してください。

$("#zip").keyup(function(){
 // AjaxZip2
 AjaxZip2.zip2addr(this,"pref","addr");
});

補完後にselectableをrebuildする

補完後に、フォーカスが住所の最後に移動しますがこのとき発生する、blurを利用します。

$("#zip").blur(function(){
 // rebuilds target jQselectable element
 pref.rebuild();
});

これでAjaxZip2実行後に、selectableの見た目部分が構成し直され、補完された都道府県が表示されます。

View the Demo
Download sample files

用意はされていませんが、仮想OSとはローカルでファイル共有サーバーにMacから接続ができるため、権限さえ適切に用意されていれば、Macから自由に変更することができるので、その方法を紹介します。（ただし共有できるディレクトリはWindows7ではUsers以下に限る）

Macから接続するまでの流れ

以下はWindows7で話を進めます。

Windowsでユーザーアカウントにパスワードを設定しておく

コントロールパネルからパスワードの設定を行ってください。

ユーザーアカウントのユーザーに対して、Users/ユーザーアカウント ディレクトリ以下のファイルにしか、変更・書き込み権限はなく、その他のディレクトリ・ファイルは読み取り専用となります。またMacから接続できるのは、Usersディレクトリ以下になります。Usersディレクトリ以下のUsers/ユーザーアカウント 以外のディレクトリのファイルを変更などする場合は、変更・書き込み権限を与えておく必要があります。

上記に関してはあまりないと思うので、今回は省略して、次に進みます。というよりも、そもそもVMWareの共有フォルダで十分ですかね。。

ローカルIPアドレスを確認する

Windows内でCommand+Rで「ファイル名を指定して実行」窓を開き、「cmd」と入力して実行します。

コマンドプロンプトが表示されるので、ipconfigと入力し、実行します。IPv4アドレスに表示されているIPアドレスを覚えておいてください。

Macから接続する

Finderを選択した状態でCommand+Kを押して、接続画面を開きます。
サーバアドレス入力欄に、「smb://IPアドレス」を入力して接続をクリックします。

するとこんな感じで名前とパスワードを聞かれるので、Windowsのユーザとパスワードを入力して、接続をクリックします。

どれをマウントするか聞かれるので、Usersを選択してOKをクリックします。

マウントされ、Finderのサイドバーに表示されました。
デスクトップにもショートカットが表示されていると思います。

あとは、マウントしたサーバからファイルを編集したりすることができます。

SVNやExcelは結局のところ、Windowsの方が色々都合がよかったりするのでWindowsメインで作業しています。
SVNがWindowsにあるけど、作業自体は、Macで行いたいときなどに有用ではないでしょうか。

Windows7をVMWare Fusion3にインストールしたときのメモ。
今までFusion2とXPを使っていたのですが、どうもSpacesを使ってMacからWindowsに移動するときにひっかかるし、プチフリーズ的なものが多発していました。原因はFusion2だったので、Fusion3はその辺の改善もされているということで一緒にアップグレードしてみました。なので面倒くさいので、Fusion2にWindows7を入れたりするような実験はしてみてません。

※ ちょうどASCII.jpで詳しめの解説記事が公開されてました。

簡単にFusion3の改善点など

• Aeroが使える
• Macへの負担減 (*1
• 64bit版OSへの対応

その他いろいろあるみたいですが、僕が使う上で主なものはこれくらいです。Windows7に関してはAeroを利用することで使いやすくなるので、Fusion3へのアップグレードは必須と言えるでしょう。言えないかも。

*1) フルスクリーンモードで使用している際に、Spacesなどで移動したときのプチフリーズ的なものが多発していたのですが、ほとんど気にならない状態になりました。

Windows7をVMWare Fusion3にインストールするときの注意点

• XPからのアップグレードは基本的にはできない (*2
• Aeroを使う場合は、メモリ割当2GBあったほうがいい
• （当然）ひとつのライセンスでひとつの仮想環境にしかインストールできない

*2) XPを使っている場合、アップグレード版からはインストールできないとのことなので、購入を考えている方は気をつけたほうがよさそうです。する方法もあるようですが。

利用環境

以下の2つの環境にインストールしました。当然ですが、iMacの方が快適に使えますね。

MacBook

• アルミなのにキーボードのバックライトもないMacBook Proになれなかった悲しいやつ
• Core2Duo 2GHz
• 4GBRAM
• Geforce 9400M

iMac

• Core2Duo 2.66GHz
• 4GBRAM
• Geforce 9400

でどちらもメモリ割当は2GBにしています。

インストールからの簡単な流れ

まずはインストール

別になんてことはないそのままなのですが、

1. VMWare Fusionの手順に従ってインストール
2. プロダクトキーのアクティベート
3. VMWare Toolsのインストール

このとき、元々XPなどのOSをインストールしている場合は、XP等登録されているOSが既定のOSになっていると、VMWare Fusionを起動すると自動でOSまで立ち上がります。

DockにVMWareが入っている場合は、副ボタンから仮想マシンのライブラリを選択すると次のような画面になるので

★をクリックして既定のOSから外しておきます。

最後のVMWare Toolsのインストールがたぶん一番重要で、これをしないとAeroが使えるようになりません。こんなところで迷う人はあんまりいないと思いますが、僕は30分くらい迷ってました…

Aeroを利用できる環境で、VMWare Toolsをインストールして、再起動後
デスクトップ→副ボタン→個人設定からAeroテーマを選ぶことでAeroが有効になります。

インストール後

デフォルトでUserのトップが共有フォルダに設定されていますが、ネットワーク上にあるファイルなどを扱うには別途共有フォルダの設定が必要です。

共有フォルダの追加から追加したいフォルダを選択すればOKです。

1) Subversionについては説明すると長くなるので以下の記事などを参考にしてください。

• 第２回：Subversionによるバージョン管理（前編）
• Subversionでバージョン管理

Google Codeでプロジェクト立ち上げる

Google codeはオープンソースライセンスのプロジェクトのホスティングサービスです。なので当然ですが、仕事案件などの管理はできないです。自作プラグインとかそういう感じのオープンソースなプロジェクトの管理で使うと便利です。

Googleアカウントがない人は…

まずはGoogleアカウントがないと何も始まらないので、ない人はGoogleアカウントを取得してください。

新規プロジェクトを作成する

アカウントが発行されたらProject Hostingから早速新規プロジェクトを作成してみましょう。

Contribute Open Sourceのリンクからプロジェクトのドキュメントに移動します。

Create Projectのリンクからプロジェクト作成ページに移動します。

必要な箇所を入力していきます。

• Project name: プロジェクト名、ディレクトリ名になります。小文字のみ。
• Project summary: そのままサマリー。英語でも日本語でも。
• Project description: 概要。英語でも日本語でも。
• Version control system: Subversionを選択。
• Source code license: 適用するライセンスを選択。
• Project labels: タグみたいな感じ。

最初に説明した通り、Google codeはオープンソースライセンスのプロジェクトのホスティングサービスです。ライセンスはオープンソース系のライセンスからしか選べず、プロジェクトは誰でも閲覧できる状態になります。

入力ができたらCreate projectでプロジェクトを作成します。

作成したプロジェクトには

http://projectname.googlecode.com

(http://code.google.com/p/projectname)

でアクセスできます。Subversionのリポジトリは

https://projectname.googlecode.com/svn/trunk (httpではなく、httpsです)

ここまで準備ができたら次はCodaの設定に移りますが、その前にGoogle code用のパスワードが必要になります。画面右上のProfileから遷移した先のページのSettingタブの中にパスワードがあります。

Codaの設定

サイトの追加、リポジトリの設定

Codaを起動して、サイトを作成します。入力が必要な箇所はとりあえず名前、トップページURLとローカルルートです。トップページURLは http://projectname.googlecode.com を入力しておきます。

ローカルルートを入力したら、一番下にある「ソースをチェックアウト」を実行します。

実行すると、指定したローカルルートに.svnディレクトリが作成されて、ソース管理に入力項目が出てきます。

• リポジトリURL: https://projectname.googlecode.com/svn/trunk
• ユーザ名: Googleアカウント
• パスワード: GoogleCode.com Password

をそれぞれ入力して準備完了です。

プロジェクトファイルの追加

準備ができたら、何かファイルを入れてみましょう。ディレクトリ・ファイルの右に？マークが出てると思います。

この？をクリックすると、ディレクトリをバージョン管理することができるようになります。

プロジェクトファイルのコミット

追加を行うと今度は、Aマークが出てきます。Aマークが出ているときは、ディレクトリ・ファイルに変更があったという状態です。

Aマークをクリックすると、ディレクトリ・ファイルをコミットすることができます。適当なコメントを入力して(空でも可)コミットします。

コミットができたら、Google codeにコミットできているか確認してみましょう。プロジェクトのページのUpdatesから更新履歴画面に移動すると、下のようになっていることが確認できれば、コミットできています。r2というのはrevision2という意味です。

とりあえず、コミットまでを説明しましたが、Codaではその他にアップデート、比較、ロールバックなどをGUIから行うことができます。他の場所からコミットした場合などは作業に入る前に最新リビジョンにアップデートしておきましょう。

バージョン管理自体の説明を端折ったので、何だかわからない人もいるかもしれませんが、きっとrewish.orgのrewさんが説明してくれるはずです

http://gihyo.jp/design/serial/01/jquery-site-production

記事の対象は主に「jQueryって便利そうだけど、JavaScriptとか難しそう…」というように考えているデザイナーやコーダーの方です。実際jQueryに触り出すと、簡単なスクリプトならどんどん書けるようになっていきます。その1歩を踏み出せるような記事を目指して連載していきますので、使おうか迷っている人はぜひ1歩を踏み出して使ってみてください。

第1回目は「jQueryにふれる」です。

http://gihyo.jp/design/serial/01/jquery-site-production/0001

Twitterに「デスマなう」を投稿するボタンを追加するGreasemonkeyです。
それだけです…

使い方

下記リンクからGreasemonkeyスクリプトをインストールします。

Install DeathMaNow

TwitterのUpdateボタンの左に「デスマなう」ボタンが追加されます。
クリックすれば「デスマなう #deathmanow」が投稿されます。

そもそもデスマって何という方はネタ帳さんの記事辺りを参考にどうぞ。

タイトルそのままで、画像などのリンクを新しいウィンドウ・タブで開くためにtarget=”_blank”を追加します。

毎回Ctrl/Commandを押すのが面倒くさくて…中クリックも忘れることが多いし…
間違えてタブを閉じることが多いのでいっそのことということで書きました。

target=”_blank”について色々と議論はあるようですが、自分で使うだけなので気にしないことにします。またonclickとかでイベントを上書きするとLightboxなどのスクリプトに干渉したりしそうなので、あえてtarget=”_blank”にしました。

デフォルトでは自分の用途に合わせて、jpg・gif・png画像とPDFをtarget=”_blank”で開くようにしています。 追加したい場合は、var filetypesに追加してください。

var filetypes = /\.jpg|\.jpeg|\.gif|\.png|\.pdf$/i;

Install this script

見にくい

↑このように短縮される。いや…見にくいから…

以前の状態に戻す

これは見にくい…！ていうかこんなんで何がわかるんやろう…クリックするまでわからないこと面倒くささ。(Firebugで見れますが)とても使いにくいので、取り急ぎ短縮されたURLを開くGreasemonkey書きました。

↑開いてついでにデコードします。

文字数が増えるとテーブルが崩れ出すので、とりあえず70文字制限にしました。70文字を超えるURLは…のようになります。
YAはまだまだ実験要素が多いようなので、また戻るかもしれません。というか戻してくれるといいですね。

Install Expand URL on YA

更新履歴とか

• 2009-08-10 bugfix, ツールチップでフルURLを確認できるように変更

通常入力したパスワードは、アスタリスクで*****のように隠れてしまいますが、うっかりキーを押しすぎたときとか、何を打ったかわからなくなるときないですか？

いちいち全部消して、、打ちなおして、、また間違えて…よくやりますｗ

常に表示されるとセキュリティ面で不安も残るかも知れないので、チェックボックスをチェックしてるときだけ表示されるGreasemonkeyを書きました。簡単に言えばこの前書いたhintmaskのGreasemonkey版です。

それなりに使えると思うのでFirefoxの方は試しにインストールしてみてください。

インストール

Greasemonkeyをインストール済みの方

下記リンクからインストールできます。

Install ChkPasswd

Greasemonkeyをインストールしていない方

Greasemonkey: Firefox Add-onからGreasemonkeyをインストール後、下記リンクからインストールできます。

Install ChkPasswd

使い方

Chkpasswdをインストールすると

1. パスワード入力欄(input[type="password"])の右にチェックボックスが表示されるようになります(*1)。
2. これをチェックすると入力パスワードがパスワード入力欄の下に表示されます(*2)。
3. 未入力の場合は何も表示されません。

注意

1. チェックを入れると当然パスワードが丸見えになります。
2. 周囲に人の気配を感じたらチェックを外してください。
3. 共有のPCにはインストールしないほうがいいかもしれません。
4. ボックスの影はFirefox3.5以上で有効です。

バグなど

1. パスワード入力欄が予め表示されていないような場合は、画面左上のほうに表示されます。
   また、パスワード入力欄の右に予めテキストまたは他の要素がある場合は、それらにかぶさってチェックボックスが表示されます。
2. 1と同じく、予めパスワード入力欄が表示されていないような場合は、画面左上のほうに表示されます。
3. WordPressの管理ログイン画面でなんかずれてます。
4. なんだか他にもありそうなので上記以外のバグはコメントなどで教えてください。。(解決できるかわかりませんが…)

メモ

CSS3プロパティのFirefox先攻拡張

• -moz-border-radius
• -moz-box-shadow

はDOM Level1の

elm.style.***** = xxxxx;

修正しました

elm.style.MozBorderRadius

のように-(ハイフン)の後ろの文字を大文字にするルールに従うだけでした。
コメントありがとうございます:)

では、うまくいかなかったのですが(というより頭文字のハイフンの扱い方も分からないし、書き方もわからない)修正済*090805、wonderさんにsetAttributeメソッドから直接書き込めばできるよ、と教えてもらいその方法で回避しました。

elm.setAttribute('style','-moz-border-radius: 5px');

ただ、他にもstyleを指定している場合は、setAttributeを先に指定しておかないと、全て上書きしてしまいます。先にsetAttributeを指定しておけば、elm.style.****の分は後から追加されるので問題ないです。

ダメ

setAttributeはstyle属性の値を更新する。

elm.style.border = 'solid #006FFF 1px';
elm.style.padding = '5px';
elm.style.display = 'none';
elm.style.color = '#fff';
elm.style.backgroundColor = '#73adff' ;

elm.setAttribute('style','-moz-border-radius: 5px');

イイ

先にstyle属性を更新しておけばいい。

elm.setAttribute('style','-moz-border-radius: 5px');

elm.style.border = 'solid #006FFF 1px';
elm.style.padding = '5px';
elm.style.display = 'none';
elm.style.color = '#fff';
elm.style.backgroundColor = '#73adff' ;

今回は

• -moz-border-radius
• -moz-box-shadow

を使っているのでこれらは1回のsetAttributeでまとめて記述する必要があります。

elm.setAttribute('style','-moz-border-radius: 5px; -moz-box-shadow: 3px 3px 3px #666');

ところで、-moz-box-shadowはFirefox3.5でのプレフィクスなので3.5以上じゃないと適用されないです。ちょうど、3ping.orgのwuさんもCSSの実装状況で変わるボックスのデザイン方法でCSS2,CSS3のプロパティ・セレクタを使って色んなdiv要素の見せ方を提示されてますが、CSS3までのプロパティ・セレクタが使えるようになると、CSSだけでもデザインの幅がかなり広がりますね。

WordPress

2.8.1

ちょうどいい機会なので2.7.1から2.8.1にアップグレード、というかインストールし直しました。と思ったら2.8.2が…

使ったWordPressプラグイン

をリストで挙げようと思ったんですけれど、CMSとしてのWordPressでサイト構築をするときに便利な13のプラグインで紹介したものとほぼ被りなのでやめます。

ただCustom Field GUI Utility 2.0.0は本当に便利なのでみなさん使ったほうがいいです。使うべきです。今回は一番ベタな使い方でアレですが、keywordsとdescriptionとして記事ページのmetaに出力させてます。All in One SEO Packがないと始まらないとか書いてた手前なんなんですが、出力されるHTMLソースが気に入らないし、wp_head()を入れたくなかったので使用をやめて、Custom Field GUI Utility 2.0.0で対応しました。使い方次第でどんな具合にも出来るので、他でも色々と使わせてもらってます。

(過去記事のmeta移行はまだやってないので、空になってますね。地道にやるつもりですが、その辺うまいことひっぱれたら…)

配布元のかたつむりくんのWWWの記事を見れば分かることですが一応メモ。

Custom Field GUI Utility 2.0.0の設定メモ

使うものだけ表示させればいいので、conf-post.iniの中身を全部削除して

[cf_keywords]
fieldname = Keywords
type = textfield
size = 60
sample = jQuery,WordPress,Plugin
must = 1

[cf_description]
fieldname = Description
type = textfield
size = 60
sample = input the example or the caption
must = 1

だけに。他のconf-common.iniとconf-page.iniは削除(コメントアウトでも可)。
準備ができたら記事投稿ページに下のように表示されます。

次はmetaで出力する方法ですが、カスタムフィールドの値はpost_custom(key)で取得できます。またconf-post.iniで記述した[]内の値がkeyになるので、例えばKeywordsを取得する場合は

post_custom('cf_keywords');

になります。またカスタムフィールドの値はWordPressループの中でしか使えないことも覚えておいてください。これらを踏まえて記事とページのみに表示させたい場合は、header.phpのmetaを以下のようにします。

<?php if (is_singular() && have_posts() ) : while ( have_posts() ) : the_post(); ?>
 <meta name="keywords" content="<?php echo post_custom('cf_keywords'); ?>">
 <meta name="description" content="<?php echo post_custom('cf_description'); ?>">
<?php endwhile; else: ?>
 <meta name="keywords" content="jQuery,プラグイン,plugin,WordPress">
 <meta name="description" content="jQueryとか気になったことなど">
<?php endif; ?>

(これだけならデフォルトのカスタムフィールドでも出来ますが、他にも使う予定があるので:) )

Commentの返信

WordPressに実装されてるReplyを使えるようにしました。ただJSは自分で書きました。OperaとIEではJSが機能しないようになってます。でもReply自体はできるので別にいいですよね…

実装方法は色々と紹介されてるので、下記リンクなどを参考にすればいいと思います。
(JSは自分で書いてるのでちょっと違います)

• WordPress コメントをスレッド対応にする : dogmap.jp
• WordPress、vicuna CMSテーマのコメント欄をスレッド表示に対応させた – Hinemosu

HTML5

ちょうど1ヶ月くらい前にHTML5でリニューアルしたrewish.orgにインスパイア？されてHTML5にしてみました。とりあえず現段階でわかってる情報だけでやってます。なので正しいのかどうかはわからないですが、楽しいですね新しいことは。そんなわけでIEは残念な結果になります。むしろIEが残念です。

CSS

角丸

rounded-cornerプロパティをブラウザがネイティブでサポートしてるFirefoxとWebkitだけに使ってます。OperaとIEはJSで対応しようと思ったけど、案の定調整が必要でやめました。

とりあえず、-moz-border-radiusは素晴らしいですね！

CSS Sprite

これはいまさらです。いまさらすぎて言うこともありません。。
ただ配置方法をしきつめすぎてて、文字サイズを大きくするとなんか見えたりします。

その他

AutoPagerize

自作のを入れてたんですけど、GreasemonkeyのAutoPagerize対応に切り替えました。

Blogパーツ

パフォーマンスが落ちるのと、なんせ見た目がアレなのでとりあえず外しました。

SBMカウンタ

僕は毛の生えた程度しかPHPを触れないのですが、rewish.orgのrewさんにSBMサービスから登録者数を取得するシンプルなAPIを書いてもらいました。近いうちにWordPressのプラグインになるかも…？サイドバーで使うと読み込み時間が2倍くらいになったので使ってないのですが、もともと使ってたはてなのブクマカウンタ画像も遅延の原因になってたので、やめてしまいました。でも目安がないとちょっとわかりにくいですね。

Demo
Download demo files

今回は、iframe内コンテンツでfunctionを作っておいて、それを親から実行することで実現させてます。
なのでiframe内に表示するコンテンツは外部のサイトとかはだめです。自分で作ったやつだけです。
以降面倒なので、親コンテンツは「親」、iframe内コンテンツを「子」とします。

ところで、例によってjQueryを使っているので親・子共にjQueryを読ませておきます。
サンプルでは一番上にきたら↑が押せなくなったり、下にきたら↓が押せなくなったりしますがそれは考えないでおきましょう。それが気になる人はサンプルのソースを見てください。

用意するHTML

input#up, input#downを押したときにスクロールできるようにします。

<iframe id="frame" src="sample.html" scrolling="no">インラインフレーム</iframe>

<p><input type="button" id="down" value="↑" />
<input type="button" id="up" value="↓" /></p>

子で記述しておくスクリプト

これ自体はとてもシンプルでeasingScrollで使ったように、コンテンツをスクロールさせるスクリプトを記述してます。親から実行するときに動作を決めるために、引数を2つ取るようにしてます。

condは’starter’, ‘up’, ‘down’、optionsは下の通りdurationとか決めれます。
starterは開始時にずれてたら一番上にスクロールさせるための指定です。

ちなみに親から参照する関係で、(function($){})(jQuery);内に記述できないので$はjQueryとしました。

function frameScroll(cond,options){

	// オプション - 呼び出し元で指定
	var c = jQuery.extend({
		duration: 200,
		easing: 'swing',
		step: 300
	},options || {});

	// frameScroll内で使う変数
	var d = document,
		content = jQuery.support.boxModel ? navigator.appName.match(/Opera/) ? 'html' : 'html,body' : 'body',
		scrollPos = d.body.scrollTop || d.documentElement.scrollTop;

	// starterなら一番上、upなら上へ、downなら下へ
	this.scrollTop = cond.match(/starter/) ? 0 : cond.match(/up/) ? scrollPos+c.step : scrollPos-c.step;

	// すくろおおおる
	jQuery(content).animate(
		{
			scrollTop: this.scrollTop
		},
		{
			duration: c.duration,
			easing: c.easing,
			queue: false
		}
	);
}

親に記述するスクリプト

親からiframe内のスクリプトを実行する、と冒頭で書きましたが実行方法など含めてiframe関連処理はcyokodogさんがまとめてくれてます。

$('iframe')[0].contentWindow

でiframe内のオブジェクトを参照できるので、iframe内で書かれたfunctionは

$('iframe')[0].contentWindow.func()

で実行できます。さっきのframeScrollを実行するときは

$('iframe')[0].contentWindow.frameScroll('up',{
	step: 400
});

のように実行できます。これらをふまえると

jQuery(function($){

	// iframe内のドキュメントの読み込み完了時
	$('#frame').load(function(){
		// iframe内のドキュメントがスクロールした状態であれば一番上に移動させる
		$('#frame')[0].contentWindow.frameScroll('starter');
	});

	// #upをクリック
	$('#up').click(function(){
		// スクロールさせる
		$('#frame')[0].contentWindow.frameScroll('up');
	});

	// #downをクリック(処理は↑と同じ
	$('#down').click(function(){
		$('#frame')[0].contentWindow.frameScroll('down');
	});

	$('#up,#down').hover(function(){
		$(this).addClass('hover');
	},function(){
		$(this).removeClass('hover');
	});

});

こっちも説明の必要がないくらいかなりシンプルに書けました。
親では読み込み時に実行してしまえばいいので、jQuery(function($){});内に記述しています。

実際のサンプルではこれに加えて、一番上・一番下に移動したらボタンを押せなくするという処理を加えています。あと横に移動させたいときはanimateのscrollTopをscrollLeftにしたりして対応できます。

忘れてた、、今回使ってないですが、スクロールにanimateを使っているのでeasingプロパティでeasingが使えます。easeOutBounceでぼよんぼよんしてください。

Demo
Download demo files

クライアントからもらったデータの全角率になんとも言えない感情を覚えたことはないですか？
Mac専用のCodaをメインにコーディングしている人には
ProveさんのLABで公開されてるプラグイン ConvertKanaが便利です。

Mac用Web制作ソフト「Coda」のプラグイン。
選択された文字列を指定文字列に変換します。
英数字、カタカナ、数字、英文字の全角、半角を相互に変換します。

via: http://www.prove-wsc.com/lab.html

Codaはそれなりに強力な検索・置換エンジンを持っているので
正規表現でも検索・置換もできますが、ConvertKanaを使えばあっという間に変換できます。

Codaは一度使うと手放せないくらい使い心地がいいんですけど
まだまだCodaのマニュアルとか記事が少ないですね。。

Galleria

http://devkick.com/lab/galleria/
画像ギャラリープラグイン。これはきれいですよね。でもちょっと重い。

FancyBox

http://fancy.klade.lv/
確か商用でも使えるhighslideみたいなのを探してた気がする。

tablesorter

http://tablesorter.com/docs/
シンプルにデータ並び替え。管理画面には欠かせないですね。

prettyPhoto

http://www.no-margin-for-errors.com/projects/prettyPhoto-jquery-lightbox-clone/
角丸がかわいいLightboxクローン。

AjaxZip2

http://www.kawa.net/works/ajax/ajaxzip2/ajaxzip2.html
これはもう本当に便利ですよね。

ColorPicker

http://eyecon.ro/colorpicker/
管理画面に使いました。クオリティが素晴らしいです。

Masked Input

http://digitalbush.com/projects/masked-input-plugin/
入力文字の制御。こういう処理はユーザーに気にさせず行うのがベストですね。

[5509] jQuery.validation.js

http://5509.me/2008/08/22/realtimeformvalidation.html
フォームバリデーション。割と高機能らしいです。

Anti-aliased Rounded corners

http://blue-anvil.com/archives/anti-aliased-rounded-corners-with-jquery
アンチエイリアス付きでしかも軽量角丸プラグイン。

jFeed

http://www.hovinne.com/blog/index.php/2007/07/15/132-jfeed-jquery-rss-atom-feed-parser-plugin
今なら自分で書きますね。

jCarousel

http://sorgalla.com/jcarousel/
色々なところで使ったような気がする。

[5509] jQuery.selectable.js

http://5509.me/2008/09/14/jqueryselectable.html
セレクトボックスを拡張する。これは見やすいですね！

Using Progressive Enhancement to Convert a Select…

http://www.filamentgroup.com/lab/progressive_enhancement_convert_select_box_to_accessible_jquery_ui_slider/
セレクトボックスをスライダーに置き換え。タイトルもURLもとても長いですが、これは便利です。
(Using Progressive Enhancement to Convert a Select Box Into an Accessible jQuery UI Slider)

seekAttention

http://enhance.qd-creative.co.uk/demo/seekAttention/
指定した要素をハイライト。こういう配慮って大切ですよね。

history plugin

http://www.mikage.to/jquery/jquery_history.html
Ajax遷移を記憶させる。

jQuery Alert Dialogs

http://abeautifulsite.net/notebook/87
色々できるアラートダイアログ。

jQuery pageSlide

http://srobbin.com/blog/jquery-pageslide/
横から出てくるやつです。発想がいいですね！

Scroll Follow

http://kitchen.net-perspective.com/open-source/scroll-follow/
wrapscrollみたいなやつですね。easingを使えば鬱陶しさがなくなりますよ！

Uploadify

http://www.uploadify.com/
複数アップロードに対応したアップローダー。UIもとてもわかりやすいです。

[5509] easingScroll

http://5509.me/2009/05/18/page-scrolling-with-jqueryeasing.html
ページスクロールをeasingで。

ThickboxとかLightboxでコンテンツや写真を表示するとすっきり見えていいですよね。
でもあのボックス自体が邪魔なときないですか？ちょうど比較したいコンテンツの上に表示されたり…
jQuery UI Draggableを使ってドラッグできるようにしてしまいましょう。

これだけのためにわざわざDraggableを…とかそういうのは抜きにしてドラッグできると結構便利です。
しかもUI Draggableを使えばあっという間にドラッグできるようになります。

…便利じゃないですか？(今回はThickboxを対象にしてます)

サンプル
サンプルファイルのダウンロード

Thickboxをダウンロードする

http://jquery.com/demo/thickbox/

から一式をダウンロードするか、サンプルファイルに全て入ってるのでそれをダウンロードします。

jQuery UI Draggableをダウンロードする

http://jqueryui.com/download

からUI CoreとDraggableを選択してダウンロードするか、サンプルファイルに全て入ってるのでそれをダウンロードします。

必要なファイルを読み込む

<link type="text/css" rel="stylesheet" href="css/thickbox.css" />
<script type="text/javascript" src="js/lib/jquery.js"></script>
<script type="text/javascript" src="js/lib/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="js/lib/thickbox.js"></script>

thickbox.jsにソースを追加する

thickbox.jsの19～35行目

//add thickbox to href & area elements that have a class of .thickbox
function tb_init(domChunk){
    $(domChunk).click(function(){
    var t = this.title || this.name || null;
    var a = this.href || this.alt;
    var g = this.rel || false;
    tb_show(t,a,g);
    this.blur();
    return false;
    });
}

の tb_show(t,a,g); の後辺りに

// Make TB Draggable
$('#TB_window').draggable({
	handle: '#TB_title'
});

を追加するだけです。
オプションのhandleでドラッグのハンドル(掴める要素)を決めてます。サンプルでは#TB_titleにしていますが、たとえばハンドル指定をなくすと、#TB_window自体がハンドルになってどこを掴んでもドラッグできるようになります。スクロールバーを動かすときにちょっと不便になるので、ここでは#TB_titleをハンドルに指定しています。ハンドル指定ができる要素はdraggableにする要素の子要素なら何でも、です。

追加したソースは以下になります。

//add thickbox to href & area elements that have a class of .thickbox
function tb_init(domChunk){
    $(domChunk).click(function(){
    var t = this.title || this.name || null;
    var a = this.href || this.alt;
    var g = this.rel || false;
    tb_show(t,a,g);

    // Make TB Draggable
    $('#TB_window').draggable({
        handle: '#TB_title'
    });

    this.blur();
    return false;
    });
}

あとはドラッグできることがわかるように、ハンドルのカーソルを変えましょう。

thickbox.cssにソースを追加する

thickbox.cssの103～106行目に#TB_titleがあるので
これにcursor: move; を追加します。

#TB_title{
    background-color:#e8e8e8;
    height:27px;
    cursor: move;
}

ちなみに今回の例では、AjaxコンテンツかInlineコンテンツのようにタイトルを含んだThickboxを対象にしています。タイトルを含まない場合は、draggableオプションのhandle指定をなくすとかハンドル自体を変えればいいです。

サンプル
サンプルファイルのダウンロード

返ってくる結果が膨大になりがちな検索結果(特に管理画面など)などでは、そこからさらにデータを絞り込みを行いたい場合もあるかと思います。毎回ページの遷移があったのではユーザーの負担になりがちです。

そこでjQueryを利用してインクリメンタルサーチを実装する方法をメモもかねて紹介します。

サンプル
サンプルファイルのダウンロード

テーブルのデータでインクリメンタルサーチを行う

考え方

今回は「A B C D ….」のように単語を半スペースで区切ることを前提に考えます。

考え方は簡単で、

1. 半スペースで区切られた単語を配列(value=[])に保存する。
2. まず最初の単語(value[0])が含まれているTDをmatchで検索する。
3. 含んでいない場合は親のTRを非表示にする。
4. さらに2つ目以降の単語(value[1〜x])が存在すれば
   value[1]からvalue[x]までを順番にmatchで検索する。
5. 含んでいないTDの親TRを非表示にする。

で実装できます。

スクリプト

上の項目をスクリプトで記述すると以下のようになります。
対象にする項目、テキストを変えればテーブル以外でも使えるので試してみてください。

var tr = $('tr','#item_table'); // TRを保存する

// 単語が入力される度に評価する
$('#incrementalSearch').keyup(function(){

	// 1. 入力された単語を配列に保存する
	var value = this.value.split(" ");

	// 全てのTRで処理を行う
	for(var i=0;i<tr.length;i++){

		// 対象にするTDのテキストを一時保存
		var itemName = $('td:nth-child(3)',tr[i]).text();

		// 2. テキストが最初の単語(value[0])を含んでいるかどうか
		// RegExpの第二引数iはアルファベットの大文字小文字を区別しない
		if(itemName.match(new RegExp(value[0]),'i')){

			// 表示しておく(前回の検索結果で非表示の場合もあるので)
			$(tr[i]).show();

			// 4. さらに単語が2つ以上入力されている場合
			if(value.length>1){

				// 4. 2つ目以降の単語が含まれていなければ順番に非表示にしていく
				for(var j=1;j<value.length;j++){
					// 5. マッチングで検索してfalseなら非表示
					if(!itemName.match(new RegExp(value[j]),'i')){
						$(tr[i]).hide();
					}
				}
			}
		// 3. 含んでいない場合は非表示にする
		}else{
			$(tr[i]).hide();
		}
	}
});

サンプル
サンプルファイルのダウンロード

IT Mediaの記事でパスワードの「****」は不要…という記事(以下参照)がありましたが、ブコメにiPhone UIが〜〜というのがあったので、じゃあということでついカッとなってjQueryプラグインを書いた。

Webサイトなどでパスワードを入力する際、「****」を使って入力した文字が見えないようにする必要はないのではないか——。そんな提案をめぐり、研究者が賛否両論を展開している。

via: パスワード入力の「****」は不要？　研究者の間で激しい論議

パスワード入力は僕もよくタイプミスをして全部打ち直します。どうにかしてください本当に。
それにしてもiPhoneのUIはとてもよくできてますね。使っていて本当に気持ちがいいです。
使っていて気持ちがいいサイト設計というのは簡単なようでとても難しいものなので、小さなことからでもユーザーの負担を減らしていければいいですね。

サンプル
サンプルファイルのダウンロード

導入方法

1.CSS、 jQueryとhintmask.jsを読み込む。

<link type="text/css" rel="stylesheet" href="css/hintmask.css" />
<script type="text/javascript" src="js/lib/jquery.js"></script>
<script type="text/javascript" src="js/hintmask.js"></script>

2. パスワード入力欄を用意する。

CLASSはなんでもいいです。あとで実行するときに指定するためのものなので、IDでも大丈夫です。

<input type="password" id="" name="" class="hintmask" />

3. 実行する

$()で対象にする要素を指定します。

$(function(){
  $('.hintmask').hintmask();
});

オプション

オプションでマスクの文字、ヒント位置の調整を指定できます。

$(function(){
  $('.hintmask').hintmask({
    mask: '*',
    top: 5,
    left: 0
  });
});

本当にどうでもいいことですが mask の値を ＼(^O^)／ とかにするととてもうざくなるので注意が必要です。

カッとなった勢いでうざすぎるサンプルも用意しました。

サンプル
サンプルファイルのダウンロード

セレクトボックスの(value)を選択すると、セレクトボックスが消えて代わりにINPUT要素が選択状態で表示されるので、追加する単語を入力してドキュメント上の適当な箇所をクリックするか、returnキーで決定することで入力項目をセレクトボックスに新しく追加できるスクリプトです。説明がなにやらややこしい感じなので、実際にサンプルを見てもらったほうが早いと思います。

先日のtangoHokanと同じような感じなので、使いどころは微妙ですが。
そもそも、それができる、ということを補足説明などでユーザに伝える必要があると思いますが、ひとつの選択肢としてあればそのうち使う日がくるかもしれません。。

サンプル
サンプルファイルのダウンロード

導入

1. jQueryとeditableselectを読み込む。

<script type="text/javascript" src="js/lib/jquery.js"></script>
<script type="text/javascript" src="js/editableselect.js"></script>

2. SELECT要素にIDを用意しておく。

<select id="select1" name="select1">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

3. 実行する

$(function(){
  $('select').editableSelect();
});

オプション追加のテキストを変える

editableSelectのvalueプロパティから変更することができます。

$(function(){
  $('select').editableSelect({
    value: 'ここをクリックするとテキストを編集できます'
  });
});

サンプル
サンプルファイルのダウンロード

そうなんです。この複数アップロード機能がかなり強力で、いくつまで同時にアップロードできるのかはちょっと試していませんが、20くらいはいけたはずです。確かバージョン2.5のFlash Uploaderから実装されてるんですけど、どうやら知らない人も多いのかも？と思ったので、紹介しておきます。

と思ってたらちょうどいい動画がありました。動画は2.5のものですが、それ以降のバージョンでも同じ方法です。もちろん最新の2.8でも使えます。フォトログなどやってる人にはかなり便利だと思いますのでぜひ。

Multiple Image Upload from Len Kutchma on Vimeo.

ワクワクマウスオーバー

ウィンドウ内に散りばめた●にマウスオーバーするとびよんと拡大します(PNG使ってるのでIE6は見れません）。でかい丸に囲まれたかわいそうなちび丸を拡大できたときの気持ちよさは…。一応言っておきますけど、Flashじゃないです。あと、別にタイトルなんかどうでもよくて、なにかできそうな感じなので自分用のメモです。周りではワクワクよりもムキムキが流行ってるみたいですね！

サンプルは画像使ってますけど、Canvasでやったらもっと自由にできそう。
やっぱりeasing便利おもしろい！

$(function(){

  // ブラウザのレンダリング部分の幅と高さを得る
  var d = document,
    client = {
      height: d.documentElement.clientHeight,
      width: d.documentElement.clientWidth
    };

  // 円を配置していく とりあえず150個
  for(var i=0;i<150;i++){
    var nImg = document.createElement("img");
    // wakuwaku0.png か wakuwaku1.png
    nImg.src = "img/wakuwaku"+Math.round(Math.random(1))+".png";
    $("body").append(nImg);

  }

  $("img").each(function(){

    // それぞれの画像のサイズをランダムで決める 0 ～ 100 の間
    var size = Math.random()*100;
    // 最大サイズ ここは画像のサイズに準拠しておく
    var maxSize = 256;
    // 画像に対して(0,0)で拡大するので
    // 中央から広がるように(-mPos,-mPos)にずらすための値
    var mPos = (maxSize-size)/2;
    var self = $(this);

    // サイズと位置を取得済みの乱数で配置
    self.css({
      position: "absolute",
      top: Math.random()*client.height,
      left: Math.random()*client.width,
      width: size,
      height: size
    });

    // ホバー
    self.hover(function(){
      // マウスオーバーで最前面にする
      self.css("zIndex",100).animate(
        {
          // 中央から広がるように(-mPos,-mPos)にずらす
          marginTop: "-"+mPos,
          marginLeft: "-"+mPos,
          width: maxSize,
          height: maxSize
        },
        {
          duration: 300,
          // びよよん
          easing: "easeOutBounce",
          // Queueを保存しない
          queue: false
        }
      );
    },function(){
      // マウスアウトで戻す
      self.css("zIndex",1).animate(
        {
          marginTop: 0,
          marginLeft: 0,
          width: size,
          height: size
        },
        {
          duration: 300,
          easing: "easeOutBounce",
          queue: false
        }
      );
    });

  });

});

先日、iPhone風のテキストボックスの文字を消去するボタンを実装するチュートリアルを書いたのですが、どうやらSafariの独自実装でinput type=”search”というのがあるんですね。全然知らなかった…じゃあいっそのことplaceholderも付けてinput type=”search”っぽくしてみようということで、delval.jsをちょちょっと変えてinput type=”search”ぽい検索窓を実装してみます。これもかなり簡単にできるので、じゃあチュートリアル…？？

左が今回作ったサンプルで、右がSafari独自実装のinput type=”search”。そっくり！

サンプル – サンプルの下にあるINPUTをSafariで見ると…！
サンプルファイルのダウンロード

delval.jsとの違いをふまえてHTMLをマークアップする

delval.jsとの違いは

• optionでplaceholderのテキスト変更できる
• placeholderを追加
• わかりやすいようにID、CLASSをdelvalからinputSearchにした

です。見た目はCSSでうまいことやればきれいにいけますので、それを採用してます。また検索窓なので、必然的にFORM要素の中に入れる必要があると思います。これをふまえて検索窓をマークアップすると以下のようになります。

<form> ^<fieldset>
    <legend>Site Search</legend>
    

<input id="s" name="s" type="text" /> ^</fieldset>
</form>

delval.jsにplaceholder機能を追加する

次はJS部分ですが、主にdelval.jsと同じです。jQueryで拡張したfunctionに追記していきますので、前もってjQueryを読み込んでおいてください。(サンプルに入ってます）9割delval.jsと同じなのでかぶってるところは割愛しますが、大きく違うのはplaceholderがあるかないかということです。placeholderの機能は

• INPUTのVALUEが空ならテキストを表示
• INPUTにfocus()でplaceholderを消去

くらいでしょうか。
変更点にはコメントを加えているのでdelval.jsと比較してみてください。

$.fn.inputSearch = function(options){

  // placeholderのテキストを変えるオプション
  var c = $.extend({
    placeholder: "search..."
  },options);

  $(this).each(function(i){

    var self = $(this);

    self.wrap("");
    $("span#inputSearch-"+i)
      .append("")
      // グループにplaceholderを追加しておく
      .append("<span class="placeholder">"+c.placeholder+"</span>")
      .addClass("inputSearch-group");

    var group = $("span#inputSearch-"+i).css("height",self.attr("offsetHeight")),
      btn = $("span.inputSearch",group).css("height",group.height()),
      // あとで何回か使うので変数にしておく
      placeholder = $("span.placeholder","#inputSearch-"+i);

    if(self.val().length&lt;1){
      btn.hide();
    }else{
      // selfに文字列がある場合は隠す
      placeholder.hide();
    }

    self.focus(function(){
      // focus()で隠す
      placeholder.hide();
    }).blur(function(){
      // blur()時に文字列がなければ表示する
      if(self.val().length&lt;1) placeholder.show();
    });

    // placeholderをクリックしたらselfにfocus()する
    placeholder.click(function(){
      self.focus();
    });

    self.keyup(function(){
      if(self.val().length&gt;0) btn.show();
      else btn.hide();
    });

    btn.click(function(){
      self.val("");
      btn.hide();
      self.focus();
    });

  });
}

placeholderの実装原理は結局のところdeleteボタンと同じで、INPUT要素に重ねて表示しておいてINPUTにfocus()だとかその辺のイベントが発生したときに隠す、ということです。

背景などをCSSで定義する

最後に今までの実装方法をふまえてCSSをさらっと書きます。というか、ほとんどdelval.jsのときと同じです。背景に画像をしいて、placeholderの位置を追加しただけです。簡単です。Safariが実装しているtype=”search”が高さ、幅の指定を実装していなかったのでこれも高さと幅は可変じゃないです。// 幅も高さも固定なのでフォントサイズもptで固定したほうがいいかもしれません。

/* form要素自体に背景を表示させる */
form {
  width: 148px;
  height: 19px;
  background: url(../img/input_search.gif) no-repeat;
}

  /* legendは不要なので非表示にする */
  form legend {
    display: none;
  }

/* これはJSがオフの場合 */
  form input {
    margin-left: 23px;
    border: none;
    padding: .1em 0;
    width: 125px;
    background: none;
  }

/* ここから下はdelval.jsのときと同じ */
  form span.inputSearch-group {
    position: relative;
    display: inline-block;
    *display: inline;
    zoom: 1;
  }

    form span.inputSearch-group input {
      padding-right: 25px;
      width: 100px;
    }

    form span.inputSearch-group span.inputSearch {
      width: 17px;
      position: absolute;
      right: 2px;
      top: 1px;
      background: url(../img/delval.gif) no-repeat left center;
      cursor: pointer;
    }

    /* 新しくplaceholderのスタイルを追加 */
    form span.inputSearch-group span.placeholder {
      position: absolute;
      top: 2px;
      left: 23px;
      color: #888;
      font-size: 93%;
    }

実行とオプション

あとは好きなところで実行してください。

$(function(){
  $("input#s").inputSearch();
});

以下のようにすればplaceholderのテキストを変更できます。

$(function(){
  $("input#s").inputSearch(
    placeholder: "検索窓やでここは"
  );
});

というわけで、とても簡単に実装できましたね。ここまで作って気がつきましたが、Safariのは検索履歴が見れるんですね。なるほどー。tangoHokan.jsを使えば同じようなことできるなーとも思いながら面倒になったのでやめておきます…

サンプル – サンプルの下にあるINPUTをSafariで見ると…！
サンプルファイルのダウンロード

散々既出な気がするネタシリーズ。TITLE属性をツールチップで表示させるやつです。簡単なヘルプとか表示してあげるとユーザビリティを向上させることができる場合がありますよね。jQueryを使うととても簡単につくれます。というよりも、使いたいときにさらっとコピってすぐ使えると思うので頭の片隅にでも置いておくと便利かもしれません。

Demo
Download demo files

ポイントは

• TITLE属性を持っている要素にイベントを設定する ( *1
• mouseover()でツールチップを生成する ( *2
• mouseout()でツールチップを消去する ( *3
• mousemove()でツールチップの位置を変える ( *4

です。今回はmouseout()で消去するにしてますが、別にいちいち消さなくてもいいです。textを変えればいいだけですから。上の項目をJSソースにすると以下のような感じになります。細かくはコメントを参照してください。

追記: mouseover時にTITLEがブラウザデフォルトのチップで表示されるので、一時的にTITLE属性を空にしてみました。

jQuery(function($){

  // 全要素をからTITLE属性を持っている要素だけに絞る - *1
  $("body *").filter(function(){
    return this.title ＆＆ this.title.length>0; // ＆は半角に打ち直してください。。
  }).each(function(){
  // TITLE属性を持っている要素に適用する

    // あとで使う
    var self = $(this), title = self.attr("title");

    // TITLE属性を持っている要素にhover()で
    self.hover(

      // mouseover - *2
      function(e){ // このeはevent自体を意味する

        // TITLEがあるとブラウザのチップが出るので一時的に空にしておく
        self.attr("title","");

        // とりあえず表示するtip要素を生成しておく
        $("body").append("<div id='title-tip'>"+title+"</div>");
        $("#title-tip").css({
          position: "absolute",

          // e.pageX(Y)でカーソルが要素に乗った時点でのX(Y)座標を取得する
          top: e.pageY+(-15), // カーソルと表示したtipが重なるとチラつくので少しずらす
          left: e.pageX+15
        });
      },

      // mouseout
      function(){

        // mouseoverで空にしたTITLEを戻す
        self.attr("title",title);

        // 要素から離れた場合はtipを非表示にして削除しておく - *3
        $("#title-tip").hide().remove();
      }
    );

    // 要素上でカーソルが移動した場合は、逐一tipの位置を変える - *4
    self.mousemove(function(e){
      $("#title-tip").css({
        top: e.pageY+(-15),
        left: e.pageX+15
      });
    });
  });

});

全要素から絞り込んでいく方法は要素の量によって処理に時間がかかるので、できれば$(“a”).filter(などのように対象要素を決めてしまったほうがいいです。これでツールチップの表示と移動はできたので後は、CSSで見た目を整えるだけです。例えばサンプルのツールチップは以下のようなスタイルで定義してます。-moz(-webkit)-border-radiusでFirefoxとSafariではツールチップを角丸にしてます。CSSは単純なので問題はないと思います。

div#title-tip {
  margin: 0 1em 0 0;
  border: solid #ccc 1px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  padding: .3em .5em;
  background: #fff;
  opacity: .8;
  filter: alpha(opacity=80);
  font-size: 86%;
}

あとは背景をちょっと吹き出し風にするとか、色々遊べますので試してみてください。例えば

// とりあえず表示するtip要素を生成しておく
$("body").append("<div id='title-tip'><div class='tip-right'>"+title+"</div></div>");

のようにDIV要素を入れ子にすることで縦横可変の角丸ツールチップとかできるようになります。

Demo
Download demo files

たとえばチェックボックスAがcheckedの時に、テキストエリアXを必須にする、というようなフォーム間の依存関係なんかは定義できるのでしょうか？

via: http://5509.me/2008/08/22/realtimeformvalidation.html#comments

コメントをもらったので対応方法をメモしておきます。

完成サンプル

普通に実行する場合は以下のようになるのですが

$(".validate").validation({
  msgs: {
    email: "正しいEメールアドレスを入力してください<br />例：info@5509.me",
    submit: "入力が完了していない<strong>必須項目</strong>があります。<br /><strong>必須項目は全て入力</strong>してください。"
  },
  dialog: {
    dialogOpacity: .8
  }
});

これは指定のFORM要素に対してvalidationを実行するということなので（そのままですけどｗ
たとえばチェックボックス – 今回はラジオボタンBにしておきますが – がチェックされたときに
テキストボックスAを必須にしたい場合

1. ラジオBがチェックされる
2. テキストボックスBにaddClass(“required”)する
3. validationを実行する際に生成されている要素div.validationTip, div#dlgmat, div#dlgを削除する
4. validationを再実行する

の順番で実行していけば、できるようになります。

// 再実行する必要があるので、何度も書かなくていいように変数にしておく
var validateFunc = function(){
  $(".validate").validation({
    msgs: {
      email: "正しいEメールアドレスを入力してください<br />例：info@5509.me",
      submit: "入力が完了していない<strong>必須項目</strong>があります。<br /><strong>必須項目は全て入力</strong>してください。"
    },
    dialog: {
      dialogOpacity: .8
    }
  });
}
// 読み込み時の実行
validateFunc();

// ここからが本題
$("input[name='radio']").click(function(){

// ラジオボタンがクリックされたときに、それが$("#radio2")なら、指定のテキストボックスにaddClass("required")
  if($("#radio2").is(":checked")) $("#other").addClass("required");

// じゃない場合はremoveClass("required")
  else $("#other").removeClass("required");

// validationを実行する前に初回読み込み時に生成された要素をすべて削除(かぶるため
  $("div.validationTip,div#dlgmat,div#dlg").each(function(){ $(this).remove(); });

// validationを実行する
  validateFunc();

});

完成サンプル
サンプルファイルのダウンロード

いつのまにかYahoo検索でも採用されてました同じようなボタン

ちょっとした配慮で少しでも入力する手間を軽減できるいい例ですね。
お問い合わせなどのフォームではあんまり役に立たないかもしれませんが
検索窓のテキストボックスなどでは割と使えるかも…？

というわけでこのテキストボックスの中身を消去するボタンを実装する方法を紹介します。
最終的にjQueryプラグインにしているのでサンプルはプラグイン版です。

チュートリアルなんかいらない人はプラグインの項目にどうぞ。

サンプル
サンプルファイルのダウンロード

iPhoneのようなテキストボックスの中身を消去するボタンを実装するチュートリアル

まずはINPUT要素を用意します

<input type="text" id="search" name="search" value="" class="delval" />

わかりやすいようにIDにはsearch、CLASSにはdelvalを指定しています。

次は削除ボタンを表示しているときを考えます

削除ボタンを表示した状態を考えると

のようになると思いますが
INPUT要素に削除ボタンが重なっています。
これを実現するためには、INPUT要素と削除ボタンを親要素でくくって
親要素をposition: relativeにした上で削除ボタンを右側に絶対配置すればよさそうです。

これをHTMLとCSSでマークアップすると

<span class="delval-group">
  <input type="text" id="search" name="search" value="" class="delval" />
  <span class="delval" />
</span>

span.delval-group {
  height: 23px;
  position: relative;
  display: inline-block;
  *display: inline;
  zoom: 1;
}

  span.delval-group input {
    padding-right: 20px;
  }

    span.delval-group span.delval {
      width: 17px;
      height: 23px;
      position: absolute;
      right: 2px;
      top: 1px;
      background: url(../img/delval.png) no-repeat left center;
      cursor: pointer;
    }

display: inline-blockを使っていますが、floatでも構いません。
親要素がblock要素の場合、幅がその親に対して100%になってしまうので
どちらにしても、floatかinline-blockにする必要があります。

ここまでのサンプル

JSで置き換えるようにする

これで削除ボタンを表示しているときを実装できました。
できたましたが、結局これはJSが使えないと意味がないので
JSで実装させてしまいましょう。

上で変更したHTMLに元のHTMLからDOM操作で変更します。

$("input.delval").each(function(i){
  var self = $(this);

  self.replaceWith("<span id='delval-"+i+"'></span>");
  $("span#delval-"+i)
    .append(self)
    .append("<span class='delval'></span>")
    .addClass("delval-group");
});

ここまでです。
複数に対応できるようにeach関数を使って各要素にIDを割り当てています。

高さもJSまとめて取得・指定する

さらにCSSで親要素のSPAN要素とボタンに高さを与えていましたが
これもその要素によって変わるしいちいち設定するのは面倒なので
JSでまとめて設定してしまいましょう。

あとあと指定する必要が出てくるので
変数に入れるついでに高さを指定することにします。

var group = $("span#delval-"+i).css("height",self.attr("offsetHeight")),
  btn = $("span.delval",group).css("height",group.height());

offsetHeightはpadding, borderも含めた要素の高さです。
詳しくはjQuery の位置・サイズ関連メソッドまとめ – Cyokodog::Diaryに書かれています。

消去ボタンを押したときの動作

あとは

• INPUT要素が空ならボタンは表示しない
• INPUT要素に文字が1文字でも入力されたらボタンを表示
• 削除ボタンをクリックでINPUT要素を空にして、ボタンを非表示にする

で、実装できそうです。
どれも非常に簡単なのでまとめてしまうと

if(self.val().length<1) btn.hide();

self.keyup(function(){
  if(self.val().length>0) btn.show();
  else btn.hide();
});

btn.click(function(){
  self.val("");
  btn.hide();
  self.focus();
});

となるので、JSソースをすべてまとめると

ここまでのまとめ

$("input.delval").each(function(i){
  var self = $(this);

// 消去ボタンを実装するためにHTMLを改変
  self.replaceWith("<span id='delval-"+i+"'></span>");
  $("span#delval-"+i)
    .append(self)
    .append("<span class='delval'></span>")
    .addClass("delval-group");

// 変数に入れるついでに高さを指定
  var group = $("span#delval-"+i).css("height",self.attr("offsetHeight")),
    btn = $("span.delval",group).css("height",group.height());

// INPUT要素が空なら消去ボタンを隠す
  if(self.val().length<1) btn.hide();

// keyupイベント時にINPUT要素の文字列を見て表示非表示
  self.keyup(function(){
    if(self.val().length>0) btn.show();
    else btn.hide();
  });

// 消去ボタンを押したらINPUT要素を空にしてフォーカスしておく
  btn.click(function(){
    self.val("");
    btn.hide();
    self.focus();
  });
});

になって完成です。ここまでのサンプル

プラグイン

上で作成したものを一応プラグインにしておきました。

必要ファイルを読み込む

<link rel="stylesheet" type="text/css" href="css/delval.css" />
<script type="text/javascript" src="js/lib/jquery.js"></script>
<script type="text/javascript" src="js/delval.js"></script>

対象にしたいINPUT要素に対して実行する

<script type="text/javascript">
  $(function(){
    $("input.delval").delval();
  });
</script>

だけです。

サンプル
サンプルファイルのダウンロード

動作確認済ブラウザ

IE6〜8, Firefox3, Opera9.6, Safari3, Chrome2

でもOperaが…IMEがONの場合Enterキーを押しても
次にBackSpaceなどを押さない限り動作しません。

IMEとOperaの問題なのでMacでは問題ないです。

どんな場面でもフォームの項目入力はどうしても面倒くさいもの。

ある程度決まった単語が入力されるとわかっているなら
よく使う単語を表示して選べれば便利ですよね。

tangoHokanはINPUT入力時に予約語を表示して
少しでもユーザーの負担を減らすための補助スクリプトです。
また入力文字に応じて予約語から絞り込みができます。

Google検索のような予測ではないですが
使い方次第ではシステム連携でそれらしいこともできると思います。

サンプルを見る
サンプルファイルをダウンロードする

導入方法

tangohokan.cssとjQuery、tangohokan.jsをHTMLヘッダで読み込む

<link rel="stylesheet" type="text/css" href="css/tangohokan.css" />
<script type="text/javascript" src="js/lib/jquery.js"></script>
<script type="text/javascript" src="js/tangohokan.js"></script>

HTMLを記述しておく

例えば以下のような入力項目を用意します。
各INPUT要素にはIDが必須になります。
さらにIDは予約語を引っ張る際のキーになるので半角英数字(頭文字は数字不可)にします。
結局実行する要素は指定するのでCLASSは別になくても構いません。
わかりやすいようにCLASSを指定しているだけです。

<dl>
  <dt>趣味</dt>
  <dd><input type="text" id="hobby" name="hobby" value="" class="tangoHokan" /></dd>
  <dt>乗っているバイク</dt>
  <dd><input type="text" id="bike" name="bike" value="" class="tangoHokan" /></dd>
  <dt>使っているブラウザ</dt>
  <dd><input type="text" id="browser" name="browser" value="" class="tangoHokan" /></dd>
</dl>

予約語を決める

予約語はJSONファイルに記述します。
JSONってなに？という方はThink ITの記事を参考にしてください。
今回の場合は特にJSONが何かわかってなくても使えるようになってるので
そんなに気にしなくても大丈夫です。

サンプルファイルで使っているJSONファイルを見てください。

({
  "hobby": [
    "ちろると散歩",
    "ちろると公園で遊ぶ",
    "ちろると寝る",
    "ちろると一緒にランニング",
    "ゆにと散歩",
    "ゆにと公園で遊ぶ",
    "ゆにと寝る"
  ],
  "bike": [
    "SR400",
    "Estrella",
    "250TR",
    "Grass Tracker",
    "ST250"
  ],
  "browser": [
    "IE6",
    "IE7",
    "IE8",
    "Firefox3",
    "Opera9",
    "Safari3",
    "Chrome2"
  ]
})

“hobby”, “bike”, “browser”がそれぞれ予約語に対する見出しのようなものです。
この見出しはデータを引っ張る際のキーになるので半角英数字(頭文字は数字不可)にします。
要はHTML側のIDとJSONの見出し部分が同じ項目の予約語がそれぞれ表示されます。

予約語の種類を増やしたい場合は、カンマで区切って追加していきます。

サンプルではこのJSONデータはHTMLファイルと同じディレクトリにあることを想定しています。
違う場所に置きたい場合は、オプションから指定できます。

tangoHokanを実行したいINPUT要素を指定して実行する

以下をHTMLヘッダか任意のJSファイルで記述します。

$(function(){
  $("input.tangoHokan").tangoHokan();
});

オプション項目

オプション指定で

JSONファイルの場所/補完単語表示の位置/
予約語がない場合の文章/閉じるボタンのタイトル

を変更できます。デフォルトは以下になってます。

$(function(){
  $("input.tangoHokan").tangoHokan({
    json: "data.json",
    top: 2,
    left: 0,
    noResult: "No word matched.",
    close: "Close"
  });
});

動作確認済ブラウザ

IE6〜8, Firefox3, Opera9.6, Safari3, Chrome2

今回何となく見送ったものとかその他のこと

• 項目が多すぎる際の処理 (上位10件を表示して、絞り込みの際に再表示にするつもり
• ドキュメントクリックでプルダウンを閉じたい
• 対象ユーザーによっては逆にユーザビリティを低下させるかもしれない
• それを言い出したら全部そうかも。。

サイト運営において
目標はそれぞれ異なると思いますが、そもそも目標を達成するためにはどうすればいいでしょうか。

LPOもそれなりに浸透してきましたが
新規ユーザーの心を掴めるかどうか（ユーザーの目的に合った情報を提示してあげること）
が重要になってくると思います。

注目を惹くための手段は色々とあると思いますが

• 新規ユーザーのみに提示するようなコンテンツを表示してあげる

というのもひとつの手段になります。
今回はJavaScriptとCookieを使って表示する情報をコントロールする方法を紹介します。
この方法はとても簡単に導入できるので覚えておいて損はないと思います。

まずは何もしていない状態のサンプルを見てください。
では次に新規ユーザーのみに提示するようなコンテンツを表示してあげるサンプルを見てください。

サンプルをもう一度見たい場合は
タイトルの下の 新規ユーザーに戻る リンクをクリックしてください。

一度表示されたらF5を押してページを更新してみてください。
こうするだけで印象が違いませんか？

やっていることは簡単で
Cookieを使って一度訪れたことがあるユーザーかどうかを判別して
そうでなければ（新規ユーザーなら）指定の要素を表示している、だけです。

導入方法

まずは、cookie.jsをダウンロードして読み込みます。

このcookie.jsはjQuery Cookieプラグインを
JavaScriptでcookieを操作する時はjquery.cookie.jsを使おう – 文殊堂
を参考にjQueryなしで使えるように書き換えたものです。

<script type="text/javascript" src="js/lib/cookie.js"></script>

今回は以下のような要素を新規ユーザーに表示することにします。

<div id="welcome">
  <p>ようこそ！はじめての方は以下のエントリーがおすすめです。</p>
  <p id="close">閉じる</p>
  <ul>
    <li><a href="http://5509.me/2009/04/16/using-wordpress-as-cms.html">CMSとしてのWordPressでサイト構築をするときに便利な13のプラグイン
    <img src="http://b.hatena.ne.jp/entry/image/http://5509.me/2009/04/16/using-wordpress-as-cms.html" /></a></li>
    <li><a href="http://5509.me/2008/08/22/realtimeformvalidation.html">リアルタイムフォームバリデーション jQuery.validation.js</a>
    <img src="http://b.hatena.ne.jp/entry/image/http://5509.me/2008/08/22/realtimeformvalidation.html" /></li>
    <li><a href="http://5509.me/2008/09/14/jqueryselectable.html">selectボックスをシンプルなプルダウンに拡張するjQuery.selectable.js
    <img src="http://b.hatena.ne.jp/entry/image/http://5509.me/2008/09/14/jqueryselectable.html" /></a></li>
  </ul>
</div>

まずはＣＳＳで↑の要素(p#welcome)を非表示にしておきます。

div#welcome {
  display: none;
}

次に、JSとCookieを使って新規ユーザーにのみ表示するスクリプトを加えます。
サンプルではHTMLのHEAD内に書いています。

window.onload = function(){
  // Cookieに値が保存されているか
  var visited = cookie("visited") ＆＆ cookie("visited")!=null ? false : true;

  // Cookieが空の場合（新規ユーザー）p#welcome を表示する
  if(visited){
    document.getElementById("welcome").style.display = "block";
    cookie("visited","visited"); // Cookieに値を保存して以降はリピーター扱いにする
  }
}

＆だけ半角に打ちなおしてください。。

JSがわからない人はそのまま貼って、
getElementById(“welcome”)のwelcome部分を表示したい要素のIDにすれば大丈夫です。

jQueryを使えば…

jQueryを使って表示方法を変えたサンプル

表示方法ちょっと変えるだけで印象も全然違いますね。
jQueryを使えば簡単にできますので、興味がある人は試してみてください

サンプルファイルのダウンロード

JSのみ

cookie.js(1KB) – オリジナルソース jQuery Cookieプラグイン

サンプルファイル

contents-for-new-visitors.zip

prebitlyの動作サンプル
prebitlyのサンプルファイルダウンロード

自分のサイト、ブログでbit.ly（短縮URL）を使いたいけど
ユーザー目線で考えると目的地がはっきりしないURLは不安じゃないですか？

短縮URLで飛ばした先でウイルス感染…とかもあるみたいですし。
慣れてる人はFirefoxのアドオンとか、Greasemonkeyを使えばいいんですけど
それだけじゃだめですよね。

prebitlyプラグインを導入すれば、bit.lyを使った短縮URLでも
プレビューチップで元のURLを表示するので、みんなが安心してリンクをクリックできます。
（さすがに、音声ブラウザまでは無理です…）

トピックス

• ダウンロード
• 導入方法
• 設定
• サンプル
• 動作環境

ダウンロード

JSのみ

prebitly.js(1KB)

サンプルファイル

prebitly.zip

導入方法

prebitlyプラグインを使うには、bit.lyのアカウントとAPIキーが必要です。
作成、取得は非常に簡単です。

bit.lyのアカウントを作成する

このページ左のCreate a Free bit.ly Accountから項目に入力してSign Upします。

AccountのページからAPIキーを取得する

右上のリンクから移動します。
そうすると左側に↓のように「API Login」「API Key」が表示されています。

ファイルを読み込む

prebitly.jsを読み込む前に、Login IDとAPI KeyでAPIにアクセスできる状態にします。
login= /ここにAPI Login
apiKey= /ここにAPI Key

<link rel="stylesheet" type="text/css" href="css/prebitly.css" />
<script type="text/javascript" src="js/lib/jquery.js"></script>
<script type="text/javascript" src="http://bit.ly/javascript-api.js?version=latest&amp;login=norinorinori&amp;apiKey=R_e3f7b535791f579489b605e30356993b"></script>
<script type="text/javascript" src="js/prebitly.js"></script>

デザインを変える場合はCSSファイルから行ってください。
最後に実行します。

<script type="text/javascript">
  $(function(){
    $("a[href*='http://bit.ly']").prebitly();
  });
</script>

これだけで bit.ly で短縮されたURLにマウスカーソルが乗ったときに
プレビューが表示されるようになります。

設定

チップ表示位置の微調整、読み込み中の文言を変えることができます。
変更するときは以下のように記述します。

<script type="text/javascript">
  $(function(){
    $("a[href*='http://bit.ly']").prebitly({
      top: -40,
      left: 5,
      loadingText: "loading..."
    });
  });
</script>

prebitlyの動作サンプル
prebitlyのサンプルファイルダウンロード

動作環境

• IE6（後方互換モードは未確認）
• IE7
• Firefox3
• Opera9.5
• Safari3
• Chrome

ちなみに…

プレビューにサムネイルなど
もっと拡張した機能がほしい場合は bitly というプラグインがあります。

角丸の幅可変ボタンを作ろうと思うと割と面倒くさいんですけど
さらにクロスフェードさせたい（実質クロスフェードではないんですが）
という欲望に負けてやってみました。

完成サンプル
サンプルファイルのダウンロード

とりあえずMacでしか確認してないのでIEとかどうなるかわかりません。
IE6で崩れてたのでCSSを修正しました。

角丸可変ボタンのHTML

そもそも角丸幅可変のボタンを作ろうと思うと要素の入れ子は避けられません。
下のような感じになります。

<a href="#"><span>SUBMIT</span></a>

ムダな要素はJSで…
でもいいですけど、ここはデザインに直接影響するところなので
HTML+CSSだけでやったほうがいいです。
中のSPANはあきらめてください。僕は気にしてません。

角丸可変ボタンのCSS

これにCSSを書いていくと
たぶん以下みたいな感じになると思います。
ボタンは2つ以上並ぶ事も想定します。

使う画像は次の2つです。

p.btn {
  overflow: hidden;
}

  p.btn a {
    float: left;
    padding-left: 5px;
    color: #fff;
    background: url(../../img/btn_left.gif) no-repeat left top;
    text-decoration: none;
  }

    p.btn a span {
      padding: 0 20px 0 15px;
      display: block;
      height: 35px;
      background: url(../../img/btn_right.gif) no-repeat right top;
      line-height: 35px;
      cursor: pointer; /* for IE */
    }

最近は結構普通にinline-block使ってます。
floatで書きなおしました。

クロスフェードを実現するには

問題はここからですが
クロスフェードをさせるとなると、背景画像を2枚重ねていないとできません。
背景画像を入れ替えれば…CSS Spriteを使ってたらそういうわけにもいきません。

元々あるボタンの下にフェード後のボタンを配置して
mouseover時に上のボタンをフェードアウトさせればうまくいきそうです。

構造としては
- フェード後のボタン
- 元々あるボタン
を並列に並べて、
フェード後のボタンが元々あるボタンの下にくるようにする必要があるので
2つのボタンをグループ化して、
フェード後のボタンを絶対配置でグループの左上に配置します。

具体的には下のHTMLのようになります。

<span class="cfGroup"><!-- ボタンを重ねるのでグループ化する -->
  <span class="cfGM"><!-- これが下に敷いておくボタン -->
    <span class="cfGLeft">
      <span class="cfGRight">SUBMIT</span>
    </span>
  </span>
  <a href="#"><!-- こっちが元々あるボタン -->
    <span>SUBMIT</span>
  </a>
</span>

jQueryを使って構造を変える

さすがにこれは汚いので、jQueryで構造を変更しましょう。
グループを識別するためにidを割り当ててます。

$("a","p.btn").each(function(){
  $(this).replaceWith("<span id='cfG"+i+"' class='cfGroup'></span>");
  // 既存のボタンをグループと置き換える
  $("span#cfG"+i)
    .append("<span class='cfGM'><span class='cfGLeft'><span class='cfGRight'>"+$(this).text()+"</span></span></span>")
    .append($(this).clone());
    // フェード後のボタンを追加したのち
    // 既存のボタンをその後ろに追加する
});

CSSを追記する

さらにCSSを追記します。

p.btn span.cfGroup {
  float: left;
  position: relative;
}

  p.btn span.cfGroup span.cfGM {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
  }

    p.btn span.cfGroup span.cfGLeft {
      float: left;
      padding-left: 5px;
      color: #fff;
      background: url(../../img/btn_left.gif) no-repeat left -35px;
      text-decoration: none;
    }

      p.btn span.cfGroup span.cfGLeft span.cfGRight {
        padding: 0 20px 0 15px;
        display: block;
        height: 35px;
        background: url(../../img/btn_right.gif) no-repeat right -35px;
        line-height: 35px;
      }

さらにこのままだと、
既存のボタンとフェード後のボタンの重なりが逆になるので
z-indexを大きい数値にしておきます。
z-indexを使う場合は、position: relativeにする必要があります。

p.btn a {
  float: left;
  padding-left: 5px;
  position: relative;
  z-index: 100;
  color: #fff;
  background: url(../../img/btn_left.gif) no-repeat left top;
  text-decoration: none;
}

上のボタンをフェードさせて実現する

ここまでくればあとは、
hover時に上に乗ってるボタンをフェードアウトさせるだけです。

$("a","p.btn").each(function(){
  $(this).replaceWith("<span id='cfG"+i+"' class='cfGroup'></span>");
  $("span#cfG"+i)
    .append("<span class='cfGM'><span class='cfGLeft'><span class='cfGRight'>"+$(this).text()+"</span></span></span>")
    .append($(this).clone());

  // ここから下がフェード
  $("a","span#cfG"+i).hover(function(){
    $(this).fadeTo("normal",0);
  },function(){
    $(this).fadeTo("normal",1);
  });
});

ポイント

フェードさせるときの注意がひとつだけあって
fadeOutにすると、最終的にdisplay: noneになるので
グループの幅と高さがなくなって、下にある要素が上に詰まります。
なので、ここではfadeToでOpacityのみを操作しています。

ここまでのサンプル

連続でホバーさせたときに動作が…

A要素にhoverするとfadeToが呼び出されて
フェードアニメーションが実行されますが連続でhoverさせると
アニメーションキューがたまっていって、ぴかぴかします。

これを解決するにはfade実行時に
直前のアニメーションキューを削除すればいいので

// ここから下がフェード
$("a","span#cfG"+i).hover(function(){
  $(this).queue([]).fadeTo("normal",0);
},function(){
  $(this).queue([]).fadeTo("normal",1);
});

queue([])でアニメーションキューを空にすればぴかぴかしなくなります。

完成サンプル
サンプルファイルのダウンロード

あ、、

このサンプルなら画像を2つに分ける必要はなかったですね…

サンプル
サンプルファイルのダウンロード

ちょっと前に流行った？アコーディオンメニューの開閉状態を
Cookieで保存する方法をメモをかねて紹介します。

必要なファイルを集める

面倒だと思うのでサンプルにまとめました。
サンプルファイルをダウンロードして新しいHTMLでJSファイルを読み込んでください。

サンプルファイルのダウンロード

HTMLを用意する

CSSファイルを読み込む

この記事でCSSの解説はしてません。。

<link type="text/css" rel="stylesheet" href="css/style.css" />

JSファイルを読み込む

<script type="text/javascript" src="js/lib/jquery.js"></script>
<script type="text/javascript" src="js/lib/jquery.easing.js"></script>
<script type="text/javascript" src="js/lib/jquery.cookie.js"></script>

HTMLをマークアップする

<div id="sub">
  <div class="section nav">
    <h2 class="sub_nav_heading toggle">A</h2>
    <ul class="sub_nav">
      <li><a href="">A-1</a></li>
      <li><a href="">A-2</a></li>
      <li><a href="">A-3</a></li>
      <li><a href="">A-4</a></li>
      <li><a href="">A-5</a></li>
      <li><a href="">A-6</a></li>
      <li><a href="">A-7</a></li>
    </ul>
  </div>
  <!--//Section-->

  <div class="section nav">
    <h2 class="sub_nav_heading toggle">B</h2>
    <ul class="sub_nav">
      <li><a href="">B-1</a></li>
      <li><a href="">B-2</a></li>
      <li><a href="">B-3</a></li>
      <li><a href="">B-4</a></li>
      <li><a href="">B-5</a></li>
      <li><a href="">B-6</a></li>
      <li><a href="">B-7</a></li>
    </ul>
  </div>
  <!--//Section-->
</div>
<!--//Sub-->

HTMLがちょっと気持ち悪いと思う人もいるかもしれませんが
今回はこんな感じでマークアップしてます。

JSを書く

普通にアコーディオンメニューにする

今回は特にアコーディオン部分の記述にはふれませんが
以下の記述でアコーディオンになります。

jQuery Easingプラグインを使ってちょっと動きを変えてます。
何気ないアコーディオンもこういう動きなら面白いかもしれないですね。
単純に鬱陶しいだけにもなり得ますけど…

ちなみに、前回のエントリjQuery.easingscroll.jsはEasingプラグインを
含んでいるので併せて使うと楽しい動き(≠うざい動き)のサイトになりますね！

/*
* @ スライドナビゲーション
*/
$("ul.sub_nav","div#sub").each(function(i){
// 開閉ナビで使う変数定義
  var me = $(this),
    box = me.parent(), // 親要素のdiv.nav
    heading = me.prev().append("<span class='toggle'></span>"),
    // 兄要素のh2にspan.toggleを追加して変数に保存
    toggle = $("span.toggle",heading);// Toggle

  // 下層ナビとToggleボタンを隠す
  me.hide();
  toggle.hide();

  // Toggleボタンの表示非表示
  heading.hover(function(){
    toggle.show();
  },function(){
    // h2.openedの場合はToggleを表示したままにする
    if(!heading.hasClass("opened")) toggle.hide();
  });

  // Toggleクリック時の動作
  toggle.click(function(){
    heading.toggleClass("opened");
    if(!box.hasClass("opened")) box.addClass("opened");

    // アニメーション設定
    me.animate({
      height: "toggle"
    },{
      easing: "easeOutBounce",
      // jQuery Easingを使って開閉時に跳ねるようにしてみる
      duration: 400,
      complete: function(){
        if(!heading.hasClass("opened")) box.removeClass("opened");
      }
    });
  });
});

jQuery Cookieを使うのでちょっと紹介

jQuery.cookieプラグインを使ってます。
jQueryを使う場合はこれが一番わかりやすく、簡単にCookieを扱えます。

いちおう説明しておくと

$.cookie("Cookieの名前", "Cookieの値"); // 保存
$.cookie("Cookieの名前"); // 値の読み出し

という具合で使えます。
保存時、第3引数でオプションを指定することで保存日数などを指定できます。

$.cookie("Cookieの名前", "Cookieの値" { expires: 7, path: "/", domain: "jquery.com", secure: true });

また、値にnullを入れることでCookieを削除することができます。

$.cookie("Cookieの名前", null); // Cookieの削除

Cookieを使うタイミング

開閉状態を保存する場合Cookieを扱う箇所が3つあって

• Toggleをクリックしたとき(開けるとき) – Cookieを保存
• Toggleをクリックしたとき(閉じるとき) – Cookieを保存
• ページをロードしたとき – Cookieを読み出す

この3つのタイミングでCookieを保存したり、読み出すことで開閉状態を保存できます。

Cookieの保存方法をどうするのか

全てのアコーディオンでCookieを保存するのはきれいなやり方ではないので
開いた状態を記憶するためにCookieには[i]という値を保存していくことにします。

例えば、1つめのパネルが開いた場合、Cookieには[0]が保存されることになります。
さらに、2つめも開いた場合、[0][1]という値が保存されます。

閉じる場合には逆で[i]を取り除くことで元の状態になります。
これらの値はパネルが開いた順に保存されていくので
3-2-4という順番で開いた場合、[2][1][3]といったように保存されますが
値の削除時にはreplace関数を使うので、この順番は特に問題ありません。

ちなみに[]を使う理由はパネル数が10を超える場合に
0と1〜9の区別がつかなくなるのを防ぐためです。

とりあえずCookieを使って保存していく

まずはCookieの値を変数に保存しておきます。
これはページロードのタイミングで行います。

var cookie = ($.cookie("menu") ＆＆ $.cookie("menu")!=null) ? $.cookie("menu") : "";

Cookieの名前はmenuにしています。
Cookiに値がある場合はcookieに値を保存
それ以外の場合は空の値を渡しておきます。

あとCookieに保存する・識別用の値を宣言しておきます。

// 開閉ナビで使う変数定義に追記する
var pos = "["+i+"]"; // Cookieに保存する

この i はeach関数でループ時に得られる引数を使います。
準備ができたらClick時に保存するように記述します。

if(!box.hasClass("opened")){ // 開くとき
  box.addClass("opened");
  cookie += pos; // このパネルの識別用の値をCookieの値に追記
  $.cookie("menu",cookie); // Cookieの値をCookie["menu"]に保存する
}else{ // 閉じるとき
  cookie = cookie.replace(pos,""); // このパネルの識別用の値をCookieの値から削除する
  $.cookie("menu",cookie.length==0 ? null : cookie);
  // Cookieの値をCookie["menu"]に保存する
  // このとき値が空になったらCookie["menu"]を削除する
}

あとは初期表示パネルを最初に保存したCookieの値から決めます。
cookie.match(new RegExp(pos))の部分で判別してます。

// クッキーに[i]がある場合はナビを表示する
if($.cookie("menu")==null
|| !cookie.match(new RegExp(pos))){
  me.hide();
  toggle.hide();
}else{
  box.addClass("opened");
  heading.addClass("opened");
}

これらのソースコードを追記した完成版が以下になります。

/*
* @ スライドナビゲーション
* @ Cookieを使って開閉をコントロール
*/
// ナビゲーションで使うCookieを読みこんでおく
var cookie = ($.cookie("menu") ＆＆ $.cookie("menu")!=null) ? $.cookie("menu") : "";
$("ul.sub_nav","div#sub").each(function(i){
  // 開閉ナビで使う変数定義
  var me = $(this),
    box = me.parent(), // 親要素のdiv.nav
    heading = me.prev().append(""),
    // 兄要素のh2にspan.toggleを追加して変数に保存
    toggle = $("span.toggle",heading), // Toggle
    pos = "["+i+"]"; // Cookieに保存する

  // クッキーに[i]がある場合はナビを表示する
  if($.cookie("menu")==null
  || !cookie.match(new RegExp(pos))){
    me.hide();
    toggle.hide();
  }else{
    box.addClass("opened");
    heading.addClass("opened");
  }

  // Toggleボタンの表示非表示
  heading.hover(function(){
    toggle.show();
  },function(){
    // h2.openedの場合はToggleを表示したままにする
    if(!heading.hasClass("opened")) toggle.hide();
  });

  // Toggleクリック時の動作
  toggle.click(function(){
    heading.toggleClass("opened");
    if(!box.hasClass("opened")){
      box.addClass("opened");
      cookie += pos;
      $.cookie("menu",cookie);
    }else{
      cookie = cookie.replace(pos,"");
      $.cookie("menu",cookie.length==0 ? null : cookie);
    }

    // アニメーション設定
    me.animate({
      height: "toggle"
    },{
      easing: "easeOutBounce", // jQuery Easing
      duration: 400,
      complete: function(){
        if(!heading.hasClass("opened")) box.removeClass("opened");
      }
    });
  });
});

完成サンプルを見る

というわけで

肝心のCookieはかなり簡単に使えるということが伝わったでしょうか。
Cookieの保存方法は色々考えられるので試してみると楽しいです。

jQueryとjquery.cookie.jsを使って開閉を保持するメニューを作ってみる – caraldo.net
jQueryを使用したCookie開閉保持メニューをよりjQueryっぽく書き直す – caraldo.net

同じHTMLで2通りのやり方とか。後の記事の方がCookieがすっきりします。

サンプルを見る (IE6では確認できません

jQueryを使うとかなり簡単にページ内スクロールが実装できるのですが、さらにjQuery Easingプラグインと合わせるとなかなか面白い動きができたりします。

というわけで誰でも簡単に導入できるようにプラグインにしました。以前にslideScroll.js(jQueryプラグイン版）というページ内スクロールの記事を書きましたが、悲しいことに断然こちらのほうがおすすめです。動きが滑らか…そして自分の好きな動きから選べます。

今回はソースの解説もしてるので、興味のある人は見てみてください。

ページ内スクロールプラグインなのに、7KBもあるのはEasingプラグインの容量が5KBだから…これを機に他のアニメーション部分でもEasingプラグインも使うと一石二鳥になったりしますのでぜひ。

サンプルのセレクトボックスでEasingを選んで右の入力欄にDurationを入れて確認できます。
そもそもEasingが何かわからない人も、とりあえず左のセレクトボックスの値を変えて、右のテキストボックスには800あたりを入力して、中央のナビゲーションリンクをクリックしてみてください。

おすすめをちょっとあげてみます。（右の数字はDuration）

• easeOutBounce, 800
• easeInOutExpo, 600
• easeOutElastic, 800

具体的な動きの違いはjQuery日本語リファレンスのEasingページで確認できます。

トピックス

• ダウンロード
• 導入方法
• 設定
• サンプル
• 仕様など
• 動作環境
• ソース解説

ダウンロード

JSのみ

jquery.easingscroll.js(7KB)

サンプルファイル

easingScroll.zip(26KB)

導入方法

<script type="text/javascript" src="js/lib/jquery.js"></script>
<script type="text/javascript" src="js/jquery.easingscroll.js"></script>

HEAD内でスクリプトファイルを読み込んで、そのあと

<script type="text/javascript">
$(function(){
  $("a[href='#']").easingScroll();
});
</script>

というように実行します。

設定

実行時のプロパティではEasingとDurationが設定できます。またjQuery Easingプラグインを内包しているので、さまざまなEasingを利用できます。

Easingは動き、Durationはアニメーションが始まって終わるまでの時間（ミリセカンド==msec）です。durationには”slow”(610msec), “normal”(410msec), “fast”(210msec)も指定できます。

$("a[href='#']").easingScroll({
  easing: "easeInQuad",
  duration: 700
});

指定できるEasing

linear, swing, jswing
easeInQuad, easeOutQuad, easeInOutQuad
easeInCubic, easeOutCubic, easeInOutCubic
easeInQuart, easeOutQuart, easeInOutQuart
easeInSine, easeOutSine, easeInOutSine
easeInExpo, easeOutExpo, easeInOutExpo
easeInCirc, easeOutCirc, easeInOutCirc
easeInElastic, easeOutElastic, easeInOutElastic
easeInBack, easeOutBack, easeInOutBack
easeInBounce, easeOutBounce, easeInOutBounce

どういう動きかはjQuery日本語リファレンスEasingページかサンプルで確認できます。

easeIn~は始まりに~のエフェクトが入り、easeOut~はその逆で終わりにエフェクトがかかります。easeInBounceなら始まりに跳ねて、easeOutBounceは終わりに跳ねます。easeInOutBounceは文字通り両方に跳ねます。

仕様など

• アニメーション時にドキュメントをクリックするとアニメーションが止まります。
• jQuery1.3.xから後方互換モードに正式に非対応になったため、後方互換モードには対応してません。

動作環境

• IE6（後方互換モードは未確認）（サンプルは確認できませんが動作はします）
• IE7
• Firefox3
• Opera9.5
• Safari3
• Chrome1.0

ソース解説

jQueryでページ内スクロールを実装する事自体はとても簡単で、HREF属性に”#”を持ったA要素をクリック

$("a[href*='#']").click(function(){});

したときにまず

var c = $(this.hash).offset();

で、ドキュメント内$(“#ID”)のOffsetを取得して、その後は単純にanimate関数を使って

$("html,body").animate({
  scrollTop: c.top,
  scrollLeft: c.left
},{
  easing: "linear",
  duration: 400
});

ドキュメントの見えている部分を動かしているだけです。jQueryのanimate関数を使えばブラウザの高さ(幅)や現在位置の取得などが必要なく、目的位置をscrollTop(scrollLeft)で指定するだけです。

ただ、boxModelによって実装が違うみたいでたとえば、後方互換モードは”body”、標準準拠モードは”html”の指定にするようです。なので一般的には”html,body”をまとめて指定することで解決できそうですが、Operaは”html,body”の両方指定にすると、不具合が出るので結局

var t = $.support.boxModel ? navigator.appName.match(/Opera/) ? "html" : "html,body" : "body";

というように、boxModelで分けて、さらにOperaの場合だけは”html”のみの指定としています。

クリック判定の箇所などはドキュメント内に”#ID”を持った要素が存在しているか等を一度each関数でループさせてその中のifで判断して、残ったものだけにclick関数でイベント登録しています。

さらにそのままだと連続して”#ID”を含むA要素をクリックしたときに、アニメーションキューがたまっていってラグが発生するので、A要素クリック時には

$("html,body").queue([]).stop();

でアニメーションキューを削除して、現在のアニメーションをストップさせてます。fadeIn(Out)などでもキューはたまっていくので動きが鬱陶しい感じになった場合はfadeを登録した要素に

$(elm).queue([]).stop();

してみるとすっきりするかもしれません。

もう先週の火曜日になるのですが、CSS Nite in OSAKA, vol.14に参加させていただきました。
そうです、この記事、今更感がいなめません…WordPressの記事を書く前にこっちを書けよという声が…

言い訳としては、WordPressの記事、あれは2日くらい前からの予約投稿だったんですね。
あ、こっちを予約しとけよ、という話ですかｗ

とにかくスタッフの皆様、僕のセッションを見てくださった方、お疲れ様でした・ありがとうございました！
反省する点もいろいろとありましたが、非常にいい機会になりました。なにより楽しかったです。

淡々と話をしているように見えたかもしれませんが、僕の中では色々な盛り上がりなどがあったんですｗ
その後の懇親会では印象が違いますね、と言われたりもしました…まったくそのとおりです笑

CSS Niteのフォローアップ記事からも見れますが、当日のスライドのリンクを残しておきます。

• jQueryプラグインを利用してユーザーフレンドリーなフォームを設計しよう

ついでにjQuery.validation.jsの記事も…

• jQuery.validation.js

一部対応が遅くなってしまいましたが、修正・更新をしました。
前回まではjQuery1.2.6を同梱してましたが、今回から1.3.2を同梱してます。
主な修正・更新箇所は以下になります。

• AjaxZip2の指定方法を間違っていたので修正しました。
• Dialogを使わずにSUBMITボタンをDISABLEDにするオプションを追加しました。
• Safariで必須チェックが一番上にきていなかったので修正しました。
• Webkit系でdocumentを一度クリックするまで固まる不具合がありましたが、jQueryを1.3以降に更新することで解消されます。

確かにWordPress単体ではCMSとしてはちょっと足りない機能が多いです。
そこでWordPressをブログではなくCMSとしてサイトを構築をするときに便利なプラグインを紹介します。
というかただの個人的なまとめです。

Custom Field GUI Utility

カスタムフィールドを便利に使うプラグイン。

これはかなりおすすめというかCMSとして使う場合は必須と言えるくらい便利。
MTにはカスタムフィールドという便利なものがあります。
WordPressにも一応あるにはあるんですがこれが使いにくい…
そんな不満を解決してくれるプラグイン。

Light Formatter

テーブルをPukiWiki記法のように書くことができるようになるプラグイン。
会社概要などの簡単なテーブルを使うときに便利。

Duplicate-Post

記事やページのコピーを作成するプラグイン。
同じ形式の記事やページを書くときに。

TinyMCE Advanced

記事（ページ）を書く時のエディタ（TinyMCE）をカスタマイズするプラグイン。
サイト更新に必要な項目だけを表示しておけば、きっとクライアントも更新しやすくなります。

All in One SEO Pack

これなしにはWordPressが始まらないAll in One SEO Pack。
タイトル、各メタなどを最適化します。

Redirection

指定したURIへのアクセスを任意のURIにリダイレクトするプラグイン。
サイトをリニューアルした際などに、ディレクトリ構成と一緒にURIが変わってしまうことがありますよね？
そういう場合に便利です。

Nice Trailingslashit

WordPressではページURIはデフォルトで http://5509.me/about  というようになるのですが
末尾にスラッシュを付加するプラグイン。スラッシュがないと気持ち悪いという人向け。

WordPress.com Stats

アクセス解析はGoogle Analyticsを使っていますが
Statsを使えば管理画面内に解析結果を表示することができます。

追記：StatsはGAとは別のアクセス解析です。ややこしくしてしまってすいません。。

WP Super Cache

全てのページをキャッシュ（静的HTML）としてサーバに保存しておき
アクセス時のレスポンス向上、サーバへの負荷を軽減するプラグイン。

Maintenance Mode Plugin

メンテナンス中を表示するプラグイン。
ログインしている場合は表示されずにサイトの確認ができます。

Sitemap Generator Plugin

投稿記事やページからサイトマップページを生成するプラグイン。

Google Sitemap Generator

こちらはGoogle Webmaster Centralなどを利用する際に必要なsitemap.xmlを生成するプラグイン。

WP-DB-Backup

最後は記事などのバックアップを取るプラグインです。
定期的にバックアップを指定メールアドレスに送ったりできます。

他にも外せないプラグインなどあれば教えてください

simpleSlideを使えば誰でも簡単にHTMLスライドを導入できます。

ファイルをダウンロードする

• simpleSlide.zip(23KB)

要素をマークアップする

simpleSlideではマークアップに決まりがありますが非常に単純です。

ページを分ける

1つのdiv.sectionが1つのスライドページに相当します。

<div class="section">
</div>

ページにタイトルを付ける

スライドページには必ずひとつのタイトルが必要です。
div.section直下の子要素はHN要素にします。

<div class="section">
  <h2>これがタイトルになる</h2>
</div>

HN要素じゃなくてもいいんですが
とりあえずdiv.section > * のテキストがタイトルとして扱われます。

あとは適当に要素を入れていきます。
blockquoteとかpreとかその辺のスタイルは指定してないので
使う場合はCSSに追加してください。

<div class="section">
  <h2>これがタイトルになる</h2>
  <p>テキストテキスト</p>
  <ul>
    <li>リストリスト</li>
    <li>リストリスト</li>
  </ul>
</div>

必要なファイルを読み込む

<link rel="stylesheet" type="text/css" href="css/simpleslide.css" />
<script type="text/javascript" src="js/lib/jquery.js"></script>
<script type="text/javascript" src="js/simpleslide.js"></script>

だけです。

こんな感じになります。

操作方法など

これまた簡単です。
ドキュメント上をクリックするとスライドを進めたり戻したりできます。
また矢印キーやスワイプでも操作できます。

• クリックはドキュメントの右半分なら進む、左なら戻る。
• 矢印キーは↑・←は戻る、→・↓は進む。
• Macの場合は上スワイプは戻る、下スワイプは進む。
• メニューをクリックするとタイトル一覧が表示されて好きなスライドに移動できます。
• Back To Titleからいつでもタイトルスライドに戻れます。

細かいところでは

• タイトルスライドは #slide-0 で数字部分が増えていきます。
• #slide-X をURI末尾に付けて呼び出すと対象のスライドで開けます。
• #slide-X の Xは(下部に表示されているスライドページナンバー -1)になります。
• タイトルはスライドのタイトルを付加したものに書き換えられます。

対応ブラウザ

IEには対応してません。。。
CSSのround-borderプロパティを使ってるので正式な対応ブラウザは以下だけです。

• Firefox3
• Safari3

自分でも実感が湧かないのですが、、、
CSS Nite in OSAKAに出演させていただくことになりました。
（先月から決まっていたのですけれど報告が遅れてしまいました。）

予定している内容は
「jQueryプラグインを使って使いやすいフォームを設計しよう」です。

jQueryプラグインと言ってますが
一般的に使いやすいフォームを作るためのマークアップから
プラグインの使い方までを紹介できればと思っています。

ちなみに人前で喋る、とかそういった類いのことをほとんどしたことがなくて
すでにガチガチに緊張してます…

そういえば結婚式後にあった親族会食の挨拶で盛大に噛んだなぁ…
一度噛むとその後はもう噛みの連鎖でそれはもうすごいことに…笑

落ち着いてゆっくり喋り、というアドバイスを妻からもらいました。
まさにその通り…いや分かってはいるんやけど興奮すると。。

こんな滑舌の悪い僕ですが、よければ応援にきてください:D

jQueryを使ってNews Tickerプラグインを作ってみよう[前編]

• jQueryを使ってNews Tickerプラグインを作ってみよう[前編][1]
• jQueryを使ってNews Tickerプラグインを作ってみよう[前編][2]

jQueryプラグインのメリットは

• 要素をjQueryのメソッドチェーンで繋いで実行できる
• オプション項目の指定が簡単にできる

といったところでしょうか。

前回作成したnewsFaderメソッドをより汎用的なものにする

前回、前々回で以下のnewsFaderメソッドを作成しました。

ところでnewsFaderとnewsTickerを間違えて記述していたので
プラグインはnewsTickerにして作成します。

function newsFader(){
  if($("li","div#newsTicker ul").length==1) return false;

  $("li","div#newsTicker ul").each(function(i){
    $(this).attr("id","news-"+i);
    if(i!=0) $(this).hide();
  });

  var start = count = 0,
    end = $("li","div#newsTicker ul").length-1,
    interval = 1500,
    fadeTimer = setInterval(function(){
      $("li#news-"+(start==1 ? count==0 ? end : count-1 : count)).hide();
      $("#news-"+(start==1 ? (++count)-1 : ++count)).fadeIn("slow");
      if(start==0 ＆＆ count>=end){
        count = 0;
        start = 1;
      }else if(start==1 ＆＆ count>end){
        count = 0;
      }
    },interval);
}
newsFader();

汎用性を持たせる

まずは newsFaderメソッドに記述している
要素$(“li”,”div#newsTicker ul”)、切り替えの間隔interval、フェードアウトの速度”slow”
を引数指定で実行時できるようにします。

$(“li”,”div#newsTicker ul”) は $(“div#newsTicker ul li”) と同じ意味です。
どの要素を指定しているか分かりやすくするために前者のように記述しています。

function newsFader(elm,fadeSpeed,fadeInterval){
  if(elm.length==1) return false;

  elm.each(function(i){
    $(this).attr("id","news-"+i);
    if(i!=0) $(this).hide();
  });

  var start = count = 0,
    end = elm.length-1,
    fadeTimer = setInterval(function(){
      $("#news-"+(start==1 ? count==0 ? end : count-1 : count)).hide();
      $("#news-"+(start==1 ? (++count)-1 : ++count)).fadeIn(fadeSpeed);
      if(start==0 ＆＆ count>=end){
        count = 0;
        start = 1;
      }else if(start==1 ＆＆ count>end){
        count = 0;
      }
    },fadeInterval);
}

上記のように書き換えることで 3つの項目を実行時に引数で指定できるようになりました。

fadeTimer の最初の行で li#news- となっていましたが
li が入っていると LI要素にしか適用できないので、汎用性を持たせるために li を消去しています。

newsFader($("li","div#newsTicker ul"),"fast",1000);

のように実行できます。
ここまでを前回の記事に含めればよかった…

サンプル（引数指定）

メソッドチェーン

jQueryではメソッドチェーンでメソッドを繋いでいくようにコードを書いて行きますが
ところでメソッドチェーンとは何でしょうか。

これは、それぞれのjQueryオブジェクトのメソッドの戻り値の多くがjQueryオブジェクトになっているからです。 つまり、使いたいメソッドを「.」でつないでいくだけで、まるでレゴを組み立てるようにプログラムが書きあがるというわけです。

これは、メソッドチェーンと呼ばれている仕組みです。

via: All About – jQueryの魔法

まずjQueryプラグインを作るにあたって
指定の要素にメソッドチェーンで繋ぐことができる状態をつくります。

$.fn.メソッド = function(){}

上記のように $.fn.メソッド とすることで任意の$()で渡した要素に対して
メソッドを実行できるようになります。

具体的には $() の要素をメソッド内で
this として扱うことができるようになります。

下のような拡張メソッドを作成して実際に実行してみましょう。

$.fn.sampleChain = function(){
  alert(this.length);
}

最初なので単純に渡した要素の長さをアラートで表示するだけのものです。
これを実行してみます。

jQueryのメソッドを実行するときは

$(function(){});

の中に記述すればいいだけなので

$(function(){
  $("p").sampleChain();
});

で実行できます。
サンプル（メソッドチェーンサンプル）

サンプルHTMLにはP要素は3つ含まれているので
アラートの中には 3 と表示されます。

プラグインにする

メソッドチェーンでは親になっている要素をthisとして渡すことができるので

これにもとづいて newsFaderメソッドを $.fn.newsTickerメソッドに書き換えると…

$.fn.newsTicker(fadeSpeed,fadeInterval){
  if(this.length==1) return false;

  this.each(function(i){
    $(this).attr("id","news-"+i);
    if(i!=0) $(this).hide();
  });

  var start = count = 0,
    end = this.length-1,
    fadeTimer = setInterval(function(){
      $("#news-"+(start==1 ? count==0 ? end : count-1 : count)).hide();
      $("#news-"+(start==1 ? (++count)-1 : ++count)).fadeIn(fadeSpeed);
      if(start==0 ＆＆ count>=end){
        count = 0;
        start = 1;
      }else if(start==1 ＆＆ count>end){
        count = 0;
      }
    },interval);
}

となります。引数で渡していたelmがthisとして渡せるようになっています。
これを実行する場合は

$("li","div#newsTicker ul").newsTicker("fast",1000);

サンプル（プラグイン化）

となります。jQueryらしくなってきました。

次は残りの変数をオプションとして扱えるようにしてみましょう。

上のメソッドでは fadeSpeed、fadeIntervalを指定しない限りエラーを返すので
指定しない場合は何かデフォルトの値が入っているようにしてみます。

$.fn.newsTicker(options){

  var c = $.extend({
    interval: 3500,
    fade: 1000
  },options);

他の箇所は省いていますが、上記のようにすることで
デフォルトの値を設定することができます。

これらの変数は c.interval、c.fadeのように変数cのプロパティとして参照できます。
また

$("li","div#newsTicker ul").newsTicker({
  interval: 1500,
  fade: "slow"
});

のように実行時にnewsTickerメソッドの引数にハッシュで値を渡すことで
任意の値で実行することができます。

fadeはjQueryのfadeInメソッドを使っているので
値にはミリセカンド、”slow”、”normal”、”fast”をとることができます。

以下が完成したnewsTickerメソッドです。

$.fn.newsTicker = function(options){

  var c = $.extend({
    interval: 3500,
    fade: 1000
  },options);

  if(this.length==1) return false;
  this.each(function(i){
    $(this).attr("id","newsFader-"+i);
    if(i!=0) $(this).hide();
  });

  var count = 0,
    end = this.length-1,
    fadeTimer = setInterval(function(){
      $("#news-"+(start==1 ? count==0 ? end : count-1 : count)).hide();
      $("#news-"+(start==1 ? (++count)-1 : ++count)).fadeIn(c.fade);
      if(count>end) count = 0;
    },c.interval);
}

さっそく実行してみましょう。

$("li","div#news ul").newsTicker();

サンプル（完成）

応用

ところで気付いている人もいるかもしれませんが
このnewsTickerメソッドはニュースティッカー以外にも使えます。

スライドショーに使ってみる

たとえば

<div id="image">
  <img src="slideImage01.jpg" alt="" />
  <img src="slideImage02.jpg" alt="" />
  <img src="slideImage03.jpg" alt="" />
  <img src="slideImage04.jpg" alt="" />
</div>

div#image {
  width: 500px;
  height: 333px;
  position: relative;
}
  div#image img {
    position: absolute;
    top: 0;
    left: 0;
  }

$("img","div#image").newsTicker();

のようにすれば 簡単にスライドショーを作ることができます。
実用性はアレですけど…

サンプル（スライドショー）

スライドショーに使ってみる2

このままだと 画像が切り替わるときに チラっと白くなるので
前の画像を非表示にするところに fadeOut を使うときれいに切り替わるようになります。

hideをfadeOutに書き換えて、fadeOutの速度もオプションに追加します。

$.fn.newsTicker = function(options){

  var c = $.extend({
    interval: 3500,
    out: 1000,
    set: 1000
  },options);

  if(this.length==1) return false;
  this.each(function(i){
    $(this).attr("id","newsFader-"+i);
    if(i!=0) $(this).hide();
  });

  var count = 0,
    end = this.length-1,
    fadeTimer = setInterval(function(){
      $("#news-"+(start==1 ? count==0 ? end : count-1 : count)).fadeOut(c.out);
      $("#news-"+(start==1 ? (++count)-1 : ++count)).fadeIn(c.set);
      if(count>end) count = 0;
    },c.interval);
}

これできれいに切り替わるようになりましたね。
サンプル（スライドショー完成）

ちなみに写真のワンコはうちのかわいい ゆに です。
誕生日にケーキをあげたら 口のまわりをクリームまみれになるくらい必死に食べてました。
かわいい…

まとめとサンプルファイルのzip

こんな感じでnewsTickerプラグインは他にも色々と応用できるかもしれないです。

それはさておき 「jQueryプラグインの作成方法は結構簡単」
ということを伝えたかったのですが、いかがだったでしょうか？？？

間違いなどあればコメント等で指摘していただけると助かります。

今回のサンプルファイルをまとめたものをあげておきますので必要な方は自由に使ってください。
作成したプラグインもライセンスなしで自由に使えます。

newsTicker.zip(33KB)

前回の記事

まずは前回最後のサンプルを見てください。

ここまでのサンプル（フェードを実行）

サンプルを見ればわかるように
ニュースティッカーの実装まではできましたが不具合があるようです。

• 最後のニュースが表示された後に何も表示されない

よくあるパターンは最後が表示されると最初に戻る というものです。
これを実装してみようと思います。

JSソースを書く 3

どうすればいいか考える

最後のニュースを表示したあとに 最初のニュースに戻るにはどうすればよいのか
とりあえず順を追って考えてみることにしましょう。
僕の全然プログラマではない思考でやってみます。

1. count>=end なら count = 0 にしたのち li#news-(end) を非表示にして
2. li#news-(count) を表示

count>=end になった後をどう判別するかが必要になりますので 新しく
var start = 0; を追記します。それもふまえて実装してみましょう。

var start = count = 0,
end = $("li","div#newsTicker ul").length-1,
interval = 1500,
fadeTimer = setInterval(function(){
  $("li#news-"+(start==1 ? end : count)).hide();
  $("li#news-"+(start==1 ? count++ : ++count)).fadeIn("slow");

  if(count>=end{
    count = 0;
    start = 1;
  }

},interval);

実行してみましたか？
ここまでのサンプル

最後のニュースから最初のニュースに戻るようにはなりましたが
そのあとがだめですね。

ちなみに

a ? b : c;

は a を判別してtrue を返せば b, falseなら c になります。

if(a){
  return b;
}else{
  return c;
}

と同じような意味になります。
たとえば上の例では

start==1 ? end : count

は start==1 なら end、それ以外なら（0なら）count

start==1 ? count++ : ++count

も同じように start==1 なら count++、それ以外なら ++count
がそれぞれ入ることになります。

結局どうしたらいいのか

順を追って解決していこうと思ってたんですけれど
次が結構ややこしくなってしまって…結論から言うと

$("li#news-"+(start==1 ? count==0 ? end : count-1 : count)).hide();
$("li#news-"+(start==1 ? (++count)-1 : ++count)).fadeIn("slow");
if(start==0 ＆＆ count>=end){
  count = 0;
  start = 1;
}else if(start==1 ＆＆ count>end){
  count = 0;
}

となります。
見た感じ非常にややこしくなってしまったので 順番に説明していきます。

1. 1週目と2週目以降は count の動きが変わるので それを判別する 変数startを用意する。
2. start == 0 なら1週目、start == 1 なら2週目以降
3. start==1 ? は2週目以降かどうか
4. count==0 ? は最後のニュースから最初のニュースにもどるときがどうか
5. 1週目は 非表示：li#news-count、表示：li#news-(++count)
6. 2週目以降は 非表示：li#news-(count==0 ? end : count-1)、表示：li#news-((++count)-1)
7. つまり、li#news-endが表示される → count = 0 → 非表示にするのは li#news-end
8. さらに li#news-endが非表示になる → li#news-(++count – 1)(ようはli#news-0) を表示
9. この -1 のずれを戻すために 非表示にする方にも count-1 を
10. 最初の週の終わりには count = 0; start = 1;にする。
11. 次週以降の終わりには count = 0; にする。

start==1 ? count==0 ? end : count-1 : count

は start==1 && count==0 なら end、start==1 && count!=0 なら count-1
start!=1 なら count ということです。

説明すればするほど難解になっているような気もしますが…;;;
もっとキレイに説明したいんですけれど…
そんなことよりももっとスマートな書き方がきっとあるはずです。。。

というわけで、完成したスクリプトは以下になります。

$(function(){
  function newsFader(){
    if($("li","div#newsTicker ul").length==1) return false;

    $("li","div#newsTicker ul").each(function(i){
      $(this).attr("id","news-"+i);
      if(i!=0) $(this).hide();
    });

    var start = count = 0,
    end = $("li","div#newsTicker ul").length-1,
    interval = 1500,
    fadeTimer = setInterval(function(){
      $("li#news-"+(start==1 ? count==0 ? end : count-1 : count)).hide();
      $("#news-"+(start==1 ? (++count)-1 : ++count)).fadeIn("slow");
      if(start==0 ＆＆ count>=end){
        count = 0;
        start = 1;
      }else if(start==1 ＆＆ count>end){
        count = 0;
      }
    },interval);
  }
  newsFader();
});

＆は半角に直してください。

では実行してみましょう。
サンプル（完成）

後半の流れが若干（結構）アヤシイ感じもしますけど
とりあえずはこれでニュースティッカーが完成しました。

次回は…

次回はこのファンクションを利用してjQueryのプラグインにしてみましょう。
たとえば interval、フェードの速度をオプションで設定できるようになります。

まずは今回つくるものをご覧ください。

ニュースティッカー1（完成）

jQueryプラグインでも見たことがあるような よくあるフェードで切り替えるやつです。
これを作ってみましょう。

前編では ニュースティッカーを実装するところまで
後編では 前編で作成したニュースティッカースクリプトをjQueryのプラグインにしていく予定です。
結構長いので数回に分けて投稿していきます。。。

JavaScriptとjQueryがちょっとわかる人なら理解できる…はずです。

用意するもの

• jQuery – 公式でもいいですし、僕がつくったサンプルに含まれてるやつでも大丈夫です。
• FirefoxとFirebug

だけです。
FirefoxとFirebugは開発に必須のツールなので 特に説明してません。

とりあえず…

jQueryを読み込んで…

<script type="text/javascript" src="js/lib/jquery.js"></script>

要素をマークアップしましょう。

<div id="newsTicker">
  <ul>
    <li><a href="#">ニュースティッカーサンプル1</a></li>
    <li>ニュースティッカーサンプル2</li>
    <li><a href="#">ニュースティッカーサンプル3</a></li>
    <li>ニュースティッカーサンプル4</li>
    <li><a href="#">ニュースティッカーサンプル5</a></li>
  </ul>
</div>

こんな感じでリストなっているニュース一覧を切り替えることにします。

CSSでデザインを決める

枠になる画像を用意して
その中に1行で表示されるようにします。

画像を用意するのが面倒な場合は↓の画像をどうぞ。
borderでもなんでもいいです。

ちなみに今回のニュースティッカーの前提として
ニュースの文章は 枠内に1行で表示できる文字数であることとします。

div#newsTicker {
  width: 579px;
  height: 35px;
  background: url(../img/bg_ticker.gif) no-repeat;
  overflow: hidden;
}
    div#newsTicker ul {
      padding: 0 1em;
    }
      div#newsTicker ul li {
        line-height: 35px;
      }

ここまでニュースが切り替わらない1行ニュースができたと思います。

ここまでのサンプル（切り替わらない1行ニュース）

JSソースを書く 1

ようやく準備ができたので 次はスクリプトを書いて実際に動かしていきます。

まずは newsTicker というfunctionをつくります。

function newsTicker(){
}

以降とくに指定がない限りこのfunction内に記述していきます。
まずは ニュースがひとつしかない場合は動かせるものがないので

if($("li","div#newsTicker ul").length<=1) return false;

というように LI要素がひとつ（またはそれ以下）の場合は
何もしないで終了するようにしておきます。
（これでCMSの自動吐き出しにも対応できるようになりました。）

次は識別しやすいように すべてのLI要素のIDを当てていきます。

今回は news-*（*は連番）というようにします。

ひとつひとつやっていくのは面倒なので
each関数を使って楽をしたいと思います。

jQueryのeach関数はforと同じように使うことができます。
たとえば

for(var i=0;i<x.length;i++){
  alert(i);
}

は

$(x).each(function(i){
  alert(i)
});

のように書くことができます。
ではeach関数を利用して
「すべてのLI要素のID：news-*（*は連番）を割り当てる」
コードを記述してみましょう。

$("li","div#newsTicker ul").each(function(i){
  $(this).attr("id","news-"+i);
});

ついでに 最初のLI要素以外をdisplay: noneにしておきます。

$("li","div#newsTicker ul").each(function(i){
  $(this).attr("id","news-"+i);
  if(i!=0) $(this).hide();
});

試しにここまでのスクリプトを実行してみましょう。

ページ読み込み時にスクリプトを実行する場合

window.onload = function(){}

とかaddEventListenerに登録したりしますが
jQueryでは

$(function(){
});

の中で実行するだけです。
厳密に言うとwindow.onloadのタイミングではなく
DOM構築後のタイミングで実行されることになります。

$(function(){
  function newsFader(){
    if($("li","div#newsTicker ul").length<=1) return false;
    $("li","div#newsTicker ul").each(function(i){
      $(this).attr("id","news-"+i);
      if(i!=0) $(this).hide();
    });
  }
  newsFader();
});

ここまでのサンプル（IDを割り当てて最初のLI要素以外を非表示）
- ひとつ前のサンプルと同じに見えますがFirebugで要素を確認すると状態が分かります。

JSソースを書く 2

LI要素にIDを割り当てて、最初のLI要素以外はdisplay: noneにしたので
フェードで入れ替える部分を作ります。

まずは最初のIDと終わりのIDを決めておきます。

現在表示しているニュースの番号は count という変数に入れることにします。
始まりは news-0 で終わりは news-4 ですが
終わりの数字を決めてしまうと 要素が増えたときにいちいち面倒くさいので
LI要素の数（ニュースの数）を取得して、それから-1したものを終わりの数字にします。
（JSでは数は0始まりなので終わりの数字は配列の長さ-1になります）

var count = 0,
end = $("li","div#newsTicker ul").length-1;

ニュースが入れ替わるまでの時間を決めます。

var interval = 1500;

特に指定はないですが、ある程度効果が分かるように1500ミリセカンドにします。

1500ミリセカンド毎にニュースを入れ替える。

ニュースの入れ替えは簡単に書くと
現在表示されてるニュースを非表示にして 次のニュースをフェードイン
でできそうな気がしませんか？

現在表示されているニュースは 例えば一番最初に表示されているのは
li#news-0 になるので 次のニュースは li#news-1 ですね。

ということは手順としては

1. li#news-(count) を非表示にする
2. countに1を加える
3. li#news-(count) をフェードインさせる

これをスクリプトにするとこうなります。

$("li#news-"+count).hide();
$("li#news-"+(++count)).fadeIn("slow");

とても簡単ですね。これをさっき決めたinterval毎に切り替えるには

setIntervalという関数を使います。
setIntervalは

setInterval(function(){},interval);

のように記述して、intervalの間隔毎にfunctionを実行します。
functionはあらかじめ定義した変数でも可。

今回は特に タイマーを解除する必要がないので変数にしなくてもいいのですが
いつものくせで変数に入れています。

var fadeTimer = setInterval(function(){
  $("li#news-"+count).hide();
  $("li#news-"+(++count)).fadeIn("slow");
},interval)

上記の記述で interval の間隔で setInterval の内容を実行するようになりました。
ここまでのスクリプトは以下になります。

$(function(){
  function newsFader(){
    if($("li","div#newsTicker ul").length<=1) return false;

    $("li","div#newsTicker ul").each(function(i){
      $(this).attr("id","news-"+i);
      if(i!=0) $(this).hide();
    });

    var count = 0,
    end = $("li","div#newsTicker ul").length-1,
    interval = 1500,
    fadeTimer = setInterval(function(){
      $("li#news-"+count).hide();
      $("li#news-"+(++count)).fadeIn("slow");
    },interval)

  }
  newsFader();
});

ではここまでのスクリプトを実行してみましょう。
ここまでのサンプル（フェードを実行）

サンプルを見てもらうと分かりますが 入れ替えは実装されましたが
このままでは最後のニュースを表示した後に何も表示しなくなってしまいます。

次回は以上の不具合を修正していくことにします。
続く。。→http://5509.me/2009/03/10/newsticker1-2.html

それに伴ってFeedBurnerのURIが変わりました。

ブログのFeedに設定しているのはWordPressが生成するXMLで
http://5509.me/feed にアクセスした際に
リダイレクトするようにしててなんかややこしい感じなんですが…

FeedBurnerのURIを購読に設定している方も
feedburner.jpが存在する限りリダイレクトされるようなので問題ないはずです。

ブログFeed URI

http://5509.me/feed

前のFeedBurnerのURI

http://feeds.feedburner.jp/mtmo

新しいFeedBurnerのURI
http://feeds2.feedburner.com/mtmo

上のどれにアクセスしても 新しいFeedBurnerのURIにリダイレクトされます。

説明すればするほどややこしくなっていきますが
ようは特に何もしなくても大丈夫ということです。
念のためのアナウンスでした:)

Ajax Username Checker – Ajax Username Checkerのサンプル
– jQuery、PHP、CSVを組み合わせて、入力したユーザネームが利用できるかどうかをチェックできるよ！

というのがあるんですがOKWave（と教えてgoo）からリファラーがきてて
みたら jQuery.validation.jsとAjax Username Checkerを一緒に使えないか みたいな感じでした。

で 面白いのでjQuery.validation.jsで使えるようにソースを修正してみました。

実際に動作してるサンプル

同時に使う（チップにユーザチェックの結果を表示する）には

まずはcheck.phpを少し変えます

<?
$username = $_POST['username']; // get the username
$username = trim(htmlentities($username)); // strip some crap out of it
$file = '/home/js4hire/public_html/gafyd/data.csv'; // Here's the file. Notice the full path.

echo check_username($file,$username); // call the check_username function and echo the results.

function check_username($file_in,$username){
$username=strtolower($username);
$file = file($file_in);
foreach ($file as $line_num => $line) {
$line = explode(',',$line);
$user = trim(str_replace('"','',$line[0]));
if($username == strtolower($user)){
return '<span style="color:#f00">Username Unavailable</span>'; // ここを変える
}
}
return '<span style="color:#0c0">Username Available</span>'; // ここを変える
}
?>

上記ソースのここを変える部分をそれぞれ true と false に。
PHPには判定だけしてもらって表示するテキストはJS側で操作することにします。

変更後のソースが↓です。
CSVはサイトパスが必要なんですがサイトパス部分は表記してないです。
使うサーバとCSVの場所に合わせて変えてください。

<?
$username = $_POST['username']; // get the username
$username = trim(htmlentities($username)); // strip some crap out of it
$file = '(sitepath)/data.csv'; // Here's the file. Notice the full path.

echo check_username($file,$username); // call the check_username function and echo the results.

function check_username($file_in,$username){
$username=strtolower($username);
$file = file($file_in);
foreach ($file as $line_num => $line) {
$line = explode(',',$line);
$user = trim(str_replace('"','',$line[0]));
if($username == strtolower($user)){
return 'false';
}
}
return 'true';
}
?>

PHPの修正が終わったら次はJSソースの修正です。

まずは普通にアクティベート

$(function(){
$(".validate").validation({
msgs: {
email: "正しいEメールアドレスを入力してください<br />例：info@5509.me",
submit: "入力が完了していない<strong>必須項目</strong>があります。<br /><strong>必須項目は全て入力</strong>してください。"
},
dialog: {
dialogOpacity: .8
}
});
//ここに①を追記
});
//ここに②を追記

上記ソースの //ここに①（②）を追記 部分に必要なところを足していくことにします

まずは画像のプリロード

ローディング画像は先日人気になってたPreloaders.netなどからダウンロードして
以下のソースでプリロードしておきます。これをしないと初回の読み込み時によくないことが起こります。

// ローディング画像のプリロード
var loading = new Image();
loading.src = "img/indicator.gif"; // パスは適宜変えてください

ユーザチェックのためにイベントを関連付ける

これより以下で出てくる $.tip はjQuery.validationで定義してるものです。
一応解説しておきます。

$.tip.msg(id,msg)

チップにメッセージを表示させる。
対象チップに対応するinput要素のIDをidに、対象チップに表示させるHTMLタグが使える文字列をmsgにそれぞれ引数として指定します。

$.tip.fadeIn(id)

非表示のチップを表示（フェードイン）させる。
idには対象チップに対応するinput要素のIDを引数として指定します。

$('#name').blur(function(){
if($(this).val().length<1) return false;
$.post("check.php",{
username: $('#name').val() // 参照する値がcsvデータとの比較
},function(response){ // response : csvにデータ�