発端

ことの発端は仕事で使っているMacBook Airが液晶割れしてしまったことで
液晶割れっていくらになるんだろうとか思いながら、アップルストア渋谷店に持っていったところ

40000円弱ですね、とのこと。
お金かかるだろうなっていうのは分かってたしそれはまー仕方ないからおいとくとして、スリープから復帰しないっていう別の致命的な不具合もあったのでそれ見てもらった。

で、こっちは無償で修理しますんでっていうことでお願いして、1週間後くらいに連絡もらって取りに行きました。

最初のミス

その場で簡単に検証して
ロジックボード変えたので大丈夫だと思いますみたいなこと聞いて
まーまた不具合あったら持ってきますわーって言って持って帰ったんですけど
なんかこのMacBook Air処理が遅い気がする・・・

で、この時は検証するのもめんどかったから放置してたら
数日後アップルストア渋谷店から電話がかかってきて

ロジックボードを間違えて入れてしまったので交換させてください、と。
言ってる意味がよくわからないんで、詳しくお願いしますと聞くと
BTOでCore i7にしてたんだけど、間違ってCore i5にしてしまったらしい。。（えっっっ

もう一度交換するから店に持ってきて、みたいなわけのわからないことを言い出したので、そっちのミスだし面倒くさいから丸ごと交換してよと交渉したところそれでOKが出た。
（出向いたり、バックアップしたり復帰したりいったいどんだけ時間かかると思ってんの・・・

二度目のミス

BTOなので発注して届いたら連絡しますと言われ、また待つこと1週間。
届いたのでご都合いいときに取りにきてくださいと言われたので、即日取りに行って、帰ってMacをひらいたら今度はBTOでUSにしてたキーボードがJISになってるんですけど（ｗｗｗｗｗｗｗｗｗ

ひどい対応

いよいよイライラしたので翌朝ふざけんなっていうのをサポートに電話したら、案の定たらいまわされて、結局渋谷店に電話することに・・・（ここまで電話始めてから1時間

アップルストアは電話が繋がらないことで有名で
やっぱり店舗につながるまで待つこと30分、ようやくつながったので
無駄に増したイライラをぶつけようと、さっきサポートに伝えた内容をそのまま伝えたら

アップルストア渋谷「最短で配達お届けが明日の朝になってしまいます」

自分「持ってこれないならそれなりの補償をお願いします。そもそも、アップルストアのミスのせいで、普通にMacBook Airが使えなくなったり、何回も出向いてるし、電話もしてるし待たされてるし、それはどうしてくれるんですか？」

アップルストア渋谷「具体的にどうしてほしいんですか？」（本当に言われた

自分「じゃあもう返金してください。返金というか、そっちのミスですし、できる限りの対応はそっちで考えるのが筋やと思うんですけど、その言い方どうなんですか？あ、返金って言っても端末はもちろん明日の朝までに絶対届けてくださいね。」

アップルストア渋谷「上司に確認してから折り返します。」

その後、上司っぽい人から電話がかかってきて

アップルストア渋谷「今日中にお届けします。」（返金には触れずに電話を切ろうとする

自分「え、後半伝えたことはどうなってるんですか？お金はアレですけど、せめて家にきて謝るとかあるんじゃないです？めっちゃ迷惑かけてますよね」

アップルストア渋谷「店舗から出ることはできません。申し訳ございません（ここ声が小さい」

自分「じゃあ何ができんの」

アップルストア渋谷「申し訳ございませんということしかできません（全体的に声が小さい」

ここのやり取り5回くらいループ

その後2時間かからずに新品のMacBook Airが届いたんですけど、できるんやったら最初からそうしろよって思うのは僕だけですかね。会話はスピーカーでしてて、横で聞いてた妻もありえへんなーがっかりやわ、って言ってた。

最終的には割れてた液晶は直ってそれはよかったんですけど、ミスといい、対応といい、ほんまにがっかりすぎてアップルストア渋谷店には今後行きたくないです。

ところでコメントにあったんだけど、BTO云々は一番最初の修理のときに伝えてます。

アップルストアのミスで使った時間

店舗への移動（4時間）
電話（2時間）
バックアップ・復帰（6時間）
不安と怒り（∞）

チェックボックスをiOS5スタイルのスイッチに置き換えるjQuery非依存のJavaScriptライブラリです。タップ（クリック）に加えてスイッチ上でのスワイプ（ドラッグ）でチェックのオンオフが切り替えられます。

CSSで見た目を書いているので古いIEではデフォルトスタイルはほぼ表示できません。古いIEでも使いたいときは自分で書いてください。モバイルサイト限定で利用が推奨です。Androidはborder-radiusが残念なことになるという仕様なので、border-radiusは残念なことになっていますが、そこは目をつむっていただき・・・あと、端末によってはtouchmoveがうまいこと発火しないので、スワイプも微妙な感じかもしれません。

ドキュメント・サンプルは以下のリンク先を参考にしてください。

• ui.checkSwitch (iOS4以上推奨

えっと、誰かiOS4スタイルとか新しい感じのデザインお願いします。。。

要望とかバグ報告などはgithubのIssuesへお願いします。

ベースはチェックボックス・ラジオボタンをまとめて操作するようなUIのためのコントローラーで、それのついでにビューになるHTMLとinput要素を（見た目上）置きかえる機能がついてます。それだけです。

ドキュメント・サンプルは以下のリンク先を参考にしてください。（引き続き変な英語ですけども。

• jq.ui.checks

要望とかバグ報告などはgithubのIssuesへお願いします。

というわけで、Vimeoで適当なビデオページを開いて下のブックマークレットを実行するだけです。

• Open vimeo download window

開いたら、名前を付けて保存で、適当な名前に「.mp4」を付けて保存するだけです。

※IE8以下では使えないです

$use:
  -webkit-, true,
  -moz-, true,
  -o-, true,
  -ms-, true;

// 本当はこうしたいけど
$use: {
  '-webkit-': true,
  '-moz-': true,
  '-o-': true,
  '-ms-': true
}

全部trueのときは例えばborder-radiusだと

.hoge {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radisu: 5px;
  border-radius: 5px;
}

みたいな。falseにしたらそれに対応するprefixが出力されなくなる、みたいな。全部のmixinに書けばそれで終わりだけど、そんなの面倒くさいし、vendor prefixを付けたプロパティを出力するmixinみたいなのを書いた。

$use:
  -webkit-, true,
  -moz-, true,
  -o-, true,
  -ms-, true;

@mixin addPrefix($property, $value) {
  $property: unquote($property);
  $value: unquote($value);
  @for $i from 1 through length($use)/2 {
    $n: $i * 2;
    $propIndex: $n - 1;
    @if nth($use, $n) {
      #{nth($use, $propIndex) + $property}: $value;
    }
  }
  #{$property}: $value;
}

これはmixinの中で呼ぶmixinで、（そのまま呼んでもいいけど

@mixin border-radius($value) {
  @include addPrefix('border-radius', $value);
}

こういう風にborder-radiusのmixinを書くと

.hoge {
  @include border-radius('5px');
}

これが

.hoge {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radisu: 5px;
  border-radius: 5px;
}

こうなる。

で、これだけでもよかったけど、プロパティによっては不要なやつ吐き出したくない場合もあるし、ついでにもうひとつ引数用意して、このmixinの中ではデフォルトでverdor prefixをfalseにできるよみたいな!important的なprefix設定を書けるように変える。

@mixin border-radius($value) {
  // この部分
  $def:
    -webkit-, false;
  @mixin('border-radius', $value, $def);
}

こうすると、-webkit-が消える（あくまでも例

.hoge {
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px;
}

最後に$defを渡して、それがあればそっちで上書きするように変える

$use:
  -webkit-, true,
  -moz-, true,
  -o-, true,
  -ms-, true;

@mixin addPrefix($property, $value, $def: false) {
  $property: unquote($property);
  $value: unquote($value);
  @for $i from 1 through length($use)/2 {
    $n: $i * 2;
    $flg: nth($use, $n);
    $prfx: nth($use, $n - 1);
    @if $def {
      $_index: index($def, $prfx);
      @if $_index {
        $flg: nth($def, $_index + 1);
      }
    }
    @if $flg {
      #{$prfx + $property}: $value;
    }
  }
  #{$property}: $value;
}

こうしとけば

@mixin box-shadow($value) {
  $def:
    -webkit-, false,
    -ms-, true;
  @include addPrefix('box-shadow', $value, $def);
}

@mixin background-size($value) {
  @include addPrefix('background-size', $value);
}

こんなmixinがあったときに（例えです

.hoge {
  @include box-shadow('0 0 0 #000');
  @include background-size('12px 12px');
}

は

.hoge {
  -moz-box-shadow: 0 0 0 #000;
  -o-box-shadow: 0 0 0 #000;
  -ms-box-shadow: 0 0 0 #000;
  box-shadow: 0 0 0 #000;
  -webkit-background-size: 12px 12px;
  -moz-background-size: 12px 12px;
  -o-background-size: 12px 12px;
  background-size: 12px 12px;
}

こうなる。サンプルを適当に書きすぎた。。。。

ドキュメント・サンプルは以下のリンク先を参考にしてください。（変な英語ですけど、なんとなく言いたいことは分かると思います。

• jq.carousel

日本語のドキュメントはWebDesigning 4月号のjQuery Labで書きましたので、どうしても日本語ドキュメントじゃないとだめなんだ！っていう方は見てみてください。

• Web Designing (ウェブデザイニング) 2012年 04月号 [雑誌]

特徴は、色んなことできるようにベースになれるようなAPIのみ提供、タイマーでスライドショーみたいにしたい、とかは自分でsetIntervalとか使って実装してください。サンプルの最後にもタイマー使ったものは入っています。

要望とかバグ報告などはgithubのIssuesへお願いします。

元ネタ

• HTML5のCanvasとJavaScriptで電光掲示板のアニメーションを表現する

これおもしろいなーと思って、でもすごい重くて・・・ｗよくよく考えたらみんな大好きmarqueeタグとCSS3のlinear-gradient使えばできるよねとか思ってやったらめっちゃ簡単だった。iPhoneとかでも見れるよ。IEはしらん

↓ サンプル

• Electronic Billboard in CSS3 and marquee

HTML

HTMLは超絶シンプル

<marquee>【横須賀線 遅延】</marquee>

CSS

CSSはほぼlinear-gradient。背景にlinear-gradientで格子状になるよう縦横敷き詰めた擬似要素をmarqueeの上にwidth, height広げて被せる形で

marquee {
  position: relative;
  color: #ffab00;
  background-color: #0a0600;
  font-size: 40px;
}
marquee:after {
  content: ' ';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(#0a0600 1px, transparent 0px),
    linear-gradient(0, #0a0600 1px, transparent 1px);
  background-image: -webkit-linear-gradient(#0a0600 1px, transparent 0px),
    -webkit-linear-gradient(0, #0a0600 1px, transparent 1px);
  background-image: -moz-linear-gradient(#0a0600 1px, transparent 0px),
    -moz-linear-gradient(0, #0a0600 1px, transparent 1px);
  background-image: -o-linear-gradient(#0a0600 1px, transparent 0px),
    -o-linear-gradient(0, #0a0600 1px, transparent 1px);
  background-image: -ms-linear-gradient(#0a0600 1px, transparent 0px),
    -ms-linear-gradient(0, #0a0600 1px, transparent 1px);
  background-size: 2px 2px, 2px 2px;
  z-index: 10;
}

IEでも見たかったら:afterやめてdivかなんかにして、linear-gradientも背景画像repeatでできるよね。:afterはやめなくてもいいけど

ところでCSS3 marqueeがなんとなくあるけど、OperaとWebkitだけだし、書き方面倒くさそうだからやめた

jsdo.itにforkしたやつ置いたのでよければ Fork me on jsdo.it

forked: HTML5のCanvasとJSで電光掲示板 – jsdo.it – share JavaScript, HTML5 and CSS

追記：なんかやっぱり一部環境で重くなるときがあるらしい

SassとかLESSって使ってますか？書くのがとても億劫なCSS（個人の感想です）を快適に書くことが出来るようになる上に、始めた頃の楽しさが戻ります（個人の感想です）。詳しいことは以下のエントリかたがたを見てもらうとして。Sassの記事が多いのは僕がSass使ってるからです。Sass推しです。

• CSSとフレームワークとメタ言語
• Sass、そしてSassy CSS (SCSS)
• Sass を今すぐ実務で使おうよ！
• Sassを覚えよう
• LESS初心者向けのナニカ

というか

• LESS & Sass Advent Calendar 2011（エントリ一覧）

をみてください。

浸透しにくい理由は色々ある気がしますが・・・

コンパイルがめんどい

そのとおりです。慣れですけどね。とっつきにくい感をこいつが出してるのはその通りでしょう。

黒い画面がちょっと・・・

ではSassをインストールしましょう！OS Xの方はターミナルを開いて

$ gem install sass

を入力するとしばらくしてSassがインストールできるので、

$ mkdir ~/Sites/my-first-sass
$ mkdir ~/Sites/my-first-sass/styles
$ mkdir ~/Sites/my-first-sass/styles/scss
$ cd ~/Sites/my-first-sass/styles
$ touch scss/style.scss
$ sass --watch scss/style.scss:style.css

で、まずはコンパイルしてみまｓ・・・

なるほどですね。特にSassは黒い画面じゃないとだめみたいな先入観があるのではないでしょうか？

OS X Lionのみなさんは素晴らしいソリューションがあります

それがCodeKitです。

• CodeKit — THE Mac App For Web Developers

Winのことはよくわからないので、同じような事を誰かが書いてくれるでしょう。フロントエンドの制作でOS Xじゃない方が弊害が多い気がしますけど、個人の感想ですね。

CodeKitのハイライト

をキャプチャで紹介してみます。

CodeKitを起動したところ

左ペインにプロジェクトディレクトリごとドラッグすると、プロジェクト全体を監視できます。

ディレクトリをドラッグしてプロジェクトを監視する

ドラッグしたディレクトリは下記みたいになってます。

my-first-sass
└ styles
　└ scss
　　└ style.scss

my-first-sassディレクトリをドラッグすると

PROJECTS のところに追加されます。

色々ある場合は、All Filesで一覧が表示できて、CSS関連ファイルだけ見たいときは Styles タブで確認できます。

なんか書いてみる

scss/styles.scss を開いて何か書いてみましょう。せっかくなので + とか使って保存すると、Growl（が有効なら）でコンパイルしました通知が表示されます。

styles ディレクトリに css ディレクトリが追加されて、その中に style.css が入ってます。

style.css を開くとコンパイルされてます。

コンパイルファイルの吐き出し先

Preferenceで変更できます。

圧縮とか

の設定もPreferenceでできます。圧縮するぜーとかしないでいいわーとか。

CoffeeScriptもできるよ

同じような感じで、プロジェクトに入れてると監視してくれます。

エラーがあるときは、ログにエラーが表示されるので分かりやすいですね

デフォルトは min ディレクトリに圧縮したファイルを吐き出します。

画像の最適化

一番最後になったけど、もしかしてこれが一番便利かもな、画像最適化もできます。プロジェクトにある画像ファイルを選択すると、「Optimize」のボタンがあるので、これクリックすると

いい感じに最適化してくれますよ。僕のアイコンはファイルサイズが50%減りました。

It’s like steroids for web developers.

CodeKitのキャッチコピー（12年2月現在）に書いてあるのですが、その通りですね。OS X Lionの人は入れておいて間違いないでしょう。CodeKitは今βリリースで無料で利用できますが、$10$20でApp Storeに並ぶ予定だそうです。にしてもこのGUIと機能で$10$20は安すぎるいくらいではないでしょうか。

あ、何が言いたかったかというと、CodeKitみたいなの使えばSassやLESSも簡単に使えますし、まだ触ったことない人はその便利さに触れてみるといいと思いますということでした。

このエントリで紹介してない機能（ファイルまとめるとか）もあるのでぜひ。
Snow Leopardの人は引き続きTerminal.appでお楽しみください。（ひどい

• CodeKit — THE Mac App For Web Developers

全然気がつかなかった・・・いつからだろう・・・ ＞ 17からだそうです
Chromeにビルトインされてるのですぐ使えます。

ちなみに、キャプチャはChromeのdev版なのでstable版は少し違うかもしれません。stable(Macの17.0.963.46)でもOverride User Agentの項目あるのは確認してます。

通常はもちろんユーザーエージェントはChromeですが、Cmd+Option+I などでインスペクタを開くと

右下にギアアイコンがあって、そこからインスペクタのSettingが開けます
すると Override User Agent という項目があるので

チェックすると、よく使いそうな User Agent 一覧がプルダウンで開きます
試しに iPhone – iOS5 を選択してみましょう

リロードするとUAが変わっているのが分かります（分かるページでやると

※書き忘れてましたが、インスペクタが開いている状態でのみ有効です

• jq.typewrite のサンプル

ホスト / ダウンロード

• 5509/jq.typewrite – GitHub
• ダウンロード

使い方

そのままつかう

最初に $.typewrite(jQueryオブジェクト) で初期化しておきます。あとは任意のタイミングで .play() メソッドでエフェクトを実行できます。
.play(4) のように実行時に duration を決めることもできます。

.play() メソッドは jQuery Deferred オブジェクトを返すので、完了時に何かしたいときは .done() でつなげばOKです。

JavaScript

var typewrite1 = $.typewrite($('#typewrite1'));
$('#do_typewrite1').click(function() {
  typewrite1.play();
});

HTML

<p id="typewrite1">This is typewrite</p>
<p>
  <input type="button" id="do_typewrite1" value="Do typewrite 1">
</p>

オプションとDeferredも使う

JavaScript

var typewrite2 = $.typewrite($('#typewrite2'), {
  duration: 2,
  hide: false,
  end: '|'
});
$('#do_typewrite2').click(function() {
  typewrite2.play().done(function() {
    alert('completed');
  });
});

HTML

<p id="typewrite2">This is typewrite<br>
This is typewrite</p>
<p>
  <input type="button" id="do_typewrite2" value="Do typewrite 2">
</p>

jQuery プラグインとして使う

jQuery プラグインとして使う場合は、play() メソッドが typewritePlay() メソッドに変わります。

var typewrite4 = $('#typewrite4').typewrite({
    end: '|'
});
$('#do_typewrite4').click(function() {
    typewrite4.typewritePlay(2);
});

オプション

wait

デフォルトは日本語の4文字だけ指定してるので変えてください

指定するときはこんな感じで

$.typewrite(hoge, {
  wait: {
    ',': 0.3,
    '.': 0.3
  }
});

使うときの注意点

対象の要素は、<br>以外のHTML要素を含むことができないので、その辺よろしくおねがいします。

PathみたいなナビゲーションをWebページに実装するライブラリです。同じようなのは他にもあると思いますけど、これの特徴は対象に当たっている他のライブラリと干渉しにくいということでしょうか。iScrollみたいなイベントキャンセルが強力なやつはだめだと思います。

サンプルがまさにそれなんですけど、同僚の@hokacchaが作った flipsnap.jsとは共存できます。レイヤー毎にスワイプ判定をしてるので、上位レイヤーで一度キャンセルすると Swpnav が実行されてる下位レイヤーにはイベントが飛ばなくなるような感じで、この Swpnav とか flipsnap のような作り方をしているライブラリとは共存できると思います。

• サンプル（Webkitのみ

ホスト

githubにあります

• 5509/Swpnav – GitHub

使い方

ソースコードをダウンロードして、任意の場所に swpnav.js を置き、読み込みます。

<script src="swpnav.js"></script>

jQueryプラグインではないのでjQueryは不要です。読み込んだら任意の場所かソースコードで実行してください。

Swpnav('#content', '#nav');

実行する際の一つ目の引数に、対象コンテンツID、二つ目の引数に隠すナビゲーションコンテンツのIDを指定します。基本はこれで、次にオプションとAPIを解説しておきます。

オプション

オプションを指定する際は三つ目の引数で渡します。

Swpnav('#content', '#nav', {
    slide: 260,
    duration: '0.2s',
    timingFunction: 'cubic-bezier(0,0,0.25,1)',
    trigger: 30
});

API

APIを使う場合は、インスタンスを変数に

var open = document.getElementById('open'),
    swp = Swpnav('#content', '#nav');

open.addEventListener('click', function(ev) {
    ev.preventDefault();

    if ( swp.getState() ) {
        swp.close();
    } else {
        swp.open();
    }
}, false);

jQueryプラグインとして使う

jQueryプラグインとして使う場合は

$('#hoge').swpnav('#nav')

• jQueryプラグインとして実行したサンプル

のようにします。指定できる要素はひとつなので、2つ以上ヒットするようなセレクタで渡さないでください。jQueryオブジェクトが返りますが、jQueryオブジェクトはSwpnavのAPI（メソッド）を呼ぶことができるようになっています。

APIはjQueryのAPIと干渉しないように ‘swpnav’ の prefix がついています。 prefix 付きのAPI一覧は下記の通りです。

var swp = $('#hoge').swpnav('#nav');

// some codes...

swp.swpnavOpen();
swp.swpnavSetSlide(100);

対象端末

• iPhone3G~4S の iOS3.2~5

Androidでもなんとなく動くと思いますが、検証全然できてないので、動かない場合はgithubのリポジトリからフォークしてプルリクエストもらえるとうれしいです。報告だけでも動く動かないをここに掲載できるのでうれしいです。

関連ライブラリ

• pxgrid/js-flipsnap – GitHub

みなさんご存知の通りLESSはJSで書かれているので、Node.jsを使ったアプリでは動的にLESSファイルをコンパイルできます。

ところがLESSのサイトに書いてある方法は

var parser = new(less.Parser);

parser.parse('.class { width: 1 + 1 }', function (err, tree) {
    if (err) { return console.error(err) }
    console.log(tree.toCSS());
});

・・・やさしくない！

まあでも早い話、parse(hoge, func)のhogeにLESSファイルの文字列渡せばtreeに結果が入ってくるってことですね。

これはLESSの記事というかNode.jsの記事じゃないのとかそういう細かいことはいいじゃないですか・・・

LESSファイルをコンパイルできるようになるまで

LESSファイルの場所

Expressコマンドで作ったテンプレートを使うことにします。Expressコマンドを実行すると（テンプレエンジンはjqtplにしてます）

$ express -t jqtpl less
// less
├ app.js
├ package.json
├ public
│ ├ images
│ ├ javascripts
│ └ stylesheets
├ routes
│ └ index.js
└ views

みたいにもろもろ出来ます。肝心のLESSファイルは views ディレクトリに less ディレクトリを作ってそこに入れることにしましょう。

// less
├ app.js
├ package.json
├ public
│ ├ images
│ ├ javascripts
│ └ stylesheets
├ routes
│ └ index.js
└ views
  ├ tmpl // ここにjqtplテンプレファイル入れる
  └ less // ここにLESSファイル入れる

less ディレクトリに次の内容の styles.less を作って入れておきます。

.class {
    width: 1 + 1px;
}

a {
  text-decoration: underline;

  &:hover {
    text-decoration: none;
  }
}

ちなみに、今

http://localhost:3000(ここは環境によります)/less/styles.less

にアクセスしてみると、当然のように表示できません。

LESSのインストール

とりあえず最初から順を追っていきます。まずはnpmを使ってLESSをインストールしておきます。

$ npm install less@latest

LESSをrequireする

この記事ではJSコードは app.js に書いています。インストールしたらLESSが使えるようになるので、LESSをrequireします。ついでに、今回はpathとfsも使っているので一緒にrequireしておきます。

最後に今回使った app.js をそのまま貼ってるので詳しくはそっち見てください。

var less = require('less'),
    path = require('path'),
    fs = require('fs');

LESSファイルにアクセスしたときのなんやらを設定

まずはファイルにアクセスする前の準備です。

app.get(/^\/less\/.+/, function(req, res) {
// less/hoge にアクセスした場合
  var fileRoot = __dirname + '/views/less/', // less ファイルのディレクトリ
      extname = path.extname(req.url), // .less の部分が返る
      basename = path.basename(req.url), // styles.less の部分が返る
      filePath = undefined;

  if ( extname !== '.less' ) {
  // lessファイルじゃなかったら・・・
    console.log('that is not less file');
  }

  filePath = fileRoot + basename; // パスを取得しておく
  // ここに続き書く
});

ファイルパスまで準備できたので、次はファイルを読み込みます。ファイルを読み込めたら、一旦LESSをパースしてCSSへ変換、その後変換したCSSをファイルとして返すようにします。

app.get(......
  ........

  fs.readFile(filePath, 'utf8', function(err, str) {
  // str で読み込んだ LESSファイルのバッファを受け取る
    var parser = undefined;

    if ( err ) {
    // 読み込み先でエラーがあったら・・・
      console.log('file doesn\'t exist: ' + basename);
    }

    parser = new(less.Parser);
    // LESSのパーサー

    parser.parse(str, function(err, tree) {
    // LESSファイル の文字列部分を渡す
    // tree にパースした LESSのオブジェクトを受け取る
      var css = undefined;

      if ( err ) {
        // パースでエラーがあれば・・・
        console.log('parse error: ' + err.message);
      }

      // toCSS()メソッドを実行するとCSSが返る
      css = tree.toCSS();

      res.writeHead(200, {
        'Content-Type': 'text/css'
      });
      res.end(css, 'utf-8');
      // CSSをファイルとして返す
    });
  });
});

実行して、アクセスしてみる

http://localhost:3000/less/styles.less にアクセスしてみましょう。

.class {
  width: 2px;
}
a {
  text-decoration: underline;
}
a:hover {
  text-decoration: none;
}

完璧っぽい！

CSSを圧縮しておきたい場合

ちなみに、toCSS()メソッドのオプションで compress 指定をすると圧縮したCSSファイルを返せます。

css = tree.toCSS({ compress: true });

圧縮されたCSSが返ります。ナイス。

.class{width:2px;}
a{text-decoration:underline;}a:hover{text-decoration:none;}

おわり

自分でやってるときはかなり時間かかってしまったんですけど、、、記事にするとかなり短くて凹みました・・・あ、@import とかするとおうふな感じになるので、それはまたどこかで書きます。。

付録：今回使った app.js と HTML(jqtpl)/LESSファイル

app.js は Expressコマンドで出来るやつをベースに使ってます。

app.js

/**
 * Module dependencies.
 */

var express = require('express')
  , jqtpl = require('jqtpl')
  , less = require('less')
  , path = require('path')
  , fs = require('fs')
  , routes = require('./routes')

var app = module.exports = express.createServer();

// Configuration

app.configure(function(){
  app.set('views', __dirname + '/views/tmpl');
  app.set('view engine', 'html');
  app.set('view options', {
    layout: false
  });
  app.register('.html', jqtpl.express);
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);
  app.use(express.static(__dirname + '/public'));
});

app.configure('development', function(){
  app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
});

app.configure('production', function(){
  app.use(express.errorHandler());
});

// Routes

app.get('/', routes.index);

app.get(/^\/less\/.+/, function(req, res) {
  var fileRoot = __dirname + '/views/less/',
      extname = path.extname(req.url),
      basename = path.basename(req.url),
      filePath = undefined;

  if ( extname !== '.less' ) {
    console.log('that is not less file');
  }

  filePath = fileRoot + basename;

  fs.readFile(filePath, 'utf8', function(err, str) {
    var parser = undefined;

    if ( err ) {
      console.log('file doesn\'t exist: ' + basename);
    }

    parser = new(less.Parser);

    parser.parse(str, function(err, tree) {
      var css = undefined;

      if ( err ) {
        console.log('parse error: ' + err.message);
      }

      css = tree.toCSS({ compress: true });

      res.writeHead(200, {
        'Content-Type': 'text/css'
      });
      res.end(css, 'utf-8');
    });
  });
});

app.listen(3000);
console.log("Express server listening on port %d in %s mode", app.address().port, app.settings.env);

index.html

index.html は views/tmpl/index.html におきます。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>${title}</title>
	<link rel="stylesheet" href="/less/styles.less">
</head>
<body>
<h1>${title}</h1>
<p><a href="http://google.co.jp/">Google</a></p>
</body>
</html>

styles.less

styles.less は views/less/styles.less におきます。

.class {
    width: 1 + 1px;
}

a {
  text-decoration: underline;

  &:hover {
    text-decoration: none;
  }
}

3年くらい前に最初のバージョンを作ったjQselectableをほぼ全て書き直しました。書きなおす流れで以前のものと互換性がなくなってしまったので、新しいものとして公開します。

• jqselectable のサンプル
• 5509/jQselectable – GitHub

使い方

実行する前に

ファイルをgithubからダウンロードして、CSS/JSファイルを読み込んでおきます。

jQueryプラグインなので、jQueryも読みこんでおきます。推奨は一応最新バージョンです。

<link rel="stylesheet" href="jqselectable/style/selectable/style.css" />
<script src="scripts/jquery.js"></script>
<script src="jqselectable/jqselectable.js"></script>

CSSは jqselectable/style の中に

• selectable
• natural
• xp

と3つ入っているので好きなものを選んでください。自分で書いても大丈夫です。そのときはgithubからpullリクエストください。

実行する

ready関数は必要に応じて使ってください。

jQuery(function($){
    $(selector).jQselectable();
});

実行時に渡しているオプションについては次項で解説しています。

オプション

オプションを使う場合は、実行時の引数にハッシュで渡します。

$(selector).jQselectable({
    show: "fadeIn",
    showDuration: "fast",
    opacity: .9
});

API

APIを使う場合は、jQselectable実行時の引数を任意の変数から参照できるようにしておきます。また、この場合、適用する要素はひとつにしてください。2つ以上ある場合はちょっと面倒くさいです。以下ひとつのものベースに解説しています。

var jqs = $(selector).jQselectable();

変数から参照できる状態であれば、いつでもAPIを利用できます。とりあえずAPI一覧は以下の通りです。

enable, disable, destroy

サンプルコードままですが、ボタンをクリックすると使えるようにしたり使えなくします。

var $jqs = $("#triggerbind").jQselectable({
    style: "simple",
    height: 150,
    opacity: .9
});

$('#disabled').click(function() { $jqs.jQselectable('disable'); });
$('#enabled').click(function() { $jqs.jQselectable('enable'); });
$('#destroy').click(function() { $jqs.jQselectable('destroy'); });

refresh

これもサンプルコードままですが、addボタンをクリックすると元のselect要素にoptionを追加して、その変更をjQselectableへ反映します。

// 実行部分は省略

$('#add').click(function() {
    $('#refresh').append('<option value="value_' + num + '">value_' + (num++) + '</option>');
    $jqs.jQselectable('refresh');
});

jQselectable.change イベント

以前はコールバック関数を呼べるようにしていたのですが、廃止して、イベントから呼べるように変更しました。

var $jqs = $("#triggerbind").jQselectable({
    style: "simple",
    height: 150,
    opacity: .9
});

// trigger bind
$jqs.bind('jQselectable.change', function(ev, data) {
    location.href = data.value;
});

オプションのvalueを元にページ遷移などしたい場合は、この方法で行います。jQselectableオブジェクトに jQselectable.change イベントを bind すると任意の処理を行えます。サンプルに書いていますが、2つ目の引数(data)に value というプロパティがあり、ここに選択した項目の value が入っています。

何かあれば

github からフォークしてください。

それにしても3年ってそんなに経ってしまったんですね・・・

タイトルは釣りかとおもいきや僕は普通にあるのとないのとで3倍くらい差があるので、界王拳アプリのひとつです。特にWebアプリとか大きめの規模のサイト開発でとても役に立ちます。

• Charles

こんなことができます（目次）

• いちいちサーバーへファイル転送なんかしてられない
• Charlesのインストールとライセンス
• Map Local（指定URLのリクエストをローカルへ向ける
• Map Remote（指定URLのリクエストを別のURLへ向ける
• 常にキャッシュをオフに
  • Locations 設定の流れ（ほとんど全部共通）
• Throttling で回線速度をシミュレート
• リクエストが丸裸
  • 例えばXMLHTTPRequestの場合
• ログの設定はRecording Settingsから

紹介してる以外にも Reverse Proxy を設定できたり、 Break Points で指定リクエストのパラメータを変えて再POSTできる等、なんせ便利なので、一度だまされたと思って使ってみてください

いちいちサーバーへファイル転送なんかしてられない

規模が大きかったりすると、サーバーへファイルを転送しつつ確認とかいうことが簡単にできなくなりますよね。そういうときはCharlesのようなプロキシアプリを使って、指定したURLに本来行くはずのリクエストを、ローカルや違うサーバーへ向けてそっちのファイルを参照させます。

例えば

http://hoge.com/css/*

にリクエストした場合

file://localhost/Users/username/hoge/css/*

のファイルを見せることができます。つまり、ローカルで編集したファイルをサーバーへあげなくても、例えば本番環境にファイルを上げたみたいな挙動をするってことです。

まだ？？？になっている人もいるかもなので、もっと簡潔に言うと、Charlesを起動しているときは、いちいちSFTP等でサーバーへファイルを転送しなくていいってことです。大きいサイトとかだと、サーバーへファイルを転送するのもなかなか面倒くさかったりしますよね。

あとは、もろもろの理由でローカルが立てられないときとか・・・あるあるじゃないですか・・・そういうときに超便利です。

そんな感じで、最低限設定しておくとよさそうな箇所やここが便利だよっていうところをざっくり書いておきます。まーみんな買ったほうがいいですよ。Charlesじゃなくてもいいけど。

Charlesのインストールとライセンス

Charlesのサイトからダウンロードしてインストールするだけで

• Win 32bit/64bit
• Mac OS X
• Linux/Unix

とOSのカバー範囲も広くて色々な環境で使えます。

ライセンスを購入していないときは、基本的に全ての機能を使えるけれど以下2つの制約があります。

• 起動するとき10秒待たないといけない
• 30分経つとCharlesが自動終了する（アラートとかないです

で、このままでも1日中の開発続けられるぜっていう場合は、特に買わなくてもいいかもですね。ちなみに1ライセンス $50 で、いまだと3700円くらいですね。

Map Local（指定URLのリクエストをローカルへ向ける

Tools > Map Local から、Enable Map Local にチェックを入れて Add をクリックすると Edit Mapping という画面が出てくるのでここで Mapping（このURLのリクエストはローカルのどこそこ見せますみたいなの） の設定をします。

打つのは面倒くさいと思うので、実際にページ表示してURLをコピーしてそれを Host の箇所にペーストしてタブか何かで別の Inputエリアに移動すると自動的に Protocol, Host, Port が補完されます。こういう細かい気づかい必要です。さらっとやってくれるようなやつ。

で、例えば

http://5509.me/js/*

こういうような場合、つまり 5509.me の jsディレクトリ配下は全てローカルを見せる場合

Path は /js/* と * で全部指定します。

まーこの辺はダイジョウブですよね。
で、Map To のところにどこ見せるかっていうディレクトリを、これは Choose ボタンからブラウズで選択します。こっちは * が必要ないので注意してくださいまし。

Map Remote（指定URLのリクエストを別のURLへ向ける

Map Remote では、ローカルではなく指定したURLへ向けることができます。指定方法は Map Local と同じですね。

常にキャッシュをオフに

Tools > No Caching をチェックするだけ

Only for selected locations をチェックすると指定した Locations でだけキャッシュをオフにします。Locations 設定の流れは以下全て同じなので、先に書いておきます。

Locations 設定の流れ（ほとんど全部共通）

Add をクリック

Edit Locationパネルが開く

指定したいURLを Host へペースト

Tabキーを押すと補完される

サイト内全ての場合は Path に * を追加する

パスを指定したい場合は、入力するか、指定パスまでを含んだURLを Host にペーストすればよいです。

OK すると Locations に追加される

Throttling で回線速度をシミュレート

みんな早い回線使ってるなんてそんなわけないんだよ・・・

Throttling を使えば回線速度をシミュレートできます。あくまでシミュレートですけどね。遅い回線環境でのチェックも規模が大きい場合は重要になってきますし。

Throttling Settingsを開いて Enable Throttling をチェックして、Throttle Preset から登録されてる項目を選択するとそれくらいの速度の回線で見てるような感じになります。試しに 28.8kbps を選んで OK してみてください。

Only for selected hosts にチェックを入れると 下の Hosts に追加したとこでだけ有効になるとかそういうのは他のではあるので、覚えておくと便利ですね。

リクエストが丸裸

単純にCharlesを起動して、Shift+Cmd+P（Mac OS Proxyをオンに）を押した後にこのブログを開いただけです。何も設定をしていない状態では、全てのリクエストを拾ってログをSequenceタブに表示していきます。

キャプチャにあるようにログにはタブがついていて

• Overview
• Request
• Response
• Summary
• Chart
• Notes

リクエストが丸裸に・・・

例えばXMLHTTPRequestの場合

JSからのリクエストはアイコンが「J」になって

当然のようにRequest内容が見れます。GETリクエストの場合はQuery Stringも見れます。

リクエスト結果はResponseタブで確認できます

JSONなら超見やすい具合に整理されて表示できます

すでに便利なんですけど、何も設定しないとどうでもいいログまでバンバン記録されていくので、設定で要らないログは記録しないようにします。

ログの設定はRecording Settingsから

そのままだとログの記録だけでMacBook Airのファンがフィンフィンうるさいレベルになるので、これはやっておいたほうがよいでしょう。まー画像とかのログみてもアレですし。いや必要なときはありますけどね。そのときは外せばいいだけですし。

Recording Settingsを開くと

• Options – ログを記録する上限を設定できる
• Include – ログを記録するURLやファイル・ディレクトリを指定（これ設定すると設定したURLでしかログを記録しなくなります
• Exclude – ログを記録しないURLやファイル・ディレクトリを指定

とりあえず、静的なファイルは記録しても意味ない（僕は）のでそれらをExcludeするように設定します。

AddをクリックするとEdit Locationが表示されるので、そこに「*.gif」と入力すると、全てのgifファイルといった指定にできます。ここで全部指定できたらいいんですけど、それはできないようなので、同じように.js・.cssなどを指定していきます。

これで、ログに表示されるのはXMLHTTPRequestとかだけになるので、ちょっとはスッキリ。

いかがでしたか

ざっくりとしか説明してませんが、とりあえずインストールして Map Local とか リクエスト見てみる などしてみてください。開発速度が3倍くらいになるようなならないような・・・

僕はえどさんのエントリで知りました。

• 本番環境でテスト？！ Charlesを使った簡単サイト修正

他のプロキシアプリ

僕は使ってないので比較できませんが、他にもCocProxyやFiddlerが有名です。

• CocProxy
• Fiddler

# ターミナル初めての人向け
$ で始まってるやつはターミナルから入力します。また sudo はroot権限で実行します。通常ファイルやディレクトリにはPermissionが設定されていて、ユーザーディレクトリより上位階層のファイル・ディレクトリはroot権限がないと変更できません。

ゴール

ゴールはローカルのhogeディレクトリに
ブラウザから「http://ho.ge/」でアクセスできるようにすることにします。

ちなみに index.html の中身は

<!DOCTYPE html>
<html lang="ja">
<head>
<title>hoge</title>
</head>
<body>
<p>This is HOGE</p>
</body>
</html>

になってます。これは表示確認ができればなんでもいいです。

これから[ユーザー名]っていう箇所が出てくるんですけど、これは赤線で囲った部分の文字が入ります。

サイドバーにない場合・・・

hogeディレクトリにある index.html のコンテキストメニューから「情報を見る（Get Info）」を選択すると

[ユーザー名] が分かります。

http://ho.ge/ にアクセスしてみる

とりあえず http://ho.ge/ にアクセスしてみると

当然アクセスできません。osho.geとかoho.geが気になるけどスルーだオショゲ。

Web共有がオンにできるか確認する

システム環境設定 → 共有 にあるWeb共有の項目をチェックしてONにできるか確認します。

とりあえず最初からやるという前提で、もしオンにできないときはhttpd.confをデフォルトの状態に戻しておきます。

$ sudo cp /etc/apache2/httpd.conf.default /etc/apache2/httpd.conf

VirtualHostを設定する

VirtualHostの設定は、/etc/apache2/extra/httpd-vhosts.conf に書くのが一般的なようで、httpd.confの623行目あたりにある

# Virtual hosts
#Include /private/etc/apache2/extra/httpd-vhosts.conf

↓ Includeの前の # をトル

# Virtual hosts
Include /private/etc/apache2/extra/httpd-vhosts.conf

コメントアウトを外す方法でやってたんですけど
どうにもhttpd-vhosts.confが読み込まれないとかいうので3時間はまったので、httpd-vhosts.confを /etc/apache2/other に作る方法にしました。

なので上の # をトルはやらなくてだいじょぶです。

デフォルトで /etc/apache2/other の conf拡張子ファイルは全て読み込まれるようになっているので other ディレクトリに httpd-vhosts.conf ファイルを作るだけで使えるようになります。

httpd-vhosts.confを作る

$ sudo vim /etc/apache2/other/httpd-vhosts.conf

これで vim が起動するので以下を入力します。

# vim初めて触る人向け
i を押したあとに以下を入力して
esc → :wq! で保存し vim を閉じます

NameVirtualHost *:80

# ho.ge
<VirtualHost *:80>
    DocumentRoot /Users/[ユーザー名]/hoge
    ServerName ho.ge
</VirtualHost>

<Directory /Users/[ユーザー名]/hoge>
    AllowOverride All
    Allow from All
</Directory>

hostsファイルの設定

以下を入力してhostsファイルを開きます。

$ sudo vim /etc/hosts

さっきと同じ要領で以下の行を追加します。

127.0.0.1 ho.ge

（スペースは気にしないでください）

ここまで出来たら

$ httpd -S

で設定ファイル（httpd-vhosts.conf）に問題がないか確認します。
問題がない場合は

httpd: Could not reliably determine the server's fully qualified domain name, using ***** for ServerName
VirtualHost configuration:
wildcard NameVirtualHosts and _default_ servers:
*:80                   is a NameVirtualHost
         default server ho.ge (/etc/apache2/other/httpd-vhosts.conf:4)
         port 80 namevhost ho.ge (/etc/apache2/other/httpd-vhosts.conf:16)
Syntax OK

のように表示されます。VirtualHost configurationのところに設定した ho.ge と Syntax OK が出ていれば設定できているのでだいじょぶです。

記述に間違いがあるときは

Syntax error on line 1 of /etc/apache2/other/httpd-vhosts.conf:
Invalid command 'hogehogehgoe', perhaps misspelled or defined by a module not included in the server configuration

のように表示されるので、該当箇所を確認してください。

Web共有を再起動する（Apacheの再起動）

Web共有のチェックを一旦外して、もう一度チェックするとApacheが再起動して、設定が有効になります。

Apacheの再起動は

$ sudo apachectl restart

でもできます。

ho.ge にアクセス

アクセスできましたか？できたら終わりです。

ちなみに

上までちゃんとやってて httpd -S も大丈夫そうなのにアクセスできない場合は、Macを再起動すると大丈夫になるかも。

僕はそれでさらに1時間はまりました^ω^

※ なんかサイ本みたらondataavailableに登録するみたいなことが書いてあったからそうした。

ちなみに、キャプチャはChromeのdev版なのでstable版は少し違うかもしれません。stableでもcacheの項目あるのは確認してます。

通常、キャッシュがあればそっちを見に行くので304になりますが

右下にギアアイコンがあって、そこからインスペクタのSettingが開けます

Disable cacheにチェックを入れておくと

Cacheが常にオフになり

常に200、キャッシュを見にいかなくなります

チェックボックスで必須をトグルにできるやつのサンプル

実装方法

実装方法はサンプルに尽きるのですが、ポイントはトグルにしたい要素はルールを書くときにchkrequiredを必ず含めてください。

<tr>
  <th>Favorite<span>*</span></th>
  <td>
    <span id="fav">
      <label for="f1"><input type="checkbox" id="f1" name="fav[]" value="f1">books</label>
      <label for="f2"><input type="checkbox" id="f2" name="fav[]" value="f2">music</label>
      <label for="f3"><input type="checkbox" id="f3" name="fav[]" value="f3">game</label>
      <label for="f4"><input type="checkbox" id="f4" name="fav[]" value="f4">study</label>
      <label for="f5"><input type="checkbox" id="f5" name="fav[]" value="f5">fishing</label>
      <label for="f6"><input type="checkbox" id="f6" name="fav[]" value="f6">other</label>
    </span>
  </td>
</tr>
<tr>
  <th>Favorite Other</th>
  <td>
    <input type="text" id="favOther" name="favOther" value="">
  </td>
</tr>

で、チェックボックスを含むグループにはchktoggle_hoge_fugaのように

• hoge: トグルを発火させるためのチェックボックスのID
• fuga: チェックボックスの状態によって必須をトグルさせるinputのID

ルールを入れておきます。これだけです。

$("form")
  .exValidation({
    rules: {
      fav: "chkgroup chktoggle_f6_favOther",
      favOther: "chkrequired"
    },
    stepValidation: true
  });

そんなわけで、実装しましたのでよければ使ってください。

チェックボックスで必須をトグルにできるやつのサンプル

jQuery使ってないときは$(“object”)をquerySelectorとかに変えます。

var object = undefined;
(function() {
    object = $("object");
    if ( object && object.length > 0 ) {
        // ここに処理書く
        return;
    }
    setTimeout(arguments.callee, 30);
}());

上の例だと、objectを監視し続けてほしい個数分取れたときに何かするっていう感じです。取れないときは取れるまでループし続けるので、アレですアレ。。前もって、コンソールからほしい要素が最終的に挿入されてるかどうか見てからにしましょう。

自分で書いたコードならカスタムイベント入れとくと、後で使うときに楽ですね。つまりプラグイン使うとノードの生成タイミングとか自分で把握できなくなるので、気をつけたほうがいいです。

jQueryオブジェクト

まあ普通はこれですよ。

var hoge = $("#hoge");
$("#fuga").append(hoge);

とか極端な例だけど

$("#hoge").append(
  $("<div></div>")
    .append(
      $("<a></a>")
        .attr("href", fuga)
        .text(piyo)
    )
);

みたいなの

HTML要素

これもあるある。

$("#hoge").append(
  "<div>fugafuga</div>"
);

HTML要素少し多い場合

ちょっと見にくい。

$("#hoge").append(
  "<div class='fuga'>\
    <h3>piyo</h3>\
    <p>fungaaaaaaa</p>\
  </div>"
);

上のパターンを配列で

割とみやすい。

$("#hoge").append([
  "<div class='fuga'>",
    "<h3>piyo</h3>",
    "<p>fungaaaaaaa</p>",
  "</div>"
].join(""));

functionで要素を返す

これあんまり使ってないと思いますけど超便利なんですよ。
中でたくさん作ってまとめて返したり、条件分岐で返したり夢が広がります。

$("#hoge").append(function() {
  var elm = $("<ul></ul>"), li = [];
  for ( var i = 0; i < l; i++ ) {
    li.push(
      "<li>" + fuga + "</li>"
    );
  }
  return elm.append(li.join(""));
});

そんな感じで

最後のやつも積極的に使うといいと思います。

シンプルで使いやすいEdit in placeエディタを。

EIPは指定の要素にEdit in placeエディタ機能を付加します。データの保持はカスタムデータ属性で行い、コールバック関数を呼べるためある程度自由にデータのやりとりができます。

• EIPのサンプル

ダウンロード

Githubから

使い方

jQueryとeip.js、eip.cssを読み込みます。

<link rel="stylesheet" href="/css/eip.css">
<script src="common/js/jquery.js"></script>
<script src="/js/eip.js"></script>

次にHTMLを用意します。このとき、HTMLにはdata-eipが必須です。実行対象はdivでもspanというか何でも大丈夫ですが、display: block指定がされているか、ブロック要素がいいと思います。（※data-eipについては後述

<div class="eip"
  data-eip-name="name"
  data-eip="text"
>sample</div>

実行する際にEIPだけではデータに対して何もできないので、onsubmitオプションが必須です。（※詳しくは後述

<script>
  jQuery(function($) {
    $("div.eip").eip({
      onsubmit: function(name, val) {
        $("input[name=" + name + "]").val(val)
      }
    });
  });
</script>

EIPのカスタムデータ属性

data-eip

EIPの形式を指定できます

textareaを指定した場合

data-eip-rowsで置き換えた後のtextareaにrowsを指定できます

<div class="eip"
  data-eip-name="introduce"
  data-eip="textarea"
  data-eip-rows="10"
>自己紹介がはいるよ</div>

selectを指定した場合

data-eip-optionでselect要素のoptionを生成できます

<div class="eip"
  data-eip-name="select"
  data-eip="select"
  data-eip-option="["A","B","C","D"]"
>A</div>

data-eip-optionはArrayかJSON形式で指定します

Array

["A","B","C","D"]

JSON

{"A":"data-A","B":"data-B"}

data-eip-name

data-eip-nameを指定しておくとコールバックでデータを引き抜くときに便利です

data-eip-value

data-valueはエディタから置き換えられた後に置き換えた値が代入されます

data-eip-default

何もない場合に表示されるラベルを個別に指定できます
まとめて指定したい場合はオプションから指定できます

オプション

onsubmitでは data-eip-nameとdata-eip-valueを受取ります。

DOCTYPE・・・

カスタムデータ属性を使っているので、XHTMLだとinvalidになるので気になる場合は、DOCTYPEだけでもHTML5にしておくとよいです

というわけで

何かあればGithubからフォークしてください

アップデート項目

• added: refresh()メソッドの実装
• added: スクロールバーの背景を表示する
• bugfix: スクロールバーの高さ
• bugfix: スクロール量
• bugfix: スクロールコンテンツが少し余る
• modifed: iOSでのモーメンタムスクロールのスクロール量、easingの調整

使い方などはSkrollのアーカイブに追記してます。

前略そんなわけでスクロールバー作りました。

一応目指していたところは、PCベースのサイトを作ったときにiOSで見てもスクロールバー実装したとこいい感じになるよ！っていうのです。

PCでLionぽいスクロールバー作りたいなと思って会社の合宿中に始めたのですけど、なんかいつの間にかiOSにも対応することになってて、動きにこだわり始めたら収集つかなくなってめちゃめちゃ時間かかりました・・・

対象バージョンはある程度絞ってあるんですけど、結構納得いく動きにできたかなーと思います。動きはとりあえずPCとiOS（4.2以上）で見てください。

タイトルにないですけど、これはjQueryプラグインとして動作します（jQuery mobileは必要ないです）。自分で使う機会が多ければjQuery外してiOSに特化してもいいかなとかそういうノリなので、もし使う人がいればフィードバックください。

iOS用のスクローラーライブラリでiScrollとかScrollabilityがあるのですが

とりあえずiScrollとかとの違いを

• PCベースで対応（iOSはサブ扱い、半分くらいiOSのコードだけど
• PCとiOSでは動作が違う、それぞれ使いやすいように最適化

サンプル

• PCブラウザとiOSで動作が違います
• refreshメソッドのサンプル – iOS向けによくあるヘッダフッタの固定

二つ目のサンプルはウィンドウの幅を変えてみてください。refresh()メソッドを使うことで、スクロールバーの長さがコンテンツの幅が変わるのに合わせて変わります

ダウンロード

Githubから

使い方

jQueryとskroll.jsを読み込んで実行するだけです。実行する対象はいつもoverflow: auto;にしてる要素です。autoにしておいて、skroll()メソッドを実行すればスクロールバーが置き換わります。このときwidthの指定がある場合は（auto以外の場合）オプションでwidthをしてください。

※ スクロールバーは縦のスクロールバーしか実装できません。

<script src="common/js/jquery.js"></script>
<script src="skroll/skroll.js"></script>
<script>
  jQuery(function($) {
    $("div.txt").skroll({
      width: 300
    });
  });
</script>

オプション

あまり役に立たないオプションが多いかも・・・

メソッド

メソッドを利用する場合は、jQueryオブジェクトに対してskroll()を実行せずに、jQuery.skroll()を実行します。

var skroll = $.skroll("div.body", {
  scrollBarBg: true
}); // 要素、オプションの順

skroll.refresh(); // 任意のタイミングで

• refresh()メソッドのサンプル

iOSの対応バージョンについて

手元のiOS4.3（iPad2, iPhone4）から見てますが、どちらも普通に使う分には問題ないです。

CPUもしくはGPUが非力なiPhone3Gや3GSではCSS3 Transitionsが綺麗に動作しない可能性があります。TransitionsにはGPUハードウェアアクセラレータを利用しているため、この部分で滲んだりボヤケたりするかもしれません。

というわけで

何かあればGithubからフォークしてください！

特に要素の位置を動かすなどの処理はコストが高く、よくカクカクするというか、スムーズにアニメーションしてくれないときが多いです。

iOSではCSS3によるGPUアクセラレーターの利用ができ、GPUアクセラレーターをONにすると、今までカクカクしていたCSSによるアニメーション効果もかなりスムーズになります。

基本的には3D処理をさせている場合に有効になりますが、GPUアクセラレーターによるアニメーション処理を行う際、プロパティの指定方法によってはiOSでチラつくことがありまして、、このチラつきはGPUアクセラレーターのON/OFFが切り替わったタイミングで発生しているようで、GPUアクセラレーターを利用したい場合は、常に3D処理をさせる（常にONにしておく）のがよさそうです。

3D処理のスイッチ（便宜上スイッチと呼びますが）については@Takazudoさんのハマログに書かれてる以下の記述でも出来るのですが

target { -webkit-transform: translate3d(0, 0, 0); }

iOSでCSSアニメーション使うとなんかチカチカする

transformプロパティを使いたくない場合もあるので、transformプロパティを利用しない方法として

target { -webkit-transform-style: preserve-3d; }

このようにtransform-styleにpreserve-3dを指定すると、その要素のアニメーション処理にはGPUアクセラレーターが利用されるようになります。

指摘もらったので追記、ちょっとわかりにくかったかも

transform-style: preserve-3d はGPUアクセラレーターをONにするためのプロパティではありません。3D処理を行うと指定すると、iOSでGPUアクセラレーターがONになるというだけです。

http://dev.w3.org/csswg/css3-3d-transforms/#transform-style-property

timing-functionってJSで言うてたところのeasingやねん。timing-functionは規定値で

• ease
• ease-in
• ease-out
• ease-in-out
• linear

の5つが用意されとるんやけど、それだけでも結構きれいな数値の変化になるねん。でもカスタム値のcubic-bezierっていうので動きを詳細に決めることができて、これ使うと好きな動きにできるんやで。

linearの動き

例えばlinearの動きはこんな感じに表せるんやけど・・・まだよくわからんよね。

参考

CSS Transitions Module Level 3

http://www.w3.org/TR/css3-transitions/

The ‘transition-timing-function’ Property

http://www.w3.org/TR/css3-transitions/#transition-timing-function_tag

で、このcubic-bezierの指定方法なんやけど、いちいち計算なんかしてられへんから、ツール使ったほうがええよね。とりあえずコレ使ってたらええよっていうのはこれな。

• CSS cubic-bezier Builder

つまみが2つあって、それ動かすと好きなように曲線を変えれるねん。曲線が数値の変化にどう影響するんかってうのは次の図に書いてみたで。動きの比較もできるようになってるから、「Click Here」のとこクリックしてみてや。どんな変化になるんかっていう目安には十分なるから、好きな動きにできると思うで。

あ、そうそう、Y軸は数値の変化、X軸は時間の変化になってるから、それに合わせて考えて曲線動かしてな。ところでJSとかASのeasingにあったbounceとかelasticとかそういう複雑な動きはでけへんから注意しといてや。

wrap()メソッドは全然使ったことがなくて、なんとなく使ってみたらうっかりはまった例です。よくよく考えたらその通りなのでただのうっかりです・・・

wrap()メソッドについて

一応ふれておくとwrap()メソッドを使うと、対象のjQueryオブジェクトを指定したタグか要素で包めます。

$(boga).wrap("<div></div>");

とかすると

<div>boga</div>

になります。このwrapする要素はタグではなくてjQueryオブジェクトでも大丈夫なんですけど、

何がだめなのか

var $boga = $("<div></div>");
// これは大丈夫
$boga.method(/* something */);

$(fuga).wrap($boga);

// これはだめ
$boga.method(/* something */);

結論から言うと、次みたいに$hogeを再取得しないとだめです。（そもそもreplaceWithとかのほうがいいかもとかは置いといて）

var $boga = $("<div></div>");
// これは大丈夫
$boga.method(/* something */);

// wrapした後、親に移動してそれを $hoge に返す
// つまり元の$hogeを再取得する
$boga = $(fuga).wrap($boga).parent();

// これも当然大丈夫
$boga.method(/* something */);

何がどうなってるの

wrap()メソッド自体はほぼそのままwrapAllに渡してるだけなんですけど

wrap: function( html ) {
    return this.each(function() {
        jQuery( this ).wrapAll( html );
    });
}

下にコメントで書いたように、wrapAll()メソッドでwrapする要素はclone()メソッドで複製したものなので、元の$bogaにあれやこれやしようとしても、そもそも$bogaでwrapされているわけではないのでどうしようもない、ということでした。

wrapAll: function( html ) {
    // 略

    if ( this[0] ) {
        // The elements to wrap the target around
        var wrap = jQuery( html, this[0].ownerDocument ).eq(0).clone(true);
        // ↑ 実際に追加されるのは html ではなく html を複製したもの

        if ( this[0].parentNode ) {
            wrap.insertBefore( this[0] );
            // ↑ 複製したものを追加している
        }

        wrap.map(function() {
            // 略
        }).append( this );
    }

    return this;
}

カレー

たべたい

下のようなHTMLがあって、

<div class="txt">
    <p class="photo left">
        <a href="http://farm6.static.flickr.com/5297/5428556190_6b17a2dddc_m.jpg">
            <img src="http://farm6.static.flickr.com/5297/5428556190_6b17a2dddc_t.jpg">
        </a>
        <span class="caption">
            Photo by <a href="http://www.flickr.com/photos/kwerfeldein/5428556190/">Martin Gommel</a>
        </span>
    </p>
    <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
</div>

コンテンツの高さを取得するには例えば

jQuery(function($) {
    var contentsHeight = $("div.txt").get(0).offsetHeight;
});

とかで取れるんですけど、画像にheight属性がないので、画像がロードされるとコンテンツの高さが変わってしまうんですね。なので、画像がある場合には、画像がロードされるのを待ってからもう一度取得しないとだめです。

画像のロード完了はnew Image().completeを使うんですけど、そこの説明ははしょってm5ImgLoadっていうの使ってます。ちょっと前に$(“img”).load()（img.onloadも同じ）だと画像の読み込み完了が取れないみたいなエントリを書いてやっぱり必要なかったとか書いてたのですけど、やはりIEだと取れないので、これ使ってます。

jQuery(function($) {
    var $txt = $("div.txt"),
        contentsHeight = $txt.get(0).offsetHeight,
        $images = $("img", $txt),
        imgLength = 0,
        imgLoaded = 0;

    if ( $images.length ) {
        imgLength = $images.length;
        $images.each(function() {
            $(this).m5ImgLoad(function() {
                imgLoaded += 1;
            })
        });

        (function() {
            if ( imgLoaded === imgLength ) {
                contentsHeight = $txt.get(0).offsetHeight;
                return;
            }
            setTimeout(arguments.callee, 30);
        }());
    }
});

なんか長くなりましたけど、height属性がない場合も多いので面倒ですけど気にしておかないとはまります・・・

たとえ以降のバージョンで直ったとしても、1.6と1.6.1でだめならなんかもう色々面倒なことになる気がする・・・exValidationとかjQselectableで、というか色んな場面でattr(“offsetHeight”)を乱用？してたのでこの仕様変更（バグ？）は結構辛いのです。

こういう人他にもいないですかね。propと併用するよりは、ピンポイントな話なので、

$(hoge).attr("offsetHeight")
$(hoge).attr("offsetWidth")

とかやってた箇所を

$(hoge).get(0).offsetHeight
$(hoge).get(0).offsetWidth

というように、DOMから参照するように置き換えると1.6以降でも動作するようになります。

おさらい

※ 仕様ではなくて、認識です

セレクトボックス

一覧の中からひとつを選択させるもの（そもそも）

チェックボックス

基本的には一覧である必要はなくて、複数ある項目の中から指定する項目を選択させるというもの

セレクトボックスのmultiple属性

どちらもそもそもの使い方が全然違うけど、セレクトボックスにはmultiple属性があって、trueにすると（multiple属性を追加するだけやけど）、PCではShiftかCtrl(Cmd)を押しながらクリックすると複数項目が選択できる

ただのmultiple select – jsdo.it – share JavaScript, HTML5 and CSS

この「ShiftかCtrl(Cmd)を押しながら」というのはかなり嫌な実装で、普通に見てそれが複数選択可能かなんて分からへんし、「Shift or Ctrl(Cmd)+クリック」をエンドユーザーが認識してる割合は超低い（自分周り調べ）

そもそもエクスプローラーとかFinderの仕様に沿ってるのかもしれないですけど、それできるのって普通知らないですよね

フォームでは複数項目選択可の場合って、だいたい「複数選択可」みたいなテキストをラベル付近に入れると思うけど、ていうか入れてほしいけど、この補助テキストがあったとしてもきっとよくわからん。マルチプルセレクトの場合。

forked: ただのmultiple select – jsdo.it – share JavaScript, HTML5 and CSS

（どうやんの？）

ほんだら、補助テキストを詳しく書いたりするんでしょーか

forked: ただのmultiple select – jsdo.it – share JavaScript, HTML5 and CSS

うーん、こんなごちゃごちゃうるさいフォームは美しくない（デザインではなくて手法が）

ここまでで分かることはセレクトボックスは複数選択に全くもって向いていないということ

ただし、iPhoneとAndroidでマルチプルセレクトを見ると、結構みやすいし使いやすい

ただし一覧性は低いのでたくさんある場合は一度一番下までスクロールして確認してから、選択という流れになりそう

チェックボックス

一方チェックボックスは複数選択に適していて、たくさん項目があってもチェックを付けていく間隔から「あ、これは複数選択できるんだな」ということが分かるし、使い方もクリックしてチェックするだけ

ただのチェックボックス – jsdo.it – share JavaScript, HTML5 and CSS

つまりー

どうしたいかというと、jQselectableのいいところは「一覧性が高く、目標に到達しやすい」ということで、これをマルチプルセレクトに対応させる場合、「一覧性が高く、目標に到達しやすい上に複数選択が可能であることが見てすぐ分かる」ということ

でまぁ、そもそも使いにくいセレクトボックスの更に使いにくいマルチプルセレクトなもんで、どうしようかなーというところで、とりあえず思ったこと書きだしただけです

個人的にはセレクトボックスにチェックボックスをあわせたものが見やすいとは思ってて、iPhoneのやつもチェックが入ってるから複数選択できることが分かるんですね

ただまぁ、非常におださい感じになってしまうので（※個人の感想です）、チェックボックス組み合わせるのはナシやなぁとかなんとか。色々見てはいるものの、こんなの使いやすかったよとかそゆのあれば教えてほしいです

あと、jQselectableはWeb界隈の人たちにはご好評いただいているものの、どこまでのエンドユーザーに対してやさしいかっていうのは、把握できてないですし、もしかしたら使いにくいかもしれませんし。自分周り調べでは、結構普通に選択してはりましたけど

むー

（pixelgrid.push(“5509″) とかしようと思ったけど意味違ってくるかと思ってやめました）

色んな意味で刺激的すぎて毎日鼻血出っぱなしです。血が足りない。

ディレクターからフロントエンジニアになり、いや以前もディレクターと言いつつ開発ばっかりしてましたけどｗ、UIをもっともっとアレしたいなぁと思ってるアレです。アレはソレとかコレで補完してください。

関東はこれで三度目なので特にこれといって不便とかないですが、まぁ・・・車が多いし道混みすぎてますね。大体バイク移動なのですいすいです。

そんなわけでせっかく東京に来たので、色々参加していこうと思ってるので、おもろいこと全然言われへん大阪人ですけど、こちらの方はよろしくです。今日Sugamo.cssに初参加してえどさんのおかげで逆にやる気なくなったり、とかしてないです、恐ろしい集まりやで・・・

とりあえず、雑貨屋たくさん探そー。いいとこ知ってる方教えてください:)

あれ、なんか色々書こうと思ったのにいざ書いたら書いたでめっちゃ短い・・・

どうでもいいこと

直接関係ないですけどFacebookのEmployerのところ変更したら

こういう表記になって、気がきいてるなぁとか思ったのでした。

タイトルが長い・・・入力テキストを消去するUIは検索ボックス（type=search）にだけ有効で、他の（type=textなど）では使えないんですね。でもこの×ボタンの使いやすさは間違いないので。。

1ヶ月くらい前に作ったのにサンプルを作るのを面倒くさがって公開してなかったものを、サンプルキレイにして公開しておきます。

Delete Valueのサンプル
サンプルはiOSとAndroid（※1）でしか動作しません。。

問題点もあるのですが、それは後述。

使い方

ダウンロード

ファイルをGithubからダウンロードしてください

ファイルの読み込みと実行

必要なファイルはdeleteValue.jsだけです。jQueryは必要ありません。実行はsmartDeleteValueメソッドを実行するだけです。実行対象はjQueryでお馴染みCSSセレクタで指定します

<script src="source/deleteValue.js"></script>
<script>
  GG.smartDeleteValue("#elms input");
</script>

オプション

実行時の第二引数でオプションを指定できます。

GG.smartDeleteValue("#elms input", {
  borderRadius    : "10px",
  width           : "20px",
  height          : "20px",
  fontSize        : "20px",
  color           : "#efefef",
  backgroundColor : "#666",
  topAdj          : 2,
  leftAdj         : -3,
  opacity         : .8,
  closeLabel      : "×"
});

対応項目一覧

以下の値を取れます

Problem Issues

分かる人教えてほしいです。そもそもAndroid端末を持ってないのでAndroidは正式に対応してないです。一応Galaxy Sでだけ確認しました

• input要素にフォーカスしてるときにorientationchangeが発動しないので、例えばサンプルのようなリキッドレイアウトにしている場合、×ボタンの位置が移動しない
• Androidだとフォーカスしてるinputの×ボタンのtouchstartが取れない（レイヤーが下にきてるような感じ）

僕はYUI 3のCSS Fontsを使っていますが、%指定になるので実際何pxになるのかCSSだけでは分かりにくいときもあるので、共通CSSに下記のようなコメントでpx対応テーブルを書いておくとすぐに指定できてわかりやすいと思いますが、皆さんどうしてますか？

フォントサイズのpx対応表はYUI 3のページから持ってきて使ってますが、26pxまでしかないのがたまに不便かもですね。普通のサイト作ってるときは26px以上ってあまり使わないので困らないですけど。

共通CSSに記載するpx対応テーブル

/*-----------------------------------------------------------
 hoge.css

 フォントサイズの指定はYUI Fontsに基づき
 下記テーブルで指定します

 |px|%|
 |10|77|
 |11|85|
 |12|93|
 |13|100|
 |14|108|
 |15|116|
 |16|123.1|
 |17|131|
 |18|138.5|
 |19|146.5|
 |20|153.9|
 |21|161.6|
 |22|167|
 |23|174|
 |24|182|
 |25|189|
 |26|197|

 ex) 12px
 element {
 	font-size: 93%;
 }
 ------------------------------------------------------------*/

あとは共通CSSで

div.main {
  font-size: 93%; /* 12px */
}

とかにしたら、モジュールとか個別CSSでは最初のコメントにそれ書いておくと分かりやすいですね。

リンク

• YUI 3: CSS Fonts
• http://developer.yahoo.com/yui/3/cssfonts/#fontsize

タイトルままです。白いのはアレなのでダークなやつを。CodaをベースにちょっとVimのやつも取り入れつつ。HTML/CSS/JavaScriptはいい感じになるかもしれないけど、JSがちょっと項目多すぎて断念した・・・これからまた変わっていくかも。誰かきれいなやつあったらください・・・

09.zip

アクセスキーなんか別段目新しいことなんかないですけども以下のキーで怠惰な気分になれます。絶賛実験中なのでタイミングと僕の気分で割り当ては変わります。

index.php

• h: ページトップへ移動
• j: ひとつ新しい記事を先頭に
• k: ひとつ古い記事を先頭に*1）
• u: j,kで送った現在の記事のパーマリンクへ遷移
• l: ページ一番下へ移動

*1 ) 最後までいくとautopagerize、但しページャー左の■をクリックして本にしておく必要あり

indexとsingleでjとkの動作が逆になってるけど、今のところはこれで

single.phpなど

• h: ページトップへ移動
• j: ひとつ古い記事のパーマリンクへ遷移
• k: ひとつ新しい記事のパーマリンクへ遷移
• u: コメント入力欄まで移動
• l: ページ一番下へ移動

現状のソースコード

$(window)
  // Firefoxだとalertが表示されたときにフォーカスがずれて
  // 以降ドキュメントを一度クリックしないとキーコントロールが効かないので
  // なんかダイアログなのをどこかで実装しないとだめっぽい
  .keyup(function(e) {
    var key = e.keyCode, b = $("body");
    switch( key ) {
      // h
      case 72:
        window.scroll(0, 0);
        break;
      // j
      case 74:
        if ( !b.hasClass("home") ) {
          if ( !$("#prev").length ) {
            //alert("今見ている記事が一番古い記事です");
            return false;
          }
          location.href = $("#prev a")[0].href;
        } else {
          if ( currentArticle === 0 ) {
            //alert("これ以上記事がありません");
            return false;
          }
          window.scroll(0, articles.eq(--currentArticle).offset().top - 40);
        }
        break;
      // k
      case 75:
        if ( !b.hasClass("home") ) {
          if ( !$("#next").length ) {
            //alert("今見ている記事が最新です");
            return false;
          }
          location.href = $("#next a")[0].href;
        } else {
          if ( !articles.eq(++currentArticle).length ) {
            //alert("続きを読み込み中・・・ずっとこれが表示されたらもう記事がないです");
            currentArticle--;
            return false;
          }
          if ( ( currentArticle + 1 ) === articles.length ) {
            loadingNextPage();
          }
          window.scroll(0, articles.eq(currentArticle).offset().top - 40);
        }
        break;
      // l
      case 76:
        window.scroll(0, $("html").attr("scrollHeight"));
        break;
      // u
      case 85:
        if ( !b.hasClass("home") ) {
          if ( !$("#respond").length ) {
            //alert("コメントは記事詳細で確認できます");
            return false;
          }
          window.scroll(0, $("#respond").offset().top - 50);
        } else {
          location.href = articles.eq(currentArticle).find("header").find("a:first").attr("href");
        }
        break;
      default:
        break;
    }
  });
$("input, textarea").keyup(function(e) {
  e.stopPropagation();
});

要らないものを削った結果、記事が縦に長くなってしまうもんで、ページナビゲーション（前の記事、次の記事リンク）をどうしようかなぁとか思ってた。

ちょうど、シロさん(@___shiro_)が大胆なナビゲーション云々とTweetしてたのを見て、なーるほどと思い実装してみた。

こういったレイアウトのアーカイブのナビゲーションで、元のHTMLを一切触らずCSSだけで飛躍的に（？）ユーザビリティを高められるいい例になったかなぁ。どうやろ。その辺は要検証ということで。少なくとも自分で使う分には超使いやすいからこれはこれでオッケーなんですけども。

配置を決める

真ん中にでーんとコンテンツがあるので、横の余った位置に戻るとか進むとかつけます。

構成とかは以下みたいにすればたぶんいけそうという感じで配置してます。

ナビゲーションを50%:50%でprev:nextをposition: fixedで配置しておき、その上にコンテンツをかぶせる。青い部分がprev、赤い部分がnextです。

実装コード

HTML

諸々端折ってるんですけど、HTMLは以下みたいな感じ。

<header/>
<div class="pagebody">
  <article>
    <!-- hogehoge -->
  </article>
  <!--//Entry -->
  <p id="pageNavigation">
    <span id="prev" title="前のエントリーへ">%link</span>
    <span id="next" title="次のエントリーへ">%link</span>
  </p>
</div>
<div class="sub"/>
<footer/>

CSS（コンテンツ部分）

ページナビゲーションはコンテンツの下に配置する必要があるので、z-index: -1;を与えて下へ。コンテンツ部分は1とかそういう感じで。

header {
  position: relative;
  z-index: 10;
  background: #fff;
}
div.pagebody,
div.sub,
body > footer {
  position: relative;
  z-index: 1;
  background: #fff;
}

headerだけ10なのは覆いかぶさるレイヤーがあるからです。なければ1で。

CSS（ナビゲーション）

ナビゲーションのところはCSSを利用して本来のテキストは非表示にする代わりに、:afterにcontent: “<"と">“を入れてオフのときでもよく分からなくならないように配慮したり。

あとは:afterで追加される要素をspan#prev(next)のposition: relativeに対して、absoluteとネガティブマージンでいい位置にくるように調整してます。

:afterで追加する要素はa要素よりも上に位置するので、これにも-1を与えてa要素より下に配置してます。そこにカーソルがのったときにリンク使えない、じゃ話にならんですしお寿司。

div.pagebody #pageNavigation {
  margin: 0;
  position: relative;
  z-index: -1;
  font-size: 100%;
}

  div.pagebody #pageNavigation span {
    width: 50%;
    height: 100%;
    position: fixed;
    top: 0;
  }
  div.pagebody #pageNavigation #prev {
    left: 0;
  }
  div.pagebody #pageNavigation #next {
    right: 0;
  }
  div.pagebody #pageNavigation span:after {
    margin-top: -90px;
    display: block;
    position: absolute;
    top: 50%;
    color: #888;
    font-size: 100px;
    font-weight: bold;
    font-family: Helvetica, Verdana, sans-serif;
    z-index: -1;
  }
  div.pagebody #pageNavigation span#prev:after {
    margin-left: -50px;
    content: "<";
    left: 20%;
  }
  div.pagebody #pageNavigation span#next:after {
    margin-right: -50px;
    content: ">";
    right: 20%;
  }
  div.pagebody #pageNavigation span:hover:after {
    color: #f3e720;
  }
  
    div.pagebody #pageNavigation span a {
      display: block;
      height: 100%;
      position: relative;
      text-indent: -1000em;
    }

そんなわけで

:afterとかcontentプロパティはCSSオン環境でより使いやすさを向上させるためにあるんだなーとかいうのを再認識した次第です。

えっと、予想してると思いますけど、IE6と7は非対応です。

結局思いついたやり方でやって、jQueryちゃんと読んでないけど、やり方はこんな感じ？つまり絶賛勉強中。。

巡り巡ってElement.prototypeを断念、、ソース修正した。どうせならこっちの方が使いやすいかも。Elementのprototypeに差し込んだ

revision: gist: 904063

bindの使い方

一番ベーシック

普通のaddEventListenerと同じ

bind(hoge, type, func);

名前空間

名前空間使ってaddEventする（unbind用）

bind(hoge, type.namespace, func);

一括addEvent

複数のイベントを一括でaddEvent

bind(hoge, {
  "click": func,
  "dblclick": func
});

unbindの使い方

全てのイベントを解除

全部消える

unbind(hoge);

指定したtypeのイベントを解除

“click”にひもづいてるイベントが全部消える

unbind(hoge, type);

指定したtype.namespaceのイベントを解除

“click.unko”のイベントのみ消える

unbind(hoge, type.namespace);

なんかでも中途半端でところどころうまく動いてないかも。

/*
 * bind, unbind
 *
 * @author    : nori(norimania@gmail.com)
 * @copyright : 5509(http://5509.me/)
 * @license   : The MIT License
 * @modified  : 2011-04-06 13:00
 *
 * HOW TO USE
 * bind event          : bind(elm, type, func) or bind(elm, {})
 * bind event.name     : bind(elm, type.name, func)
 * unbind all events   : unbind(elm)
 * unbind events(type) : unbind(elm, type)
 * unbind event.name   : unbind(elm, type.name)
 */
YOURNAMESPACE.bind = function() {
  var i, _a = arguments;
  // 一括登録
  if ( typeof _a[1] === "object" ) {
    for ( i in _a[1] ) {
      bindFunc(i, _a[1][i]);
    }
  // 単体登録
  } else {
    bindFunc(_a[1], _a[2]);
  }
  function bindFunc(type, func) {
    var i;
    type = type.split(" ");
    for ( i = 0, l = type.length; i < l; i++ ) {
      // 名前空間の指定がある場合
      if ( type[i].indexOf(".") !== -1 ) {
        type[i] = type[i].split(".");
        _a[0]["bindedNamed"] = _a[0]["bindedNamed"] || {};
        _a[0]["bindedNamed"][type[i][0]] = _a[0]["bindedNamed"][type[i][0]] || {};
        _a[0]["bindedNamed"][type[i][0]][type[i][1]] = func;
        _a[0].addEventListener(type[i][0], func, false);
      // 名前空間の指定がない場合
      } else {
        _a[0]["binded"] = _a[0]["binded"] || {};
        _a[0]["binded"][type] = _a[0]["binded"][type] || [];
        _a[0]["binded"][type][_a[0]["binded"][type].length] = func;
        _a[0].addEventListener(type[i], func, false);
      }
    }
  }
}
YOURNAMESPACE.unbind = function(elm, type) {
  var i = 0, c, d, bindedTypes, bindedEvents, bindedNamedEvents;
  // typeがない場合は全削除
  if ( !type ) {
    // 名前空間無しのイベントを削除
    if ( elm["binded"] ) {
      bindedTypes = elm["binded"];
      for ( c in bindedTypes ) {
        bindedEvents = bindedTypes[c];
        while ( bindedEvents[i] ) {
          elm.removeEventListener(c, bindedEvents[i], false);
          bindedEvents.splice(i, i + 1);
        }
      }
    }
    // 名前空間有りのイベントを削除
    if ( !elm["bindedNamed"] ) return false;
    bindedNamedEvents = elm["bindedNamed"];
    for ( c in bindedNamedEvents ) {
      for ( d in bindedNamedEvents[c] ) {
        elm.removeEventListener(c, bindedNamedEvents[c][d], false);
      }
      delete bindedNamedEvents[c];
    }
  } else
  // namespaceの指定がある場合は単体削除
  if ( type.indexOf(".") !== -1 ) {
    type = type.split(".");
    elm.removeEventListener(type[0], elm["bindedNamed"][type[0]][type[1]], false);
  // typeはあるけど名前空間の指定がない場合はtypeだけ削除
  } else {
    // 名前空間無しのイベントを削除
    if ( elm["binded"] && elm["binded"][type] ) {
      bindedEvents = elm["binded"][type];
      while ( bindedEvents[i] ) {
        elm.removeEventListener(type, bindedEvents[i], false);
        bindedEvents.splice(i, i + 1);
      }
    }
    // 名前空間有りのイベントを削除
    if ( !elm["bindedNamed"] || !elm["bindedNamed"][type] ) return false;
    bindedNamedEvents = elm["bindedNamed"][type];
    for ( c in bindedNamedEvents ) {
      elm.removeEventListener(type, bindedNamedEvents[c], false);
    }
    delete bindedNamedEvents;
  }
}

search.phpをXHR対応にする（JSONで返すようにする）

下のソースコードをsearch.phpの頭にペタっと。あ、テンプレート名とか書いてあるコメントの下です。

<?php
if (isset($_SERVER['HTTP_X_REQUESTED_WITH'])) {
    header('Content-Type: application/json');
    query_posts($query_string . '&posts_per_page=100');
    $response = array(
        'posts' => array()
    );
    while (have_posts()) {
        the_post();
        $response['posts'][] = array(
            'title' => the_title("","",false),
            'link' => get_permalink() // descriptionとか色々追加できる
        );
    }
    echo json_encode($response);
    exit(0);
}
?>

これでXHRでリクエストするとこんな感じのJSONが返ってきます。

{"posts":[{"title":"2010\u5e74\u306e\u4eba\u6c17\u30a8\u30f3\u30c8\u30ea\u30fc\u307e\u3068\u3081\u307e\u3057\u305f\u3093\uff01","link":"http:\/\/5509.me\/log\/popular-entries"},{"title":"\u30c6\u30ad\u30b9\u30c8\u30dc\u30c3\u30af\u30b9\u306e\u6b8b\u308a\u5165\u529b\u6587\u5b57\u6570\u3092\u30b7\u30f3\u30d7\u30eb\u306b\u8868\u793a\u3059\u308bjQuery\u30d7\u30e9\u30b0\u30a4\u30f3 m5simpleTextCount","link":"http:\/\/5509.me\/log\/m5simpletextcount"}....]}

JSソース

トリガーは検索ボックスに何か入力したときにしています。エンター押したときでもいいです。そのときは.submit()に$.ajax()を書くだけなのでもっと簡単です。とりあえずブログの検索はβなので、もしかするとsubmitタイプに変えるかもしれないです。

var xhr,
    keyword = $("#s"),
    searchResult = $("#searchResult").hide(),
    searchResultList = $("#searchResultList"),
    searchLoading = $("#searchLoading"),
    typeTimer;

keyword
    .click(function() {
        var _txt = this.value;
        if ( _txt || _txt.length !== 0 ) {
            searchResult.show();
        }
    })
    .keyup(function() {
        var _txt = this.value;
        // valueがなければ何もしないよ
        if ( !_txt || _txt.length === 0 ) {
            searchResult.hide();
            return false;
        }
        // 間を置かずに入力している場合はキューを削除する
        if ( typeTimer ) {
            clearTimeout(typeTimer);
        }
        if ( xhr ) {
            xhr.abort();
        }
        // typeTimerでkeyupのする度にリクエストするのではなくて
        // 350ミリセカンド以上間があいた場合にリクエストする
        typeTimer = setTimeout(function() {
            searchResultList.html("").hide();
            searchLoading.show();
            searchResult.show();
            xhr = $.ajax({
                // search.phpではなくて / に投げる（WPの検索仕様
                url: "/",
                // 検索クエリを投げる
                data: {
                    s: _txt
                },
                // GETでいいねん
                type: "GET",
                // jsonで投げるねん
                dataType: "json",
                error: function() {
                    // errorのときのsomething
                },
                success: function(json) {
                    searchLoading.hide();
                    var _posts = json.posts,
                        _postsLen = _posts.length,
                        i;
                    if ( !_posts || _postsLen === 0 ) {
                        searchResultList.append("<li>なにもねーわ</li>");
                    } else {
                        for ( i = 0; i < _postsLen; i++ ) {
                            searchResultList.append(
                                "<li><a href=\"" + _posts[i].link + "\">" + _posts[i].title + "</a></li>"
                            );
                        }
                    }
                    searchResultList.show();
                }
            });
        }, 350)
    });

なんとこれだけで実装できたっていう話でしたー。本文めっちゃ短い！手抜きの記事ですなぁ。おかしいなぁ、本当なら見た人みんながあれ！簡単！実装してみたい！っていうような内容になるはずやったのに・・・と思ってコメントを少し入れておきました。。

思いたったのが4月1日のAM1時過ぎ、今の状態になったのは4月1日のAM3時前くらいです。

今回は以下のポイントを重要と考えました。

• 文字は大きく
• 記事だけに集中できる
• シンプルイズゴールデン
• 基本的に記事を読むにあたってブログ側で提供するUIは必要ない
• 無駄な待ち時間は発生させない（外部サービスは使わない）
• 元のHTMLは極力そのまま使う（時間をかけたくなかったため）

きれいなデザインのブログには憧れたりするわけですけども、デザインスキルなんか皆無に等しいわけで、僕に出来ることは、「出来る限りムダな情報がない読みやすい」アーカイブを設計することだけでした。

諸々端折ってまとめると、「色々なブログを毎日見てるけど、その時に生まれた不満を全部解消した形にしました（ただし自分の中で）。」

サイトを訪れてくれているユーザーの事も考えないといけないかもしれないですが、自分のブログの一番のユーザーってやっぱり自分自身なんですね(*1)。だから自分で一番読みやすい形にしようと。

そういう流れから、ソーシャルサービスへのリンクとかカウンタも全部取ってしまいました。

とは言え、各記事へのアクセシビリティは現段階で最低なので、それはなんとかしたいですけども。あとやってることは全部エクスペリメントなので、もっと読みやすい形式みたいなものがあれば躊躇なく移行すると思います;)

*1) 俺の方がヘビーユーザーだぜ！という方がいたらごめんなさい

http://macthemes.skype.com/

Mac限定なんですけど、カスタムチャットスタイルを作って応募すればMacBook AirとかiPadとかもらえるで！っていう内容です。

で、そこはどうでもよくて！

このコンテストでダウンロードできるファイルに、シミュレータが入ってるんですね。

これが超便利で、スカイプのチャットスタイル作るのには必須な感じなので、このページがいつまであるか分からないですけど、早いうちにダウンロードしておいたほうがいいと思います。

↑こういうのが入ってる

SkypeのスタイルはHTML5、CSS3とJavaScriptが使える環境なので、結構面白いです。

あと、14日くらいしかないみたいですけど、ちょっと触れば割と面白いことに気づくはずなので、いいのが出来たら応募してみればいいんじゃないでしょーか。

なるほど把握しました。こういうことですか？（某GAZINEから拝借）

というわけで例によってプラグインにしました。

<input type="checkbox" name="checkbox[]" value="hoge">hoge
<input type="radio" name="radio[]" value="fuga">fuga

これをlabel要素で囲って

<label><input type="checkbox" name="checkbox[]" value="hoge">hoge</label>
<label><input type="radio" name="radio[]" value="fuga">fuga</label>

ってするだけですよね。チェックボックスのラベルっぽいところをクリックして文字選択になったときのあの感じ・・・！

サンプル見てもらえば何となく伝わると思います

下記のエントリも併せてどうぞ（セットになってます）
スクロールするまで画像を読み込まない（はずの）Lazy Loadについて

ダウンロード

ダウンロードはgithubから

使い方とかをざっくりと

対象にしたい画像に実行するだけです。

$("img").m5LazyDisplay();

本当に

ただのエフェクトだけなんで

HTTPリクエストを減らすために、画像の遅延読み込みをすると噂のLazy Loadっていうプラグインがあって、結構色んなサイトで使われているのを見るので、一言言っとくか的な感じで書こうとしたらいつからかプラグインページに以下の注意書きが追加されてた。

Lazy Load is currently not usable. It does not work with the latest browsers as expected. I have currently no time updating the code myself. Patches are always welcome. If you find a solution just fork and send a pull request. Thanks!

via: Lazy Load Plugin for jQuery

新しいブラウザだと期待した通りの動きをしない、というか遅延読み込みが出来ないから使う意味がないっていう感じです。むしろHTTPリクエストを実質減らせないどころか増やすので今現在使うのはとても微妙な感じです。増やすって言っても表示後にリクエストするんで、ちょっと違いますけど。

というか昔はできてたんかな・・・その辺まで調べきれてないのでアレです。。

何がどうなっているか

とりあえず現状ChromeとFirefoxは以下キャプチャのように2回リクエストしよります。

初回リクエスト

遅延表示をするはずの画像も全て読み込んでいる

キャッシュをオフにしているときにページ下部までスクロール

対象全ての画像をもう一度リクエストをしている（キャッシュがないので200）

キャッシュがオンでページ下部までスクロール

こっちは304やけど表示には時間がかかる

原因は？

Lazy LoadのアイデアはYUIのImageLoderに相当しますが、そもそもこれらが何をしているかと言うと、例えばこんな画像がHTMLにあったとして

<img src="./images/hoge.jpg" alt="hogemage">

ページをロードしたときに、表示エリアになければsrc属性を空にして表示しないっていうのをやってます。

<img src="" alt="hogemage">

早い話、DOM Readyの時点で画像のリクエストは走っているので、その後src属性を空にしてもとき既にお寿司で、スクロールして表示したときにsrc属性をつっこんだらまたリクエストがっていう流れ。

ちなみにソース(jquery.lazyload.js)は下の部分

src属性の削除

if (settings.placeholder) {
  $(self).attr("src", settings.placeholder);
} else {
  $(self).removeAttr("src");
}

src属性の復帰と表示

$(self).one("appear", function() {
  if (!this.loaded) {
    $("<img />")
      .bind("load", function() {
        $(self)
          .hide()
          .attr("src", $(self).attr("original"))
          [settings.effect](settings.effectspeed);
          self.loaded = true;
      })
      .attr("src", $(self).attr("original"));
    };
});

というわけで

Lazy Loadの作者も言ってますけど、現状使う意味はない、というか無駄が多くなるので、無駄がないプラグインを作りました。

画像の遅延表示エフェクトを与えるだけのm5LazyDisplay

簡単に調べたメモ。特に進展はないよ。

早い話jQueryのaddClassやremoveClass、hasClassっていうメソッドをネイティブに実装するからみんな楽朕っていうやつです。

• WHATWG – HTML5 – 2.8.3 DOMTokenList（リンク先修正しました
• HTML5 classList API
• classList (DOMTokenList) の実装状況

何が出来るの

var div = document.getElementById("unk0");

div.classList.add("kusai"); // classにkusaiを追加
div.classList.remove("kusai"); // classからkusaiを削除

div.classList.toggle("kusai"); // kusaiを付けたり取ったり

if ( div.classList.contains("kusai") ) { // classにkusaiがあればtrue、逆はfalse
  // くさければ
} else {
  // くさくなければ
}

今まではめんどくさいけど、一旦取得して正規表現で判定してとか、replaceで削除してとかそういった手間が一切なくなるっていうやつです。

実装状況

IE9はちょっと手元になかったので見れてないですけど

• Firefox3.6以降
• Chrome10.0.648.126 (Win
• Chrome9.0.597.107（Mac

で使えるっぽいです。つまりまだちょっと早い。Mobile Safari（iOS4.2）も当然まだ使えないです。

一応作ったサンプル置いときます
使えるブラウザは上のやつです。なんかどれくらい差があるんやろー思ってそういう感じにしたんですけど、よくわからんすね

classListとjQueryのメソッドの比較

jQueryだと実装されてるので、まあそういう感じだということで把握しました。もちろんjQueryはネイティブで本来やる流れを吸収してくれてるので、classListのほうが早いよね、便利やでっていうことです。

あと大きな違いは、classListはひとつのDOMにしか使えないのに対してjQueryのメソッド（hasClass除く）は複数のjQueryオブジェクトに使えるっていうことですね。吸収してくれる

classList

var div = document.getElementById("unk0");

div.classList.add("kusai"); // classにkusaiを追加
div.classList.remove("kusai"); // classからkusaiを削除

div.classList.toggle("kusai"); // kusaiを付けたり取ったり

if ( div.classList.contains("kusai") ) { // classにkusaiがあればtrue、逆はfalse
  // くさければ
} else {
  // くさくなければ
}

jQuery

var div = $("#unk0");

div.addClass("kusai"); // classにkusaiを追加
div.removeClass("kusai"); // classからkusaiを削除

div.toggleClass("kusai"); // kusaiを付けたり取ったり

if ( div.hasClass("kusai") ) { // classにkusaiがあればtrue、逆はfalse
  // くさければ
} else {
  // くさくなければ
}

• カプセル化する（これだけやればOK
• jQuery.noConflictを使う
• $をjQueryに置き換える
• jQueryを使わない
• jQueryだけを使う

カプセル化する（これだけやればOK

プラグインソースを

(function($) {
  // hogehoge
})(jQuery);

で囲むだけ。ソースコードは // hogehoge のところに入れてください。これは簡単に言うと、(function($) { })(jQuery); に囲まれた中では $ = jQuery として扱われるのですね。この中はソースコードの隠蔽が行われていて外からはよく見えなくなっているので、他のライブラリと干渉することもありません。

あとクラス振るとか、しましまテーブルとかそういう簡単なやつは自分で書いてると思いますが

$(function() {
  // hogehoge
});

こんなやつの中に書いてると思いますけど

jQuery(function($) {
  // hogehoge
});

こっちに変えてください。こっちは以前紹介したと思いますけど、そもそも

$(function() { });

っていうのは

$(document).ready(function() { });

の簡易版になってて（ソースコードが短くてすむ）、これの$をjQueryに置き換えたものが

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

でさらに短く戻して

jQuery(function($) { });

になるというわけです。

jQuery.noConflictを使う

jQueryが出た当初はこれがよく使われてましたなぁ

var $j = jQuery.noConflict();
$j("hoge").addClass("hage");

つまり$を$jと置き換えるんですね。

$をjQueryに置き換える

超手間がかかりますが $ を jQuery に置き換えていきます。え？一括置換すればいいやん、とか思ってる人はちょっと気をつけてください。正規表現とかjQueryの属性マッチングでも$は使われています。

一括置換したら動かなくなった、っていうのはよくありがちな話っぽいですよ。

jQueryを使わない

なんてことはないです。つまりjQueryを使わなければ干渉する心配もないのです。

jQueryだけを使う

その逆もその通りｄ（ｒｙ

AjaxでJS含んだページをそのままロードするとDOMに追加した時点で実行しよるんで、それを回避するためのやつです。Autopagerizeを参考にしたと思います。

ついでに取得したHTMLの走査方法ですが、そのまま$(html)とかにすると、一番上のwrapperとかそういうdivだったりする要素が取得できないので、一旦divをかませておきます。

Ajax部分のソースコード

$.ajax({
  url: "hoge.html",
  type: "GET",
  success: function(html) {
    // 文字列で取得したデータを整理する
    html = html.replace(/<script(?:[ \t\r\n][^>]*)?>[\S\s]*?<\/script[ \t\r\n]*>|<\/?(?:i?frame|html|script|object)(?:[ \t\r\n][^<>]*)?>/gi, "");
    var _div = $("<div>" + html + "</div>");
    // 取得したHTMLの走査は_div.find("a")のようにする
    // hogehoge
  }
});

コピペ用

html = html.replace(/<script(?:[ \t\r\n][^>]*)?>[\S\s]*?<\/script[ \t\r\n]*>|<\/?(?:i?frame|html|script|object)(?:[ \t\r\n][^<>]*)?>/gi, "");

┏━┳━┳━┓
┃０┃１┃２┃
┣━╋━╋━┫
┃３┃４┃５┃
┣━╋━╋━┫
┃６┃７┃８┃
┗━┻━┻━┛

m5GetElementPosのサンプル

返す数値は、実際returnで返ってくるわけじゃないんです。指定した要素にjQuery.dataで”ElementPos”というプロパティに書きこんでます。

ダウンロード

ダウンロードはgithubからどぞー

使い方とかをざっくりと

こんな感じで取れます。

$(target)
  .m5GetElementPos()
  .click(function() {
    alert($.data($(this), "ElementPos"));
    return false;
  });

または、コールバックでも使えます。

$(target).click(function() {
  $(this).m5GetElementPos({
    returnNumber: false,
    callback: function() {
      alert($.data(this, "ElementPos"));
    }
  });
  return false;
});

コールバック関数ではcallback.callしているので、thisはm5GetElementPosを実行した要素になります。

オプション

そんな感じで

バグとかあれば教えてください

jQselectableにdisabled・enabledメソッドを追加しました。
ただし利用できるのは、対象selectable要素ひとつに対してです。複数個ある場合、任意に指定して利用します。

基本はひとつのselectableに実行できます

var unko = $("#unko").jQselectable();
$("#unkoBtnDisabled").click(function() { unko.disabled(); });
$("#unkoBtnEnabled").click(function() { unko.enabled(); });

複数のselectボックスにselectableをまとめて実行している場合

複数個のときは面倒くさいですけど、disabled・enabledにしたい要素を指定します。

var unko = $(".unko").jQselectable();
$("#unkoBtnDisabled").click(function() { unko[1].disabled(); });
$("#unkoBtnEnabled").click(function() { unko[1].enabled(); });

僕はマンガがめっちゃ好きなわけなんですけど、イラストレーターの友だちと大友克洋ネタで盛り上がって、大友風の似顔絵描いてって言ったら本当に描いてくれたっていう。

できたの見て超興奮したっすよ。まだ興奮してるけど。。

背景で力尽きたらしくｗ白かったのでなんかそれっぽい背景と影足してiPhone壁紙サイズにしました。気にしなければ超かっこいい壁紙として使えるです。（ただしおれ）

それにしてもかっこいいわー・・・（イラストが）

くるくる と ぼいんぼいん

あ、せっかくなのでCSS3アニメーションをおさらいしましょう！（今おもいついたから強引につかったとこだけ）

CSS3アニメーションのおさらい

ご存知の通り、アニメーションは今のところWebkitだけで実装されいるので、サンプルはWebkit系ブラウザでみてください。

ざっくり書いたので、説明していない項目もあるし、間違いあるかも。あると思います。指摘してください。草稿しっかり読めっていう話なんですけど・・・ざっくりしか読んでません

W3CのWorkingDraft – CSS Animations Module Level 3

草稿にはもちろんprefixの”@-webkit-”は含まれてません。

Keyframes

基本的にWebkit用に”@-webkit-”のprefixを付けます。

@-webkit-keyframes hoge {
}

のように、hogeのところにアニメーション名を入れて定義します。Keyframesの指定方法は

@-webkit-keyframes hogefuga {
  0% { hoge }
  50% { fuga }
  100% { piyo }
}

みたいに、アニメーションを細かく%で指定する方法や

@-webkit-keyframes hogepiyo {
  from { hoge }
  to { fuga }
}

みたいに、fromとtoで指定する2つの方法があります。

Keyframesは、下記のように”-webkit-transform”やopacity、top、leftなど数値を伴うCSSプロパティが使えます。background-colorなどの色も可。

@-webkit-keyframes rotate {
  0% { -webkit-transform: rotate(0); }
  100% { -webkit-transform: rotate(360deg); }
}

@-webkit-keyframes fade {
  0% { opacity: 1; }
  50% { opacity: .2; }
  100% { opacity: 1; }
}

Animation behavior

どういうアニメーションをするかをKeyframesで指定しておいたので、実行する環境を用意します。

いくつかあるのですが、ここでは”duration”, “timing-function”, “count”, “name”の指定方法だけ解説しておきます。対象要素にbehaviorプロパティを割り振ります。

duration

durationは”○s”で指定、1以下は0.8や.8のように秒で指定します。デフォルトは0。

webkit-animation-duration: .8s; 

timing-function

jQueryの.animate()メソッドで言うところのeasingです。

ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , )

via: The ‘animation-timing-function’ Property

の6つが利用できます。デフォルトはease。

-webkit-animation-timing-function: linear;

iteration-count

実行回数を指定できます。単純に数字で指定でき、リピートしたい場合は、infiniteを指定します。デフォルトは1。

-webkit-animation-iteration-count: infinite;

name

実行するKeyframe名を指定します。これが指定されているとアニメーションが実行されます。

div.cssloading.justLoading {
  -webkit-animation-name: fade, rotate;
}

CSS3 Loading

さらっとおさらいしたところで、ローディングアイコンを書いてみましょう。本当はこっちメインだったのに、もう手抜き。説明はソース見てくださいまし。

Circular

まずは超ベーシックはくるくる回転タイプ。

CSS loader – kurukuru – - jsdo.it – share JavaScript, HTML5 and CSS

アニメーション以外

div.cssloading {
  width: 48px;
  height: 48px;
  position: relative;
}

  div.cssloading span {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    display: block;
    width: 10px;
    height: 10px;
    position: absolute;
  }
  div.cssloading span.loadingCircle1 {
    top: 3px;
    left: 19px;
    background: #000;
  }
  div.cssloading span.loadingCircle2 {
    top: 7px;
    left: 30px;
  }
  div.cssloading span.loadingCircle3 {
    top: 19px;
    left: 35px;
  }
  div.cssloading span.loadingCircle4 {
    top: 30px;
    left: 30px;
  }
  div.cssloading span.loadingCircle5 {
    top: 35px;
    left: 19px;
    background: #CACACA;
  }
  div.cssloading span.loadingCircle6 {
    top: 30px;
    left: 8px;
    background: #979797;
  }
  div.cssloading span.loadingCircle7 {
    top: 19px;
    left: 3px;
    background: #676767;
  }
  div.cssloading span.loadingCircle8 {
    top: 7px;
    left: 8px;
    background: #343434;
  }

アニメーション該当箇所のみ

/* 回転する name: rotate */
@-webkit-keyframes rotate {
  0% { -webkit-transform: rotate(0); }
  100% { -webkit-transform: rotate(360deg); }
}
/* フェードエフェクト name: fade */
@-webkit-keyframes fade {
  0% { opacity: 1; }
  50% { opacity: .2; }
  100% { opacity: 1; }
}

/* アニメーションプロパティのセット */
div.cssloading {
  -webkit-animation-duration: .8s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
}
/* classに"justLoading"が付いているときは
"fade", "rotate"のアニメーションを行う */
div.cssloading.justLoading {
  -webkit-animation-name: fade, rotate;
}

Horizontal

次は横にぼいんぼいんはねる玉っぽいの

CSS loader – boinboin – - jsdo.it – share JavaScript, HTML5 and CSS

アニメーション以外

div.cssloading {
  width: 200px;
  height: 40px;
  position: relative;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: ease-in;
  -webkit-animation-iteration-count: infinite;
}
div.cssloading.justLoading {
  -webkit-animation-name: move, bound, fade;
}

  div.cssloading span {
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    left: 80px;
    background: #000;
  }

アニメーション該当箇所のみ

/* ぼいんぼいん name: bound */
@-webkit-keyframes bound {
  0% { -webkit-transform: scale(1.5, .5); }
  10% { -webkit-transform: scale(1, 1); }
  25% { -webkit-transform: scale(.5, 1); }
  50% { -webkit-transform: scale(1.5, .5); }
  60% { -webkit-transform: scale(1, 1); }
  75% { -webkit-transform: scale(.5, 1); }
  100% { -webkit-transform: scale(1.5, .5); }
}

/* 横移動 name: move */
@-webkit-keyframes move {
  0% { left: 0px; }
  10% { left: 70px; }
  25% { left: 80px; }
  35% { left: 70px; }
  50% { left: 0px; }
  60% { left: -70px; }
  75% { left: -80px; }
  85% { left: -70px; }
  100% { left: 0px; }
}

/* アニメーションプロパティのセット */
  div.cssloading {
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: ease-in;
  -webkit-animation-iteration-count: infinite;
}
/* classに"justLoading"が付いているときは
"fade", "rotate"のアニメーションを行う */
div.cssloading.justLoading {
  -webkit-animation-name: move, bound, fade;
}

そんなわけで

ローディングアイコンメインのはずが、かぶったからおさらいメインになったという話。

console.logとかdebugって開発してるとき便利ですけど、納品時に消すのを忘れたりして、うっかりconsoleに

unko

とか表示されたら死ぬしかないですよね。

消したやつ納品して後で改修とかになったとき、前のconsoleは当然ないわけで、面倒くさいなと思って。

下記のコードをソースファイルの頭に貼り付けておいて
頭の「window.console.debugMode」を「true」にすればconsole.logが動きます。それだけです。これなら、元のコードも変更せず、debugModeを切り替えるだけで楽々デバッグ。

// デバグモードの切り替え
window.console.debugMode = false;
// console.logのプチ整形
window.console._log = window.console.log;
window.console.log = function(log) {
  if ( window.console.debugMode && window.console )
    console._log.apply(this, arguments);
}

ところで、普段はconsole.debugを使ってるのですが、debugだと当然行番号が、拡張したとこになってしまいまして・・・debugでも使えるコード、ご存知の方いれば教えてください＞＜

追記

Twitterで@azu_reさんにFirebugでの対応方法を教えてもらいました。

// http://d.hatena.ne.jp/javascripter/20080825/1219686109
window.console.debugMode = true;
// console.debug
window.console._debug = window.console.debug;
window.console.debug = function(log) {
  if (window.console.debugMode && window.console) {
    // Firebugだけ
    window.console.notifyFirebug(arguments, "debug", "firebugAppendConsole");
  }
};

– http://jsfiddle.net/daAGM/

対象はトップページ等と記事に表示するOGPの切り分け。Custom Field GUI Utilityの使い方も超簡単に書いときます。情報足りないかもやけど。

概要としては、記事投稿ページにカスタムフィールド

• meta description（og:descriptionと共通）
• meta keywords
• meta og:image

を追加します。記事ページでは追加したカスタムフィールドに入力されたテキスト・URLにしたがって下記のようなmeta要素がはきだされます。他のページはデフォルトの内容が表示されます。

<meta property="og:type" content="article">
<meta property="og:site_name" content="hogehoge">
<meta name="keywords" content="hogehoge">
<meta name="description" content="hogehoge">
<meta property="og:title" content="hogehoge">
<meta property="og:url" content="記事のURL">
<meta property="og:description" content="hogehoge">
<meta property="og:image" content="画像パス">

Custom Field GUI Utilityのダウンロードとインストールまで

Custom Field GUI Utilityからプラグインソースをダウンロード、解凍すると中に入っている

• conf-common.ini
• conf-page.ini

は今回使わないので、中身全部削除しておいてください。
編集するのは、conf-post.iniです。

conf-post.iniの内容を以下に書き換え、WPのプラグインディレクトリにプラグインフォルダごとアップロードしたのち、Custom Field GUI Utilityを有効化しておきます。

[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

[cf_ogimage]
fieldname = OGP用画像
type = imagefield
class = post page
size = 35
sample = 画像パス（abspath）をメディアダイアログかURLで指定する

ここまでやると、記事作成画面に下図のようなカスタムフィールドが表示されます。

header.phpに追加する

次に、header.phpを編集、以下のソースをぺたっと。All in One SEO Packとか使ってないので分かりません。これやるときは使うのやめて、Custom Field GUI Utility一本にしてくださいｗ

<?php /* typeとsite_nameは共通で入れておく */ ?>
<meta property="og:type" content="blog">
<meta property="og:site_name" content="<?php bloginfo('name'); ?>">

<?php /* ここから下記事 */ ?>
<?php if ( is_singular() && have_posts() ) : while ( have_posts() ) : the_post(); ?>

  <?php /* ただのmeta keywordsとdescription */ ?>
  <meta name="keywords" content="<?php echo post_custom('cf_keywords'); ?>">
  <meta name="description" content="<?php echo post_custom('cf_description'); ?>">

  <?php /* ここからmeta ogp */ ?>
  <meta property="og:title" content="<?php wp_title('', true); ?>">
  <meta property="og:url" content="<?php the_permalink() ?>">
  <?php /* og:descriptionはdescriptionと同じものを使う */ ?>
  <meta property="og:description" content="<?php echo post_custom('cf_description'); ?>">
  <?php /* og:imageがカスタムフィールドで指定されている場合だけ下記入る */ ?>
  <?php if ( post_custom('cf_ogimage') ) { ?><meta property="og:image" content="<?php echo post_custom('cf_ogimage'); ?>"><?php } ?>
  
<?php /* ここから下記事以外（トップページなど） */ ?>
<?php endwhile; else: ?>

  <?php /* ただのmeta keywordsとdescription */ ?>
  <meta name="keywords" content="デフォルトキーワード">
  <meta name="description" content="<?php bloginfo('description'); ?>">

  <?php /* ここからmeta ogp */ ?>
  <meta property="og:title" content="<?php wp_title('', true); ?>">
  <meta property="og:url" content="<?php the_permalink() ?>">
  <meta property="og:description" content="<?php bloginfo('description'); ?>">
  <meta property="og:image" content="デフォルトOG画像がある場合はなんかいれとく">
<?php endif; ?>

というわけで、これだけです。このブログは実装してないんですけど・・・！

一応、幅広く対応できるんかな的な感じです。詳しいことはわかってないので、もっといい方法あればコメントで教えてください。

各社の技術仕様

ドコモ（3gp、音声はAAC

MP4対応iモーションコンテンツ仕様

AU（3gp,3g2、音声はAAC、ファイル容量1.5MBまで

EZムービー

ソフトバンク（3gp、ファイル容量300KB以内、音声はAMR

ムービー　技術資料

※ さらにAUの動画はparam要素で実際のデータサイズを入れないとだめ。

エンコードのソフト

無料のツールで試したところ、ドコモ用とAU用はどこでも！ケータイ動画というソフトでいけたけど、音声のAMR出力ができなかったもんで、ソフトバンクがだめだった。

探してたらWoopie Desktopの動画変換ツールを使えばなんでも対応できるっぽい雰囲気だった。Woopie最強説

HTMLの書き方の例

ドコモ

<object declare id="ID" data="動画のURL" type="video/3gpp">
<param name="count" value="0" valuetype="data" />
</object>
<a href="#ID">動画のタイトル</a>

AU

<object data="動画のURL" type="video/3gpp2" copyright="no" standby="動画のタイトル">
<param name="disposition" value="devmpzz" valuetype="data" />
<param name="size" value="動画のデータサイズ（バイト）" valuetype="data" />
<param name="title" value="動画のタイトル" valuetype="data" />

ソフトバンク

<a href="動画のURL">動画のタイトル</a>

色々オプション付けてもいいけど、とりあえず公開時は全部とったろーと思いまして。最小構成のイメージビューアなjQueryプラグインです。その場でチラッと見せたいときに使えるかも。

高機能なやつは探せばいくらでも出ると思うので、たくさん機能ほしい人はそっち使えばいいと思います。

サンプル

ダウンロード

ダウンロードはgithubからどぞー

必要なファイルを読み込む

jQueryとm5ImageViewer.js、m5ImageViewer.cssを読み込みます。

<link rel="stylesheet" href="m5ImageViewer/css/m5ImageViewer.css">
<script src="js/jquery.js"></script>
<script src="js/m5ImageViewer.js"></script>

任意の要素に対して実行する

画像を指定したa要素にimg要素が入っている要素に対して実行します。これ以外の要素構成は想定していません。

HTML

<a class="m5ImageViewer" href="http://farm6.static.flickr.com/5297/5428556190_6b17a2dddc_m.jpg">
  <img src="http://farm6.static.flickr.com/5297/5428556190_6b17a2dddc_t.jpg">
</a>

JS

jQuery(function($) {
  $("a.m5ImageViewer").m5ImageViewer();
});

オプション

いまのところオプションは画像拡大時のdurationだけです。コールバックすらありませんよ

捕捉

特に特別な機能があるわけでもないし、便利かっていうとそうでもないんですけどね。。

「:unkomorimori」っていうセレクタを作ってみようっていうそういう話です。簡単です。まあunkomorimoriなんてふざけたセレクタなんで、きっと中身はunkoでいっぱいなんでしょう。

結局やってることってfilterと同じような感じなんですけど

<div>
  <p>うんこうんこうんこうんこうんこうんこ</p>
</div>
<div>
  <p>うんこ</p>
</div>
<div>
  <p>うんこうんこ</p>
</div>
<div>
  <p>うんこ</p>
</div>

なんかうんこって書いてあるdivがたくさんありました、と。後から気づいたんですけど、これdiv要らないですね。pだけでいい・・・でJSとしてはセレクタの記述をのぞけば

jQuery("div:unkomorimori").css("background", "#89640d");

これだけです。:unkomorimoriの基準は対象要素内で「うんこ」が3回以上出てくるかどうかです。出てきた要素だけを返します。ちなみにfilterでやった場合はこんな感じ。

カスタムセレクタを使う利点は、何回も同じfilter書くときとか、めんどいんでじゃあセレクタでやりましょうか、ってなる感じですね。気をつけないといけないのは、今回の書き方は全てのdiv要素の中身を文字列で取得した上で、正規表現使って「うんこ」を探してるんですけど、処理的にはうんこだけにくそ重いっていう点ですね。うまく落ちたところで、あ、うんこだけに落ちたところで、この辺で。

$("<img src='hogehoge.jpg' />").load(function() {
  alert("width: " + $(this).width() + "\nheight: " + $(this).height());
});

とかやると高さと幅を取得できたりできなかったりするので、.load()に置き換わるようなやつ書いといた。単純に置き換えるだけ使えるはずーだめだった

$("<img src='hogehoge.jpg' />").m5ImgLoad(function() {
  alert("width: " + $(this).width() + "\nheight: " + $(this).height());
});

結局のところ、.load()メソッドで取れてた

$("<img src='hogehoge.jpg' />").load(function() {
  alert("width: " + $(this).width() + "\nheight: " + $(this).height());
});

↑これみたいに、width()、height()メソッドを使うと動的に呼び出した画像に対しては0で返されるので、、、

$("<img src='hogehoge.jpg' />").load(function() {
  alert("width: " + $(this).attr("width") + "\nheight: " + $(this).attr("height"));
});

↑画像の属性から取ればいける感じです。これはどんな場合でもいけるんかなぁー

動作サンプル

サンプル
左のボタンはただの.load()メソッドでこれだと高さと幅が取れないけど、右の.m5ImgLoad()メソッドを使えば高さと幅がとれとりますね

img.completeを使ってみたっすよ。

ダウンロードとか

ダウンロードとかソースコードはgithubからどぞー

https://github.com/5509/m5ImgLoad

対応ブラウザ

クロスブラウザ的なのはどうでしょう。手元のIE6～8、Safari5、Fx3、Chrome9、Opera10は問題なかったけど・・・バグとかあったらフォークして教えてください^ω^

冗談はさておき、僕のセッションではUIの設計からjQueryでの実装までをフローとコードで解説しようと思っています。対象は中級者くらいになると思いますが、なるべくわかりやすく説明しますので、よろしくお願いします

<イベント名>

第5回リクリセミナー 『明日からjQueryがもっと好きになる。』

<日時>

2/20（日） 15:00〜18:00

<場所>

デジタルハリウッド大阪校 地下セミナールーム
（大阪市北区西天満6-5-17 デジタルエイトビル地下1F）

<参加費>

一般：4,000円
デジハリ生：無料（※学生証をお持ちください。）

※スポンサーの協賛、参加者の人数に応じてディスカウント予定です。
講師陣の書籍、『jQuery逆引きマニュアル』を持参し、受付で提示していただきますと500円割引をいたします。
※対象は一般の参加者のみとなります。

<定員>

80名

<参加方法>

セミナー特設ページから参加表明して下さい

URL：http://www.re-creators.jp/vol5/

<懇親会>

セミナー終了後、18:30から開催予定。

via: 2/20（日）第5回リクリセミナー「明日からjQueryがもっと好きになる。」参加受付開始！

この辺Flashだとflvだったりして再生しにくかったりするのが、HTML5だとmp4とか割と再生しやすいファイルになるので便利かも。ChromeとかSafariで実行するのがおすすめです。

ブックマークレット

以下のリンクをブックマークバーにドラッグして、YouTubeのサイトでクリックするだけです。クリックすると動画ファイルそのものが表示されるので、名前を付けて保存的なアクションで保存できます。

動画のファイル名は常に「videoplayback」になるので適当に変更したほうがよさそう。「WEBM」バッジがついている動画は形式がWEBMになっているのですがそのまま拡張子なしでダウンロードすると再生できないので、「.webm」の拡張子をつけるといいみたいです。.webmで保存するとVLCで再生できます。

ブックマークレット：HTML5動画からダウンロード

ためしに

バッジが表示されているときだけブックマークレットが有効です。以下の動画ページで実行してみてください。（要HTML5 試用版の設定：設定していない人は下に説明あります）

http://www.youtube.com/watch?v=2-owTwP1l7k

HD(高画質動画)動画をダウンロードするには？

720のサイズで再生している状態でブックマークレットを実行すれば高画質動画をダウンロードできます。

HTML5 試用版未設定の人

いちおう書いておきます。HTML5で表示するにはまず

http://www.youtube.com/html5

にアクセスして「HTML5 試用版を有効にする」をクリックします。

表記が「HTML5 試用版が有効になっています。」に変わります。

表示できるものとできないものがあり、できるものの場合は動画ページを表示したとき以下の画像のように HTML5 のバッジが表示されます。

それにしても・・・

ちろるがかわいい・・・じゃなかった、ソースも解説がいらないレベル・・・

javascript:location.href = document.getElementById('video-player').getElementsByTagName('video')[0].src;

申し込みページ（申し込みは終了しました）

＜モニター応募要項＞
●応募受付期間：2010年12月28日（火）～2011年1月11日（火）
●募集予定人数：最大30名（モニター事務局での選考とさせていただきます）
●応募方法：
最下部の「応募する」ボタンよりエントリーください。
モニター当選の方へは、応募受付終了後別途メールにて詳細をご連絡します。
●モニター実施予定期間：2011年1月14日（金）～2011年2月28日（月）（約1ヶ月間半）
●モニター品：『jQuery逆引きマニュアル　Webデザインの現場で役立つ基本と実践』電子書籍版（PDF形式。本文のテキストコピー不可。サンプルコードはネット上で公開中 http://www.impressjapan.jp/support/aftercare/2961）
●モニター期間中のお願い：
ブログやツイッターなどで以下のような感想・コメントを書いていただき、ぜひ読者の皆様でjQueryについての情報を共有しましょう！
◎本書のこの記事は試してみたい！
◎本書の内容をこんな風に試してみた
◎本書のこの記事は役に立ちそう
◎本書の内容をこんな風に応用した！
◎jQueryでこんなことがしたい！
◎jQueryでこんなことができた！
◎jQueryについてこんな新しい発見があった　などなど
情報共有がスムーズに行えるように、本書専用のツイッターアカウント@jQuery_Manualを設置しました。
ツイッターをご利用されている方は、ぜひこちらのアカウントのフォローをお願いいたします。
たくさんのご応募をお待ちしております！

現状で動画フォーマットがいくつか存在しますが、複数のフォーマットをサポートしたい場合は以下のように書きます。

<video controls="controls" width="352" height="198" preload="none" id="videoElm">
  <source src="hoge.mp4" type="video/mp4" id="mp4" />
  <source src="hoge.ogg" type="video/ogg" id="ogg" />
</video>

動的に書き換えるので、次のような関数用意して再生したい動画のURLを入れればよさげです。

function playMovie(mp4, ogg) {
  $('#videoElm')
    .html([ // ソースファイルをつっこむ
      '<source src="' + mp4 + '" type="video/mp4" id="mp4" />',
      '<source src="' + ogg + '" type="video/ogg" id="ogg" />'
    ].join(''));
}

playMovie(piyo.mp4, piyo.ogg);

で結局何に注意しないとあかんかっていうのは、このままだとiOSで再生ができないんですね。iOSはmp4ファイル等で再生す
るんですけど、source要素を動的につっこんでもだめな様子。。

なので以下のようになりました。
source要素を動的につっこむのではなく、素直にsrc属性に入れてるだけです。

function playMovie(mp4, ogg) {
  if ( /AppleWebKit/.test(navigator.userAgent) ) {
  // iOSのとき
    $('#videoElm')
      .attr('src', mp4); // 素直にsrc属性に書く
  } else {
  // iOS以外
    $('#videoElm')
      .html([
        '<source src="' + mp4 + '" type="video/mp4" id="mp4" />',
        '<source src="' + ogg + '" type="video/ogg" id="ogg" />'
      ].join(''));
  }
}

※ UA判定はもっと良い方法あったらそっち使ってください。

jsdo.itにはほんまにこれCanvasなん？なサンプルいっぱいありますね。あーいうの書けるようになりたいなぁとか思いつつ、jQueryばっかりさわってた僕は.animate()メソッドの便利さに取り憑かれていたので、Canvasの絵もまだ上下左右で動かすくらいしかできません。慣れが必要です。。

どうでもいい情報としてCanvasの読み方なんですけど、「キャンバス」じゃなくて「カンバス」が正しいようです。キャンバス・カンバスどっちでもよさげ。僕はキャンバスって読んでました。けどカンバスにします。

前置きはこれくらいにして、今回は次のようなカラフルな箱が延々と落ちていくっていうのを書いてみます。今回のサンプルはすべてCanvasなのでIE8以下だと見れないと思います。あとjsdo.itのサンプルをいくつか貼っているのでRSSだと表示されません。

先に参考サイト紹介してますが、いらない人は飛ばしてください。レッツカンバス！

参考サイトなど

動かす前に、そもそもCanvas自体さわったことがなかったので色々調べもってやってみました。とりあえずこれから始める人も多いと思うのでお世話になったサイトあげておきますね。あーこんな風にね的な。

HTML5.jpのCanvasページ

Canvasの超基本。メソッドのリファレンスはこっち

今更聞けないcanvasの基礎の基礎

とりあえず見とくエントリー。ボールが弾むやつとか全然理解できませんでしたけどね！

canvasでキラキラした背景を作る方法

アイデアって大事ですよね

なかにしさんのサンプルは最初に見るのにちょうどいい

canvasで遊んでみたい【その1、その2、その3、その4、その5】まであります
とりあえず星空描いてみましょうか

canvasでアニメーションする時のコツ

僕がアニメーションやるっていうときに最初に見たんですけどさっぱりでした。後からみて納得

JS + Canvas = 3D しました

3Dもできるようになりたいです・・・

Canvasで実現するカラフルな円が小さくなったり大きくなったりする背景

これも超参考にしました。重なるとことかどうなってるんかなーとか。

[HTML5 canvas] 簡単な 3D アニメーション

こんな感じにXYZ座標をあやつりたい・・・

HTML5 Canvasのブラウザによって異なる微妙な振る舞いについてまとめてみた。

ブラウザによって描画され方がちがうらしいです。気にしておかないとだめですね。

canvasが手軽にウェブで試せるアプリFirstCanvasを作ったよ

Canvasだけならjsdo.itよりもお手軽に試せます

実際になんか書いてみる

参考サイト見てテンションがあがったところで、早速実践です。

HTMLで用意するのはこれだけです。今回ソースコードの表示とサンプルにjsdo.itを利用してるので、フォークしたりできます。

<canvas id="canvas" width="300" height="300"></canvas>

まずはかく

さーさーなんか書いてみましょう！お約束の矩形描画です。これは簡単。

とりあえずうごかす

次は描いた矩形を少し動かしてみましょう。最初は簡単にsetTimeoutでいいでしょう。最初の矩形を描いたあとに、Canvas全体を塗りつぶし、その後位置をずらしてもう一度矩形を描画しているだけです。

くりかえしうごかす

つまりこれを繰り返せば動くんじゃ・・・的な発想ですね！間違ってないと思います。上から下まで動かしてみましょう。

アニメーションできた・・・！これがアニメーションといえるのかどうか・・・でも動いてるからいいでしょ。最初はこんなもんです。

アニメーションのポイント

アニメーション自体はsetIntervalで繰り返すことでも行えますが、ここでは

(function() {
  // hogehoge
  setTimeout(arguments.callee, 1000 / rate);
})();

というような書き方で実行しています。これをsetIntervalで書き直すとこんな感じ

setInterval(function() {
  // hogehoge
}, 1000 / rate);

無名関数で実行するときは、// hogehoge の部分が終わってからsetTimeoutが呼ばれるのに対して
setIntervalは // hogehoge が終わっていなくても 1000 / rateミリ秒後にもう一度 // hogehoge が実行されます。

もうひとつの違いはタイマーのクリア方法です。無名関数は関数内でreturn false;するだけなのに対して、setIntervalはタイマー変数をclearIntervalする必要があります。

無名関数

(function() {
  if ( fuga ) return false;
  // hogehoge
  setTimeout(arguments.callee, 1000 / rate);
})();

setInterval

var timer = setInterval(function() {
  if ( fuga ) clearInterval(timer);
  // hogehoge
}, 1000 / rate);

ここはその内僕が書くかもしれないし、誰かが書いてくれるかもしれないし、難しいことは考えずにとりあえずはどちらでもよいでしょう。

つづき：アニメーションのループ

次は下まで降りていったらまた上からでてくるようにしてみましょう。簡単です。

複数同時にうごかす

なんか上から下まで落ちるブロックみたいなんできました。数を増やして色もランダムにしてみましょう。難易度がいきなりあがる感じです。とりあえず同じタイミングで矩形を10個描いて落下させます。

複数個の矩形を描いて動かす

矩形がひとつと複数個あるでは対応の仕方が全然違います。ひとつの場合は、fillRectが一回だけでよかったのに対して複数個描画する場合は、その個数回fillRectする必要がありますし、個数分の矩形情報が必要です。

矩形情報の生成に Box()という関数を用意しました。

// 新しい矩形を生成する
var Box = function() {
  // サイズ、移動速度、横座標の位置、色はランダム
  this.size = randomNum(20, 10);
  this.speed = randomNum(5, 2);
  this.color = 'rgba(' + randomNum(255) + ',' + randomNum(255) + ',' + randomNum(255) + ',' + .6 + ')';
  this.basePos = {
    x: randomNum(300),
    y: 0
  }
}

ちなみにランダムな数を返す関数を作っておくと便利に使えます。

// 最小〜最大の間でランダムな数値を返す
// 最小値を省くと1〜最大値の間でランダムな数値
function randomNum(maxInt, minInt) {
  var ran = Math.random();
  if ( minInt ) {
    if (Math.floor(ran * maxInt) < minInt ) {
      return minInt;
    } else {
      return Math.floor(ran * maxInt);
    }
  } else {
    return Math.floor(ran * maxInt) + 1;
  }
}

いままではひとつだけの矩形でしたが、10個の矩形を扱います。単純にboxPoolという配列を用意して、そこに矩形の情報をつめこんでおきます。

// 矩形を生成しておく（描画はまだ
for ( var i=0; i<boxNum; i++ ) {
  boxPool[i] = new Box();
}

あとは矩形の個数回fillRectするだけです。

// 矩形毎に描画していく
for ( var i=0; i<boxNum; i++ ) {
  ctx.fillStyle = boxPool[i].color;
  ctx.fillRect(
    boxPool[i].basePos.x,
    boxPool[i].basePos.y,
    boxPool[i].size,
    boxPool[i].size
  );

  // この矩形の次の位置を決めておく
  boxPool[i].basePos.y = boxPool[i].basePos.y + boxPool[i].speed;
}

完成：複数の矩形を動かしてループ

落ちるだけだったので、最後にループさせて完成っぽいですね。仕組みは、さっきのループを応用します。矩形がcanvas外に出たら外にでた矩形を削除して、新しく矩形を生成します。つまりこれを繰り返し行うだけです。56行目〜80行目が追加・修正した部分です。

特に重要なのは56〜61行目、canvas外に出た矩形情報を取り除くところ

// 矩形がcanvas外に出たら一旦削除する
if ( thisBox.basePos.y > canvas.height ) {
  boxPool.splice(i--, 1);
  boxLen--;
  continue;
}

76〜80行目の10個以下になった場合は矩形情報を新規で追加するところでしょう。

// 矩形の数が10個以下であれば
// 新しい矩形を生成する
if ( boxPool.length < 10 ) {
  boxPool.push(new Box());
}

おわり

ちょっと駆け足でしたが、Canvasを使ったアニメーションが書けました。なんでもやってみることが重要です。やってみないことには先に進まないので、少しずつでもやってみてバリエーションが増えてくれば、そのうちぐりぐり動かせるようになるんじゃないでしょうか。インプットの先のアウトプットまでできればなおいいですね。

閉鎖するとか存続するとか話題のdeliciousですが、delicious（というかYahoo）に嫌気がさしたファウンダーが運営している（らしい）Pinboardを使い方も含めて簡単に紹介します。

deliciousと違うところ

無料じゃない

サインアップフィーが必要です。（後述）

超絶シンプル

無駄な装飾はなにもないです・・・

あとで読む

あとで読むための一時ブックマークがあります。何気に便利。

スター

重要なブックマークにはスターを。

Pinboardのサインアップ

Pinboardは無料のサービスではなく、サインアップフィーが必要です。サインアップフィーについてはフィーのページにもある通り

登録ユーザー数 * $0.001

です。早く登録したユーザーのほうが安くいいから早く登録しちゃえよ！的な。Yahooのレイオフ騒動のおかげでフィーがあがってきています・・・ｗ記事を書いてるタイミング（18日の14時過ぎ）では$8.49、僕が登録したとき（17日の23時くらい）は$7.44、レイオフ記事が発表されたときはたしか$7弱くらいでした。登録を考えてる人はお早めに。

サインアップ時にBasic account（サインアップ時にフィーが必要）かArchival account（年間$25必要）を選択します。deliciousと同じように使うならBasicで十分です。Archivalはブックマークしたページをアーカイブ化してローカル環境でも見れるようにできる？ぽいです。

有料なので、サインアップフォームの後に支払いフォームがあります。日本から使うならPaypalのほうですかね。

delicousからのインポート

インポートは超簡単です。もちろん個別プライベート設定もそのままインポートできます。

とりあえずdeliciousに登録しているブックマークをエクスポートしましょう。

Exportページへ

赤枠のチェックボックスはチェックを入れて、「Export」ボタンを押すてエクスポートファイルをダウンロードします。

次はPinboardでインポートします

インポートするファイルを選択してUploadします

インポートが完了したら完了しましたステータスになります。なんか今混んでるみたいで（ｗ）ちょっと時間かかるかもしれないですね。そのときはステータスが「Pending」になります。

インポートできた！

ブックマークレット

ブックマークレットも当然あります。いつものポップアップのやつとか同じページで移動するやつとか。

「popup with tags」と「Read later」がメインでしょうね。でもだいたいの人は下で書いてるChromeエクステンション使ったほうがいいと思います。キーボードショートカット使えますし。

ブックマーク以外の機能

まー基本的にはdeliciousと似たような感じです。Twitterに投稿したり。あ、deliciousに投稿されたブックマークをSyncする機能もありますよ。（これいるの？）

ブラウザのエクステンション・アドオン

現状Chromeなら割と便利に使えます。

Pinboard by Jacob Buck

ブラウザショートカットキーにアサインできるのが便利。Cmd+Shift+Eにブックマーク、Cmd+Shift+Lにあとでよむをあてて使ってます

インストールするとアイコンがでます

Keyboard ShortcutsをEnabledにして、ショートカットをアサインすると便利！

Cmd+Shift+Eでブックマークウィンドウをひらく

お早めに（フィーがあがるまえに）

というわけで登録を考えてる人はお早めに！

でも5月にドメインを変えたので5月からの集計です。それ以前も統合するのは主にめんどくさい的な理由でやりたくないです・・・アクセス数も全然多くないですけど、今年は初めてから今までで一番記事書いた気がする。特に12月に入ってからは14日以外の平日は毎日更新した・・・！どこかで誰かの役にたてばうれしいです

5月からの上位こんてんつ（セッション数）

1位: selectボックスをシンプルなプルダウンに拡張するjQselectable

jQselectableとしてGooglecodeで公開したタイミングでPHP SPOTさんで紹介してもらって爆発しました。いやこれ本当におすすめなんで使ったことない方はぜひ。一番おすすめです。

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

公開したのって2008年の8月なんで・・・もう2年以上経ってるんですよ。もうexValidationを公開した関係でサポートはしていませんが、色んなところで使われてるのを見ましたね。うれしかったっす。

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

これも結構古い記事なんですけどねー。今でもブックマーク数が増え続ける人気エントリーですね。でも僕はこの記事を書きなおしたい・・・All in One SEO Packとか使ってないし。。。

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

jQueryのアニメーションはほんまに便利ですなー

5位: これまでに使った20のjQueryプラグイン

最近はプラグインって決まったやつばっかりで前ほど使ってないですが、、自分で書くほうが楽しいですよ。なによりもちゃんと仕様を理解して使うっていうのは重要です。

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

これはかなりいいと思うんですけど・・・jQselectableと併用できるっていうのがポイントです。併用するのって僕くらいしかいないんですけど

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

なぜこれが・・・ページトップに移動するだけならスニペットで十分やし、これ使うくらいなら上にもあるjQuery.easing.scroll.jsつかったほうがいいですｗ

8位: jQueryのアニメーション関連いろいろまとめ

簡単に使える分いろいろ方法を知ってると色んな動きを実装できて楽しいですね！

9位: 誰が使うの？何の役にも立たないjQueryプラグイン10選

なんでこれ1位じゃないの？これ一番がんばったんやで・・・みんなにも手伝ってもらって・・・TwitterのTLはだいぶ汚しましたけど・・・ｗ

10位: クリックさせないリンク jdtRunAway.js

まさか単身くいこんでくるなんて・・・idea*ideaパワーですね。また来年も誰得ぷるぎんの続きやりますきっと。kamiyamさんがひとりで続けてくれてますし・・・ｗ

来年はjQuery以外でがんばりたい（｀・ω・´）

コードはアレなんですけど、ひょっとしてひょっとすると誰かの役に立つかもしれないので恥ずかしながら公開します。対象はちょっとだけJS書けるとかそういう人ですかねたぶん。書ける人はもっとキレイなやつ使ってるでしょうし。（もっときれいに書けとか何そのコードとかも歓迎）

紹介してるスニペットたち

• ページトップにスクロールするだけ
• テキストボックスにラベル表示するやつ
• 要素のサイズを取得するやつ
• タブきりかえるやつ
• IEで透過pngをフェードしたときに黒くなるやつ対策のshow()とhide()
• Google Analyticsのトラックイベント一括bind
• Ajaxサイトにするときに使うリンク置き換えプラグイン
• スクロール位置を取得する
• 表示領域のサイズを得る

まとめたやつのファイル

今回紹介した原文コードをまとめたものと、圧縮したものを置いておきます。

• snipets.js
• snipets_min.js

ライセンス（が気になる人へ）

WTFPLライセンスにしておくので好きなようにつかってください

ページトップにスクロールするだけ

#pageTop>aみたいな要素に適用するだけならこれコピって使うほうがいいですね。easingは使わないならswingとかに変えてください。

ソースコード

function pageScroll() {
  $('html, body').animate({
    scrollTop: 0
  }, {
    easing: 'easeInOutCirc',
    duration: 500
  });
}
$('#pageTop>a').click(function() {
  pageScroll();
  return false;
});

テキストボックスにラベル表示するやつ

↑こういう具合にラベル表示するやつ

引数にどの属性からひっぱるか指定して使います。僕はtitleを指定することが多いです

ソースコード

$.fn.inputLabel = function(attr){
  var formElms = $(this);
  for(var i=0;i<formElms.length;i++){
    var self = formElms[i];
    var parent = $(self).parent();
    
    if($(self).attr(attr) && $(self).attr(attr).length>0){
      
      parent.css('position','relative')
      
      var label = $(self).attr(attr);
      var pos = $(self).position();
      
      $(self).removeAttr('title');
      
      var insertLabel = $('<span/>')
        .attr('id','label_'+self.id)
        .append(label)
        .addClass('label')
        .css({
          position: 'absolute',
          top: pos.top + 6,
          left: pos.left + 7,
          zIndex: 100,
          color: '#666'
        });
      
      parent.append(insertLabel);
      
      if(self.value && self.value.length>0){
        insertLabel.hide();
      }
      
      insertLabel.click(function(){
        var relationInputId = this.id.replace('label_','');
        $(this).hide();
        $('#'+relationInputId).focus();
      });
        
      $(self).focus(function(){
        $('#label_'+this.id).hide();
      }).blur(function(){
        if(this.value.length<1){
          $('#label_'+this.id).show();
        }
      });
    }
  }
  return this;
}

実行例

$(hoge).inputLabel('title');

要素のサイズを取得するやつ

非表示の要素とかいちいちshow()して取得してhide()してとかめんどい

任意のタイミングで

$(hoge).m5getSize()

ってしたら

$.data(hoge, 'boxSize')

で色んなサイズが取れます

ソースコード

$.fn.m5getSize = function(options) {
  $(this).each(function() {
    var $this = $(this),
      prevBoxStyle = $this.css('display');
    
    $this.show();
    $.data($this, 'boxSize', {
      width: $this.width(),
      height: $this.height(),
      offsetWidth: $this.attr('offsetWidth'),
      offsetHeight: $this.attr('offsetHeight'),
      clientWidth: $this.attr('clientWidth'),
      clientHeight: $this.attr('clientHeight'),
      scrollWidth: $this.attr('scrollWidth'),
      scrollHeight: $this.attr('scrollHeight'),
      top: $this.offset().top,
      left: $this.offset().left
    });
    $this.css('display', prevBoxStyle);
  });
  return this;
}

タブきりかえるやつ

なんか結局自分で作ったやつが一番使いやすいっていうか、いつも同じHTML書いてればいいし楽ですよね。

HTML

こんなHTMLを用意してtabSwitchを実行するだけです。

<div class="tabArea">
  <ul class="tab">
    <li><a href="#hoge" class="active">hoge</a></li>
    <li><a href="#fuga">fuga</a></li>
    <li><a href="#piyo">piyo</a></li>
  </ul>
  
  <div id="hoge">hogehoge</div>
  <div id="fuga">fugafuga</div>
  <div id="piyo">piyopiyp</div>
</div>

ソースコード

$.fn.tabSwitch = function(options){
  
  var c = $.extend({
    defaultCondition: true,
    effect: false,
  },options);
  
  var switchEffect = {
    show: function(o){
      if(c.effect) $(o).fadeIn("normal");
      else $(o).show();
    },
    hide: function(o){
      if(c.effect) $(o).fadeOut("fast");
      else $(o).hide();
    }
  }
  
  function tabHide(o,flag){
    if(flag || !c.defaultCondition){
      $(o).each(function(){
        switchEffect.hide(this.hash);
      });
    }else{
      if($(o).hasClass("active")){
        $(o).each(function(){
          if(!$(this).hasClass("active"))
            switchEffect.hide(this.hash);
        });
      }else{
        for(var i=0;i<o.length;i++){
          if(i==0) $(o[i]).addClass("active");
          else switchEffect.hide(o[i].hash);
        }
      }
    }
  }
  
  function tabSet(o){
    $(o).each(function(){
      var anchor = $("ul.tab a",this).filter(function(){return this.hash;});
      for(var j=0;j<anchor.length;j++){
        tabHide(anchor,false);
        $(anchor[j]).click(
          function(){
            tabHide(anchor,true);
            $(anchor).not(this).removeClass("active");
            switchEffect.show(this.hash);
            $(this).addClass("active");
            $(this).blur();
            return false;
          }
        );
      }
      if(location.hash && $(location.hash,this).length>0){
        window.scroll(0,0);
        tabHide(anchor,true);
        $(anchor).removeClass("active");
        switchEffect.show(location.hash);
        $("a[href*='"+location.hash+"']","ul.tab").addClass("active");
      }
    });
  }
  
  $(this).each(function(){ tabSet(this);});
  
  return this;
}

実行例

$("div.tabArea").tabSwitch();

IEで透過pngをfadeしたときに黒くなるやつ対策のshow()とhide()

あの黒くなるのなんとかなりませんかね！単純にIEにはフェードじゃなくてshow()hide()にするだけで、使い方はfadeIn(), fadeOut()と置き換えるだけです。IE9だと黒くならないかも。そのへん未検証

ソースコード

$.fn.exShow = function(duration, callback) {
  if (!$.support.opacity) {
    $(this).show();
    if (callback && typeof callback == 'function') {
      callback.call(this);
    }
  } else {
    $(this).fadeIn(duration, callback);
  }
  return this;
}
$.fn.exHide = function(duration, callback) {
  if (!$.support.opacity) {
    $(this).hide();
    if (callback && typeof callback == 'function') {
      callback.call(this);
    }
  } else {
    $(this).fadeOut(duration, callback);
  }
  return this;
}

Google Analyticsのトラックイベント一括bind

トップページ全部のリンクに・・・とかめんどくさくてやってられません！classにgaTrackEvent、idにテキトーなやつ入れておけば自動で集計してくれます。自動なんで目安はURLなんですけど・・・

ソースコード

ところで、ひとつ前の非同期じゃないやつなんで非同期の人は_gaq.pushに置き換えてください。

$('div.gaTrackEvent').each(function() {
  var _thisId = $(this).attr('id'),
    _thisChildAnchors = $('a', this);
    
  _thisChildAnchors.each(function() {
    var _thisHref = $(this).attr('href');
    if ( pageTracker ) {
      $(this).click(function() {
        pageTracker._trackEvent('hogehoge', _thisId, _thisHref);
      });
    }
  });
});

Ajaxサイトにするときに使うリンク置き換えプラグイン

任意のリンクに対して実行するだけで

http://hoge.com/hogehoge/hoge2/

みたいな普通のリンクを

http://hoge.com/#/hogehoge/hoge2/

みたいにハッシュフラグメントリンクに置き換えます

ソースコード

$.fn.ggReplaceHrefs = function() {
  var elms = $(this);
  elms.each(function() {
    $(this)
      .filter(function() {
        return this.href.indexOf(domain) != -1;
      })
      .attr('href', $(this).attr('href').match(/^\./)
        ? $(this).attr('href')
          .replace(domain, '')
          .replace(/^\./, '#')
        : '#' + $(this).attr('href').replace(domain, ''))
      .click(function() {
        location.hash = this.hash;
        return false;
      });
  });
}

スクロール位置を取得する

スニペットにすると楽です。要素の位置を計算するときがよくあるんですけど、windowのリサイズに対応したり色々めんどうですよね。。

ちなみにサイズ取得関連は何回お世話になってるか分からないcyokodogさんの記事をいつも見てます
jQuery の位置・サイズ関連メソッドまとめ – cyokodog

ソースコード

var returnScrollTop = function() {
  return {
    y: document.body.scrollTop || document.documentElement.scrollTop,
    x: document.body.scrollLeft || document.documentElement.scrollLeft
  }
}

表示領域のサイズを得る

要はHTMLドキュメントの高さと幅に当たるところです。これもスニペットで

ソースコード

var returnClientSize = function() {
  return {
    x: document.body.clientWidth || document.documentElement.clientWidth,
    y: document.body.clientHeight || document.documentElement.clientHeight
  }
}

というわけで

便利なスニペットコードあれば教えてください！

はてなブックマークとかTwitterのつぶやくボタンはブログやサイトにあると便利ですよね。でも作るときにいちいちソース探すのも手間やし、一括一発でソースコピれるやつがあったら便利かなと思ったので一発でソース生成するやつ作りました。

URLとタイトル入れて「これでつくる」ボタンクリックでソースが表示されるのでコピって使えると思います。

今のところ対応してるのは

• はてなブックマーク
• Twitter
• Facebookのいいね
• Evernoteのクリップ
• mixiチェック
• mixiイイネ

です。必要なやつだけコピって使ってください。mixiが要るのかはアレです・・・

使い方など

1. 用途を選ぶ。WPとMTの場合はURLとタイトル必要ないです。出てきたソースをループの中に入れるだけですね
2. はてブ・Twitter・Facebookのボタンは大きいサイズも選べます（プレビューはずれるけど気にしない）
3. mixiのボタンを利用する場合は、チェックキーを取得して入力してください
   チェックキーの取得は西畑さんの記事を参考にしてください : チェックキーの取得について – to-R
4. 「これでつくる」ボタンをクリックする
5. 生成されるボタンのプレビューがみれます
6. 表示されたソースコードをコピーペーストする。タブクリックすると個別のソースコードでコピーできます

※ Evernoteも入れたかったけど項目が多くてあきらめました・・・

ジェネレータ

※ iframeで表示しているのでRSSで読んでる方は記事で見てください　:)

ジェネレータのボタンはCSS3 でボタンを作る為のテクニック、サンプル集 – CSS Lectureのサンプルボタンをそのまま使わせてもらいました・・・ｗ

IE8以下での話ですが、IE8以下でHTML5を利用するときはHTML5の要素にCSSが適用されないので、html5.jsのようなスクリプトをヘッダで読み込ませたりすると思います。

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

ちなみに僕はわざわざ読み込むのもアレなので、以下のものを毎回貼ってます。

<!--[if lt IE 9]>
<script>
var html5 = ['header', 'footer', 'section', 'article', 'aside', 'time', 'hgroup'];
// ↑使う要素を配列に入れておく
for ( var i=0, j=html5.length; i<j; i++ ) {
  document.createElement(html5[i]);
}
</script>
<![endif]-->

こんな感じでJavaScriptのcreateElementメソッドでHTML5の要素を追加すれば、CSSが使えるようになって見た目もだいたいばっちりになるんですけど・・・

jQueryで

$(hoge).append('<section>セクション</section>')

とか

$(hoge).append([
  '<section>',
    '<header>',
      '<hgroup>',
        '<h1>タイトル</h1>',
        '<h2>サブタイトル</h2>',
      '</hgroup>',
    '</header>',
    // hogehoge
    '<footer>',
      '<time datetime="hogehoge">hogehoge</time>'
      // hogehogehoge
    '</footer>',
  '</section>'
].join(''));

とか

<header id="hoge">hogehogehoge</header>

を

var hogeClone = $('#hoge');
$('body').append(hogeClone);

とか（コードの内容に意味はないです）するとCSSが適用されない訳ですよ。つまりページロード時にはcreateElementで要素を作ってるんだけど、それ以降に新しく追加されたりしたHTML5の要素にはcreateElementしてたやつは効果がないっぽい。

単純に上に書いたようなDOM操作なら、ちょっとめんどいけど

$(hoge).append(document.createElement('section'))

みたいにすればよさそう。でもAjaxでとってきたページにHTML5の要素が含まれててそいつらを追加すると、なんかどうやってもうまくいかなかった。

そんなわけでAjax使うところはHTML5の要素を入れなかったりしてます。でもAjaxなくても毎回createElementとかあほらしいし、そういう処理使う場合はHTML5の要素は使わない方がいいんじゃないですかね。
とか言いながら使いまわせるメソッドとかスニペットとかあればそれでいいのかも。

20101213 11:43 追記

対応方法と原因を曖昧にしていた（だめっぽいとかいけるっぽいとか・・・）ので、Webtech Walkerさんの記事へのリンクを追記します。
HTML5の新要素をjQueryでappendとかするとバグる件 – Webtech Walker

jQueryのappend、after等の要素追加メソッドで使うときはinnershiv.jsを利用すればだいたい大丈夫です。

まとめ

つまり何が言いたかったかというと
jQueryぷるぎんって要素をclone()メソッドでコピーしたりなんか色々DOM要素をごにょごにょしたりするやつもあったりするので（僕が作ったやつにもあるんですけど・・・）何気なく使ってる人はそういうこともあるっていう事を知っておかないと、CSSあたらへんねん！意味わからん！とかになったりしそうなので気をつけておかないとなぁーっていうことです。

これくらいはjQueryでネイティブに対応してほしいですね。。

※）jQueryというかJavaScriptですが

画像はiPhoneのiPodでアーティストを探しているところですが、同じようなUIを実装したいと思っていて、簡単に言うとスクロールに追従してくる感じなんですけど、複数要素の対応だったり、索引一覧みたいにひっかかった場合に次のタイトルがついてくる的な動きがほしかったのでつくってみました。

サンプルを見たほうが早いと思いますが、このブログのトップのようにタイトルをついてこさせたり、記事ページのようにソーシャルサービスへのリンクやメタ情報などの要素を固定できます。

このブログにも試験的に取り入れていますので確認できますが、HTML5の要素を利用しているためIE8以下では確認することができません。IE8以下での確認は一番上のサンプルでみてください。

• 動作サンプル（IE6以外で動作)
• いくつもタイトルがある場合（このブログのトップ）
• 指定要素を表示しておきたい場合（今見ているページ）

必要なファイルを読み込む

jQueryとm5elementFollow.jsを読み込みます。

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

任意の要素に対して実行する

実行した要素はスクロールについてきているとき「following」というクラスが付与されます。

JS

jQuery(function($) {
  // 指定したい要素の親要素に対して実行する
  $('article.entry').m5elementFollow({
    // ついてこさせる要素は親要素内にある物を指定できる
    follow: 'header, footer'
  });
});

オプション

トップから少し下にずらすこともできます。

いまのところIE6は非対応です。

• 動作サンプル（IE6以外で動作)
• いくつもタイトルがある場合（このブログのトップ）
• 指定要素を表示しておきたい場合（このブログの記事詳細）

マウスオーバーしたときにくるっとひっくり返す（ような）エフェクトで目をひけるかもしれないjQueryプラグインです。ちょっと今日は・・・自信ないですｗぷるぎんのくせに使い方がややこしくなってしまったんですけど反省はしてません。最低限必要やったんやで・・・

• 動作サンプル

必要なファイルを読み込む

jQueryとm5flipElement.jsを読み込みます。

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

任意の要素に対して実行する

元のHTMLとCSSの書き方などに制約が多いところがややこしいので、それぞれポイントを書いてます。

HTML

• 要素の中身はなんでもよくて以下の2つを含んでいるとよさげ
• class: flipDefault は初期表示要素
• class: flipHide はフリップ後に表示される要素
• フリップ後は_boxの要素にclass: flipped が追加されます

<div class="flipElement">
  <h2>フリップエレメント</h2>
  <p class="flipDefault">カーソルをあわせると・・・</p>
  <p class="flipHide">コメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメント</p>
</div>

JavaScriptを実行すると元のHTMLが下記のように置き換わります。元の要素にclassがある場合classを、classがなくてidしかない場合はidをそれぞれ継承して_container、_boxを付与したものでwrapされます。（ややこしい）

<div class="flipElement_container flip_container">
  <div class="flipElement_box flip_box">
    <div class="flipElement flip_elem">
      <h2>フリップエレメント</h2>
      <p class="flipDefault">カーソルをあわせると・・・</p>
      <p class="flipHide">コメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメント</p>
    </div>
  </div>
</dd>

CSS

• div.flipElement_containerは、floatやmarginなど配置を決定するプロパティを指定します
• div.flieElement_boxは、元の要素でborderを指定している場合同じborderを指定します
• .flipped でスタイルをがらりと変えたほうが効果的な気がします

/* ここからJSで生成する要素 */
div.flipElement_container {
  margin-right: 10px;
  margin-bottom: 10px;
  display: inline-block;
  /display: inline;
  /zoom: 1;
}
div.flipElement_box {
  border: solid #ddd 1px;
}
/* ここまで */
div.flipElement {
  margin-right: 10px;
  margin-bottom: 10px;
  border: solid #ddd 1px;
  display: inline-block;
  /display: inline;
  /zoom: 1;
  width: 250px;
  height: 100px;
}
/* フリップ後 */
div.flipped {
  background: #000;
}

div.flipElement h2 {
  margin: 0 auto;
  padding: 5px;
  background: #eee;
  text-align: center;
}

div.flipElement p {
  padding: 5px 10px;
  line-height: 1.4;
}
/* フリップ後 */
div.flipped p {
  color: #fff;
}
  
/* デフォルトは非表示 */
.flipHide {
  display: none !important;
}

JS

元の要素がborderを含んでいる場合はboxBorderAdjustプロパティで左右のボーダー幅を渡すときれいになります。（ややこしい）

jQuery(function($) {
  $('.flipElement').m5flipElement({
    boxBorderAdjust: 1
  });
});

オプション

おきまりのeasingなど

• 動作サンプル

テキスト入力エリア（input, textarea）にフォーカスすると入力エリアを拡大して見やすく表示することができるプラグインです。クラスを付与するためフォントサイズもあわせて大きくすることができます。

• 動作サンプル

必要なファイルを読み込む

jQueryとm5enlargeInput.jsを読み込みます。

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

任意の要素に対して実行する

input、textarea要素に対して実行します。（以下はサンプルのHTMLです。）

HTML

<dl>
  <dt>input (single)</dt>
  <dd><input type="text" id="text" class="enlargeInput" value="" /></dd>
  <dt>input (double)</dt>
  <dd><input type="text" class="enlargeInput" value="" />
  <input type="text" class="enlargeInput" value="" /></dd>
  <dt>textarea (with custom options)</dt>
  <dd><textarea id="area" cols="5" rows="5"></textarea></dd>
</dl>

JS

jQuery(function($) {
  $('.enlargeInput').m5enlargeInput();
});

オプション

ホバー効果や拡大時のセンタリング（元の位置に対して真ん中にくるように上と左を別個設定可）などを設定できます。

サンプル最後の指定例

拡大するときに左上を軸にしないで、要素の真ん中を軸にして広がります。こっちのほうが使いやすそうな気がする

$('#area').m5enlargeInput({
  enlargeRatioWidth: '200',
  enlargeRatioHeight: '150',
  hoverEnlarge: true,
  hoverEnlargeRatioWidth: '110',
  hoverEnlargeRatioHeight: '120',
  movingTop: false,
  movingLeft: true
});

• 動作サンプル

指定位置までスクロールしたときにレイヤーを表示させることができます。

ブログを読み終わったあとに注意を引きたいレイヤーを表示して、ソーシャルサービス等への投稿などを促す効果も簡単に実装できます。（レイヤーの中身は別途必要です）

元ネタは、長谷川恭久さんのcouldから。「いかがでしたか？」というレイヤーが出てくるのですが同じような効果を簡単に実装できます。

上からにょきっと表示する以外にも、指定レイヤーをフェードやスライドで表示させたりできます。

• 動作サンプル a (上からにょきっと
• 動作サンプル b (フェード

必要なファイルを読み込む

jQueryとm5noticeDisplay.jsを読み込みます。

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

任意の要素に対して実行する

トリガーとする要素に対して実行します。トリガーとなる要素が画面内に入る直前あたりで注目させたいレイヤーを表示します。

HTML

<cite id="notice"><a href="http://ja.wikipedia.org/wiki/Www">via: World Wide Web - Wikipedia</a></cite>
<!-- ↑トリガー -->
~ (中略
<div id="noticeBlock">
  <h2>Thanks for your reading! </h2>
  <a href="http://b.hatena.ne.jp/entry/http://5509.me/log/m5noticedisplay" class="hatena-bookmark-button" data-hatena-bookmark-title="noticeDisplay" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
  <a href="http://twitter.com/share" class="twitter-share-button" data-url="http://5509.me/log/m5noticedisplay" data-text="指定位置までスクロールするとレイヤーをにょきっと表示して注意を引くjQueryプラグイン m5noticeDisplay" data-count="horizontal" data-via="5509">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
<!-- ↑これを表示する --> 

JS

jQuery(function($) {
  // トリガーに対して実行する
  $('#notice').m5noticeDisplay({
    // noticeBlockで表示するレイヤーを指定する(CSSセレクタで指定できます
    noticeBlock: '#noticeBlock'
  });
});

オプション

表示するレイヤー、アニメーションタイプなどを設定できます。

noticeBlockの指定要素について

JavaScriptが実行されるタイミングで非表示になりますが、チラつくのが気になる場合はCSS側でdisplay: none;にしておいてください。

animateInとanimateOutについて

slideDownとfadeInに関してはそのままの効果ですが、「slide」という値がデフォルトになっています。slideが指定されている場合は、noticeBlock要素は画面上部にposition: fixedで固定されているものとします。

例えばサンプルは以下のようにCSSで指定した#noticeBlockに対してm5noticeDisplayを実行しています。

#noticeBlock {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  color: #fff;
  background: #000;
  opacity: .9;
  line-height: 50px;
  text-align: center;
}

というわけでサンプルはどちらもIE6はCSS的に非対応です。

• 動作サンプル a (上からにょきっと
• 動作サンプル b (フェード

テキスト入力エリアなどの残り入力文字数をシンプルに表示するjQueryプラグインです。使い方も簡単で、指定要素に入力文字数と一緒に実行するだけです。

動作サンプル

必要なファイルを読み込む

jQueryとm5simpleTextCount.jsを読み込みます。

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

任意の要素に対して実行する

任意のinput, textareaに対して実行します。

HTML

<input type="password" class="simpleTextCount" value="" />
<textarea class="simpleTextCount" cols="5" rows="5"></textarea>

JS

jQuery(function($) {
  $('.simpleTextCount').simpleTextCount({
    maxLength: 12
  });
});

ちなみにm5simpleTextCountを実行したinput要素はpaddingRight、textarea要素はpaddingRight, paddingBottomに適当な数値を当てたほうがいいと思いますよ！(そこは手動やねんで・・・

オプション

オプションを指定するデフォルトの文字・背景色、残り文字数が少なくなったときの文字・背景色などを任意に指定できます。全て残り文字数を表示する要素が対象です。

$('.simpleTextCount').simpleTextCount({
  atColor: '#fff',
  atBackground: '#000',
  alertLength: 5,
  maxLength: 12
});

ひとりごと

exValidationの文字数制限バリデーションと併用したくて作ったので、併用するといい気がします。機能をモジュールにしたほうがいい気もしてきた

結論から言うと、されるようです（結論のくせに曖昧ですけど！）。

今回は結局のところ、制作者の人たちはフルAjaxサイト（ってこの言葉使うの嫌なんですけど）をどうやって実装してるのかなーっていう、実例とか意見くださいエントリーです。意見ください！

ちょうど遷移にAjaxを利用したサイトを2つ作りまして

• マインドフリー株式会社 : デザイン以外を担当
• 松本クリニック : JSの実装のみ担当

どちらも仕組みは同じで（動きが違うだけなんですけど）、配慮した点に関してはSEOやJSオフ環境にも配慮したAjaxコンテンツを制作するためにできることで書いたように、WordPressを利用していてJavaScriptオフでも見られるようにベースを作ってて、JavaScriptでリンクをAjax用に置き換えてます。なのでどちらもJavaScriptを切った状態で閲覧すると、普通のサイトになります。

サイト内リンクとインデックス

以前も書いたようにJavaScriptがオフの状態ではサイト内のリンクURLは

http://hogehoge.com/piyo

JavaScriptがオンの状態では

http://hogehoge.com/#/piyo

のようになります。

検索エンジンでは、URL のパラメータは理解されますが、フラグメントは無視されることが多いため、これは重要です。

via: ウェブマスター ツール ヘルプ：ウェブサイトと Google の関係

上記のように正しくインデックスされないことが多いようなので、Googleにインデックスされるためには、サイト内リンクであるとかサイトマップであるとかが重要になると思います。この辺は辺り前というか、広く知られたことだと思いますが、この最低ラインはJavaScriptオフでも見られるように作ることでクリアできますね。（つまり静的なHTML、代替コンテンツを用意する）

インデックス状況

そんな感じで実装したサイトですが、以下でインデックス状況を見てみると

• site:mindfree.jp
• site:m-clinic.net

しっかりと元のURLでインデックスされています。

（今のところ）Ajax用にリンクを置き換えるという処理は見ていない

結局のところGoogleがどこまでJavaScriptを確認することができるのか、っていうところが把握できていないところだったので、少なくともAjax用にリンクを置き換えるという処理は見ていないということが分かりました。これ重要です。

ただし、以下の記述にもあるように、よりブラウザに近い動作をするように、とされているため、その内JavaScriptでリンクを置き換えるところも認識されるようになってしまうかもしれませんが・・・

Google では、Googlebot がよりブラウザに近い動作をするよう対応を続けています。サイトで必要な機能は実装されているため、特に何もしなくても Googlebot によってページが適切にインデックスに登録される可能性はあります。

via: ウェブマスター ツール ヘルプ：AJAX: よくある質問

皆さんの対応方法が知りたいです

フルでAjaxを利用したコンテンツはまだまだ少ないような気がするのですが、そのときのSEOやJSオフ環境の対応ってみなさんどうしてるんでしょうか。その辺知りたいのでコメントとかTwitterで広がるとうれしいなぁ・・・

HTMLsnapshotを利用して作ったフルAjaxサイト（ってこの言葉使うの嫌なんですけど）ってあるのかなー（Twitter以外

キャプチャ画像のように、selectボックスがウィンドウの下方にあるときプルダウンを上部に表示するようにしました。

slideDownを選択している場合は上ににょきっとはえるようなアニメーションになってちょっと気持ちいいですｗ

• jQselectable 1.3.2をダウンロードする
• jQselectableの詳細・使い方など

お二人は僕がJavaScriptを始めるきっかけになった大先生なもんで、、とてもうれしいです・・・（いまうっすら涙しながら書いてます）

ちなみに僕はいつものフォームバリデーションをはじめ、25項目ほどお手伝いさせてもらいました。

jQuery逆引きマニュアル Webデザインの現場で役立つ基本と実践
	西畑一馬 中村享介 徳田和規 インプレスジャパン 2010-12-17 売り上げランキング : 106533 Amazonで詳しく見る by G-Tools

jQueryをより便利に扱うためのJavaScriptの基礎から一般的なUIの実装コード、TwitterやFlickrとの連携方法、Visual Studioでの扱い方など幅広い内容でお手元に一冊あると便利ですよきっと！

興味ある方はぜひに！

解決方法を少しあげてみましょう。（以下主に全ページAjaxで構成されているようなサイトを前提にしています）

1. HTMLsnapshotを利用する

SEOにも強いクローラブルなAJAXコンテンツを作成するためにという翻訳記事を先日書きましたが、Googleが対応している、というよりもGoogleにインデックスしてもらうための対応策ですかね。Twitterで導入されていますが、ユーザーが切り替えない限りはまだ旧サイトに飛んでいるはずなので、効果は分かりません。

• システムの対応が必須
• クエリをHTMLsnapshotに対応しないといけない
• 結局bot向けに同じ内容のページを用意するくらいなら全ユーザーが利用できるほうがいいのでは？

など、こちらの対応をするならはじめから静的なページを用意したほうが無難な気がします。（ページ数が膨大な）Webアプリケーション等はこちらのほうがいいんですかね。

2. JSオフでも閲覧可能なページ（HTML）を用意する

今のところ現実的なのはこれでしょうか。ポイントはサイトをJSオフでも見られるように設計しておいて、JS側でリンクをハッシュリンクに書き換えるという感じですね。

この方法の要点は以下のとおりです。

• 全てのページを作成する（いつも通り）
• リンクはJSでフラグメントハッシュリンクに置き換える
• Ajaxでページを読み込み必要なところだけ置き換える

実装方法の詳細はまた別に書くと思いますが、書きますが、一例をあげるとページロード時に、以下のようなスクリプトを実行して各a要素のhref属性を書き換えてしまいます。サイト自体がJSオフ環境でも見ることができるため、サイトのSEOも従来通り。インデックスも元のURLでされます。

$('a').each(function() {
  $(this)
    .filter(function() {
      return this.href.indexOf(domain) != -1;
    })
    .attr('href', $(this).attr('href').match(/^\./)
      ? $(this).attr('href')
        .replace(domain, '')
        .replace(/^\./, '#')
      : '#' + $(this).attr('href').replace(domain, ''))
});

これを実行するとhrefの中身が

<a href="/about/">

から

<a href="#/about/">

へ変わります。

クリックするとURLのフラグメントハッシュが変わり、ハッシュチェンジイベントが呼び出されるので、それにあわせてコンテンツを変更するようにします。

ハッシュチェンジイベントは「jQuery hashchange event」を利用すると簡単に実装することができます。

ただしデメリットも当然あり、ハッシュリンクのせいでトップページURLが

http://hoge.com/

と

http://hoge.com/#

のように2つできてしまい、例えばソーシャルブックマークのブックマークが分かれてしまったりします。そのために使えるであろうcanonicalもまだ対応されていないことが多いのでなんとも。。はてなは対応しているはずですが、分かりにくいですね。

あとはページ全体をAjaxで呼び出しがちなので、その辺りはサーバーサイドでAjaxリクエストだった場合はこのデータだけ、のような仕組みで利用したほうがエコっぽいです。

pushStateとreplaceState

hashchangeイベントの微妙なところはWHATWGで用意されている「pushState」「replaceState」を使えば解消されるような感じです。

window . history . pushState(data, title [, url ] )
Pushes the given data onto the session history, with the given title, and, if provided, the given URL.

window . history . replaceState(data, title [, url ] )
Updates the current entry in the session history to have the given data, title, and, if provided, URL.

via: HTML5 (including next generation additions still in development) – 6.4 Session history and navigation

hashchangeイベントがlocation.hashを利用するのに対してpushState・replaceStateはhistoryのメソッドになり、URLそのもの（location.pathname）を書き換えることができるようです。

ブラウザでCmd+Clickとか使いませんか？BetterTouchToolを使ってCmd+WとかCmd+Qとかよく使うショートカットをトラックパッドのジェスチャーにアサインすると普段の操作便利になって業務効率もアップするかも・・・！

（キーボード派の人には・・・あれですけど・・・

BetterTouchTool

BetterTouchToolはキーボードショートカットに、Magic MouseのマルチタッチジェスチャやTrackpadのマルチタッチジェスチャをアサインすることができたりする超便利ツールです。

なんだか色々機能がありすぎて僕は使いこなせてないんですけど・・・
MacBookの人はTrackpadジェスチャをちょっとアサインするだけでもかなり便利になります。Magic Mouseのジェスチャアサインは・・・あのせまいところで指動かすのは正直アレですけど、それなりに使いやすくはなるでしょう。

ダウンロードとインストール

ダウンロードは以下のリンクから

ダウンロードとか：http://boastr.net/
ドキュメント・ビデオとか：http://blog.boastr.net/?page_id=1619

インストールはいつものように楽々ですね。インストールしたらとりあえず以下の設定でMacを起動したときに同時にBTTが起動するようにしておきましょう。

タスクバーからPreferenceを選択する

Launch BetterTouchTool on startupにチェックを入れる

ジェスチャのアサイン

ここからは正直好みなんですけど、最初はよくわからないと思うのでとりあえず僕と同じように設定して使ってみてください。

ジェスチャをショートカットにアサインする

たとえば、Three Finger Tap（3本指タップ）をCmd+Clickに指定すると、ブラウザでリンクを3本指タップCmd+Clickになります。わざわざCmdを押しながらタップしなくていいなんて便利ですね。

同じようによく使うキーボードショートカットは

• Cmd+W（タブを閉じる）
• Cmd+Q（アプリを終了する）
• Cmd+↑（ページ上部へ）
• Cmd+↓（ページ下部へ）
• ^+Tab（タブ送り）
• ^+Shift+Tab（タブ戻し）

のような感じであるので、それぞれをTrackpadジェスチャにアサインしてみます。

Preference画面のGesturesタブ内、Trackpadを選択する

ジェスチャをアサインするアプリを細かく指定できますが、ここではGlobal（Finderを含む全てに適用）を選択します

Add New Gesturesからジェスチャーを登録する

任意のジェスチャーに対して任意のアクションをアサインする

これを繰り返して上記のようにしてみます

ただ初期設定だとTip TapやRorateのブロックタイムがけっこう長いので短くしておくと使いやすくなります。

Tip Tapの感度を少しさげると使いやすいかも

Rotateのブロックタイムとdegreeを短く、ちょっとの角度でいいように設定しておきます

上で割り当てたジェスチャーを動画で撮ってみました。ちょっときもいんですけど、こんな感じでジェスチャーするとキーボードショートカットが実行されます。

Rotate Left

Rotate Right

Three Finger Tap

Tip Tap Left

Tip Tap Right

慣れてきたら好きなジェスチャでアサインを

認識するジェスチャもかなりの種類が用意されていて、キーボードショートカットやさまざまなアクションにアサインすることができるため設定次第ではかなり便利に使うことができるでしょう。

使い方はとても簡単で
windowにhashchangeイベントをbindするだけです。

$(window)
  .hashchange(function() {
    Hoge(location.hash.replace('#', ''));
  }); // ハッシュフラグメントが変わったときにHoge()を実行する

$(window).hashchange(); // Windowロード時に実行できる

Ben Alman » jQuery hashchange event
jQuery hashchange eventのデモ

実際にhashchange eventプラグインを利用して作ったサイト
松本クリニック

hashchangeイベントというのは

<a href="./#fugafuga">fugafuga</a>

のようなハッシュフラグメントリンクをクリックしたときにURLが

http://hogehoge.com/

から

http://hogehoge.com/#fugafuga

のように変わるタイミングで実行されるイベントです。

「戻る」「進む」が使えないと何度もクリックして中身が切り替わってるのに、いきなりだいぶ前のページに戻ってしまうのでユーザーを迷わせてしまいがちです。ユーザーがコンテンツを便利に閲覧できるようにhashchangeプラグインのようなものの利用はぜひ検討すべきでしょう。

具体的な使い方については次回の記事に続きます。続きませんでした・・・が、トリガーになるリンクの話など少し書きました。

この前JavaScriptの実装を担当した松本クリニックは、AJAXでほぼ全てのページを切り替えるっていうのが最大のポイントなんですけど、これの良いところはWordPressで全てのページを生成してて、JSオンでもオフでも見られるんですね。つまり、クローラはオフのコンテンツを見るような作りにしてあります。

で、こういうのって小規模～中規模なサイトならまだいいと思いますけど、大規模なサイトになってきたりするとページは存在しないでデータだけが存在したりする（ハンドラにリクエストをかけてJSONだけを返してもらって内容を入れ替える、など・・・）わけで、実現が難しくなるんですね。

この問題に対してGoogleが現在公表している方法は、HTML snapshotという代替ページをサーバーから返すようにして、クエリなどを含んだイケてないugly URLと#!を含むクールなpretty URLを用意しろ、というものです。いやー言ってることは分かるんですけどね、これってめんｄ（ｒｙ

HTML snapshotの作り方も書いてあるんですけど、それはそれで置いておいて、とりあえずGetting Startedのページを見てみましょう。

✄－－－－－－－－－－－－ 翻訳ここから －－－－－－－－－－－－✄

概要

簡単にまとめると、クローラが仕様に沿ったAJAX URL（ハッシュフラグメント#!を含んだもの）を見つけると、クローラはAJAXコンテンツではなくHTML Snapshotをリクエストし、ページを解析した上でAJAX URLを検索結果ページに表示します。

Step-by-stepガイド

1. サイトがAJAXクローリングスキームに対応していることをクローラに伝える

AJAXサイトがインデックスされるための初めのステップは、クローラにサイトがAJAXクローリングスキームをサポートしていることを示すことです。

このはステップを踏むには、特別なトークンをハッシュセグメント（ハッシュセグメント：URLのなかの#サイン以降の全て）内で使います。つまりハッシュセグメントはエクスクラメーションマーク（!）で始めなければなりません。

つまり、AJAXアプリケーションがこのようなURLなら

www.example.com/ajax.html#key=value

以下のようにします。

www.example.com/ajax.html#!key=value

このスキームを使えば、サイトが”AJAXクローリングが可能である”と判断されます。クローラがもしHTML snapshotを使っていればアプリケーションのコンテンツを確認可能になります。

2. サーバーを_escaped_fragment_を含んだURLのリクエストをハンドル出来るように設定してください。

例えば“ www.example.com/index.html#!key=value”をインデックスされたいなら、このURLのHTML snapshotをクローラに提供することが必要になります。HTML snapshotを用意することで、クローラがコンテンツをみることができるわけです。ではサーバーはどうやってレギュラーページ（AJAXコンテンツ）を返すのとHTML snapshotを返すときを見分けるのでしょう。答えはクローラからリクエストされたURLにあります。クローラはそれぞれの下記のようなAJAX URL(pretty URL)を

www.example.com/ajax.html#!key=value

一時的に下記のように書き換えます(ugly URL)。

www.example.com/ajax.html?_escaped_fragment_=key=value

なぜこんな面倒くさいことをさせるのかというと、ここで重要なポイントは2つあります。

• ハッシュセグメントは（仕様として）HTTPリクエストの一部としてサーバーに送られることはありません。つまり、クローラはどうにかしてサーバーに www.example.com/ajax.html#!key=value のコンテンツがほしいということを伝える方法が必要なのです。（www.example.com/ajax.htmlのようなURLの比較として）
• 一方でサーバーはブラウザーに送るノーマルなページ（ここで言うノーマルなページはAJAXコンテンツ）ではなくて、HTML snapshotを返す必要があることを知らなければなりません。HTML snapshotはJavaScriptが実行された後のページに表示されるコンテンツ全てであることを覚えておいてください。最終的に、あなたのサーバーはHTML snapshot www.example.com/index.html#!key=value (オリジナルのURL)をクローラに返すことが必要というわけです。

オリジナルのURLとクローラがどのようなコンテンツをリクエストしているかがわかったらHTML snapshotをつくる必要があります。HTML snapshotの作成方法は色々あります。いくつか紹介します。

• コンテンツの多くがJavaScriptで生成されていれば、HTML snapshotを取得するためにHtmlUnitのようなヘッドレスブラウザーを使ったほうがいいかもしれません。また、 crawljaxやwatij.comのようなツールを使うこともできます。
• コンテンツがPHPやASP.NETのようなサーバーサイドの技術を使って作られているのなら、すでに存在するコードを使って、JavaScriptの部分をStaticなものか、サーバーサイドで作ったHTMLに置き換えてください。（つまりWordPressでページを生成しておくようなものですね。）
• 現行方式のようにオフラインでstaticなページをつくることもできます。たとえば、多くのアプリケーションはデータベースからコンテンツを引っ張ってきてブラウザーにレンダリングします。それではなくて、それぞれのAJAXURLにつき別々のHTMLページを作ります。（つまり自力で静的ページを作れという意味ですよ）

HTML snapshotのメカニズムを使ってみることを強く推薦します。ヘッドレスブラウザーが確実にあなたのコンテンツのアプリ件の状態を正確にレンダーしているか確認することが大切です。クローラに実際どのように見えているのかを知るのは、小さなテストアプリケーションをつくって、どのようになるのか見ることもできるし、Fetch as Googlebotのようなツールを使って試すこともできます。

まとめると、下記のことがサーバーで動いていることを確認して下さい。

• www.example.com/ajax.html?_escaped_fragment_=key=value のような形のURLがオリジナルのwww.example.com/ajax.html#!key=valueへマッピングされていること。
• トークンはエスケープされていないURLであること。一番簡単な方法は、スタンダードURLでコーディングを行うこと。例えばJAVAでは下記のようにできます。

mydecodedfragment = URLDecoder.decode(myencodedfragment, "UTF-8");

• 理想的にはページの上部にある主なリンクと一緒にHTML snapshotがもどってきたら、エンドユーザーがエラーで_escaped_fragment_ URLへアクセスしたことを知らせることです。（_escaped_fragment_ URLはクローラによりのみアクセスできるURLであることを忘れてはいけません。）_escaped_fragment_ が無い全てのリクエストに対して、サーバーはコンテンツを返します。

3. ハッシュフラグメントなしにページを扱う。

あなたのページの一部はハッシュフラグメントが無いかもしれません。例えばホームページのURLをwww.example.com#!homeより www.example.comにしたい場合です。この理由により、ハッシュフラグメントの無いページ用に特別な方法を用意しました。ハッシュフラグメントの無いページをクローラがアクセスできるようにするには、ページのトップ部分に特別なメタタグを追加しないといけません。

そのメタタグはこのようになります。

<meta name="fragment" content="!">

これはクローラに対して、このugly URLをクロールするべきだと指示しています。これらにより、クローラは一時的にugly URLに相当するpretty URLをマップします。言い換えると、もしwww.example.comへ<meta name=”fragment” content=”!”>を設置すると、クローラが一時的にwww.example.com?_escaped_fragment_= をマッピングし、サーバーへリクエストします。そうすると、サーバーがwww.example.comに相当するHTML snapshotを返します。このメタタグを使うに当たって大切な制限があります。それは、唯一の有効なコンテンツは“！（エクスクラメーションマーク）”です。つまり、このメタタグはいつも正確なフォームを必要とします。このタグは空のハッシュフラグメントだが、AJAXコンテンツを含んだページであることを指します。

4. 新しいAJAX URLをリストするためにサイトマップの更新を考える。

クローラは発見したクロールを補足するためにサイトマップを使います。サイトマップは検索結果で表示されたいURLを含んだバージョンであるべきです。大体の場合pretty URLつまり

http://example.com/ajax.html#!key=value

になります。サイトマップには

http://example.com/ajax.html?_escaped_fragment_=key=value

のようなugly URLはふくめないこと。Googlebotは_escaped_fragment_を含んだリンクを（サイトマップURLとしては）理解しません。

たとえば、下のようなバージョンを検索結果に表示させたいのであれば

http://example.com/

下記を含めましょう。

http://example.com/

そうしてHTMLドキュメントのヘッダーにを含めましょう。これについてもっと知りたい場合はSitemapsで追加のドキュメントを確認して下さい。

5.オプションでも重要なアプリケーションのクローリング可否テスト：”Fetch as Googlebot”でクローラがみているものをみる

Googleではクローラが実際に見ているコンテンツを確認できるFetch as Googlebotを提供しているので、正しく実装されているか確認しておきましょう。また、サイトがクローキングしていないことを確かめるためにもこのツールを使うことが重要になります。

✄－－－－－－－－－－－－ 翻訳ここまで －－－－－－－－－－－－✄

おまけ

けっこう長かったのですけど、早い話、概要の図につきると思います。

結局AJAXコンテンツはそのままのURLではクローリングされないので、それ用の施策と代替コンテンツを用意しろとそういうわけですね。。。

（デモもつけようと思ったけどめんどくさいからやめた・・・

jQuery LightBox plugin

いつものLightbox。お世話になった人も多そう。

ThickBox 3.1

jQueryと言えばのThickbox。当初iframeが使えたのはこれだけだったもんで色々表示してた記憶があります。

PrettyPhoto

角丸スタイルと拡大ボタンなどちょっとリッチなLightboxみたいなの。

jQuery.popeye 2.0

Lightboxみたいな効果を画像にインラインで埋め込めるかなり素敵プラグインやけどまだ使ったことないなー。。あ、WordPressプラグインで使ってみればいいのかも。

Shadowbox.js

商用は有償なだけあって多機能なやつ。

YoxView

表示が割ときれい。テーマをきれいにすればちょうどよくなりそうな気もする。。

fancybox

スッキリしててみやすいさすがファンシー。

ColorBox

なにやら人気っぽいColorBox（Xmarks調べ）。テーマが5つ用意されていて簡単に見た目を変えられます。スライドショーとかギャラリーっぽい機能も。

使うならfancyboxかColorBoxかな。。。おれおれLightboxを汎用的にして公開する手もあるけど・・・おれおれと言えば「これからの新標準LightBox jDTLightBox.js」何の役にも立たへんLightboxもあるで・・・

Skype for Macの5.0beta(5.0 betaが見れない方はSkypeのブログから)が公開されてUIが新しくなりましたね。Macのインターフェースならでは？の気持よさがいいです。なんかでも全体的にでかいねん。ほんで自分のアイコンでーへんの寂しいねん。

でかいねん

全体的にでかいやろ・・・

そんなわけで

miekdで配布されている素敵スタイルSimple.skypeChatStyleをちょろちょろカスタマイズしたものを使っているのですが、作者の方に配布許可をもらいましたので、公開しておきます。Thanks to @miekd!!!

ダウンロードとキャプチャ

ダウンロード : Skype Simple 55

すっきり！

チャットスタイルの変更方法

一応書いておきます。

/ユーザー/ライブラリ/Application Support/Skype/

に「ChatStyles」というディレクトリを作ってダウンロード解凍して出てくる「Skype Simple 55.SkypeChatStyle」を入れ、Skypeを再起動する。
「設定＞チャット＞形式のプルダウン」から「Skype Simple 55」を選択する。

選択後新規で開いた会話ウィンドウにチャットスタイルが適用されます。

SkypeのチャットスタイルはHTML5+CSS3+JavaScriptで書かれている

全然知らなかったのですが、SkypeのチャットスタイルHTMLなんですねー。SkypeはWebkitベースっぽいです。ちなみにJSはjQueryが使われてました。。

ということは誰でもチャットスタイルを作れるんじゃないですか！触ってて結構面白かったです。メンドイけど。興味ある方はチャットスタイルファイルのコンテキストメニューから「パッケージの内容を表示」してみてください

超いまさら感のあるPocket Wifiネタなんですけど、Pocket WifiをUSBで繋いで給電（充電じゃない）しながらモデムとして使う方法ってあんまり知られてないんですかね。

※ 追記：設定しなくても繋がる人もいるようです。
何が原因なんでしょう？？？

確かにどこにも載ってない気もする・・・少なくとも僕の検索方法が悪いのか見当たらないし、知り合いも店員にそれは出来ません的なことを言われたとか言ってた。

そんなわけで誰かの検索にひっかかるように記事にしておきます。簡単だよ！
この記事はE-mobileのPocket Wifiについて書いているので、Softbankのやつはちょっと違うと思います。（アカウントとかパスとか）

USIMカードの電話番号を確認する

超重要です。Pocket Wifiは電話できないんですけど、USIMカードには電話番号が書いてあります。あとで使うので用意しておきます。

USIMカードがついてたやつ

電話番号が書いてある

ドライバをインストールする

たぶんこれは普通にインストールしてると思うんですけど、下の画像のやつですね。USBでつないだらSDカード認識できるようになるアレです。インストール済みの人はパスで。

ネットワークの設定

ドライバをインストールしたときに

• HUAWEIMobile-Pcui
• HUAWEI Mobile Connect

の2つの項目がネットワークに追加されるのですが「HUAWEIMobile-Pcui」のほうを設定します。

電話マークがついてるほう

選択すると右のペインに下のような画面が表示されるので、項目を埋めます。

• 電話番号：さっき調べておいた番号（ハイフンなし）
• アカウント名：em
• パスワード：em

上記を入力したら、その下にある「接続」ボタンを押すだけです。

エラーとか出ても気にせずキャンセルだかOKだかを押しておきます。接続できたらネットワークの項目が入れ替わって「HUAWEI Mobile Connect」が一番上にきてモデムとして使えるようになります。

一度設定したら次回からはUSBでつなぐだけで勝手にネットワークにつながるので便利ですね！

ドロップダウンメニューが便利な場合もありますが、ドロップダウンしてるエリアからカーソルが離れた際の素っ気なさときたら・・・
とりあえずサンプル2つ用意したので比較してみてください。

比較用サンプル

素っ気ないドロップダウンメニュー
優しいドロップダウンメニュー

ちょっとした気遣いで優しいUIに

彼女（彼）とバイバイしたあと見えなくなるまで見守ったりしませんか？名残惜しい的なのでもいいです。振り返ったとき既にいないとか寂しいじゃないですか。そういう気持ちって重要じゃないですか。

UIにもそういう小さな優しさというか思いやりを持たせてあげましょう。普通のことですけどね。カーソルが離れてもすぐ消えずにちょっと待ってくれるドロップダウンメニューを簡単に実装できるコードを用意したので、ちょっとした優しさを持ってコピペで使ってやってください。

こっからコード

HTML

<ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Photo</a>
        <ul>
            <li><a href="#">2008</a></li>
            <li><a href="#">2007</a></li>
            <li><a href="#">2006</a></li>
            <li><a href="#">2005</a></li>
            <li><a href="#">2004</a></li>
        </ul>
    </li>
    <li><a href="#">Archive</a>
        <ul>
            <li><a href="#">2008</a></li>
            <li><a href="#">2007</a></li>
            <li><a href="#">2006</a></li>
            <li><a href="#">2005</a></li>
        </ul>
    </li>
    <li><a href="#">考えるのメンドイ</a>
        <ul>
            <li><a href="#">メンドイ</a></li>
            <li><a href="#">メンドイ</a></li>
            <li><a href="#">メンドイ</a></li>
        </ul>
    </li>
    <li><a href="#">考えるのメンドイ</a>
        <ul>
            <li><a href="#">メンドイ</a></li>
            <li><a href="#">メンドイ</a></li>
        </ul>
    </li>
    <li><a href="#">Contact Me</a></li>
</ul>

CSS

ul#nav {
    margin: 2em 0 0 2em;
    float: left;
    border: solid #ccc 1px;
    border-right: none;
    height: 40px;
}

    ul#nav li {
        float: left;
        border-right: solid #ccc 1px;
        height: 40px;
        width: 120px;
        text-align: center;
        line-height: 40px;
    }
    ul#nav li.hover {
        background: #eee;
    }

        ul#nav li a {
            display: block;
            color: #252525;
            text-decoration: none;
        }

        ul#nav li ul {
            border: none;
            display: none;
            background: #666;
            overflow: hidden;
            opacity: .9;
            filter: alpha(opacity=90);
        }

            ul#nav li ul li {
                border: none;
            }
            ul#nav li ul li.hover {
                background: #777;
            }

                ul#nav li ul li a {
                    color: #efefef;
                }

JavaScript

jQuery(function($) {
    // Global menu
    $('#nav li').hover(function() {
        $(this).addClass('hover');
    }, function() {
        $(this).removeClass('hover');
    });

    var eachTimeout = [],
        target = $('#nav ul');

    target.each(function(i) {
        var $this = $(this);
        $this.parent().hover(function() {
            target.hide();
            for ( var i=0; i<eachTimeout.length; i++ ) {
                clearTimeout(eachTimeout[i]);
            }
            $this.show();
        }, function() {
            eachTimeout[i] = setTimeout(function() {
                $this.hide();
            }, 300); // ここの300を大きくすると消えるまでの待ち時間が増える
        });
    });
});

最初に言っておきます。
「アクセシビリティ」と聞くとどうも固そうなイメージがある方が多いと思うのですが、ドットコーダーの基本方針はゆるふわやで・・・気軽にどぞー

3月に始めたドットコーダー勉強会も10月で5回目になりました。月替わりでテーマを変えていて、10月のテーマは「アクセシビリティ」です。

今回もゲストをお呼びしてますが、セミナー形式だけでなく、
みんなでワイワイガヤガヤしながら アクセシビリティのことを考えてみましょう。

• 音声読み上げブラウザで読み上げるとどうなるの？
• 動画はアクセシビリティ的にどうなの？
• alt属性の良い書き方って？
• JIS改訂ってあったけど何に気をつければいいの？
• そもそもアクセシビリティって？

アクセシビリティは全然わからない、なんか対応した方がいいような気がするけど、どうすればいいかわからない、そんなコーダー・デザイナー・ディレクターなど、どんな方でも気軽にご参加ください。

日時

2010/10/16 15:00～18:00

場所

大阪研修センター
大阪市淀川区十三本町1-12-15 ドルチェヴィータファースト3

概要

ショートプレゼン、質疑応答・ディスカッション

対象

フロント関連の方、ディレクター、デザイナー、むしろ興味ある方

出演者

• アルファサード 持田 徹 さん（@motchie）
• NPO法人しゃらく 小嶋 新 さん（@aratakojima）
• みるく さん（@milk54）
  「優しく　楽しく　幸せに　アクセシビリティ」
  アクセシビリティをもっと身近に感じていただけるよう、音声読上げのデモ等を体感していただきます。そして、「これだけは実践しよう！」という基本中の基本をお話します。

参加費

1000円

参加表明

Tweetviteからどうぞー

サブドメインのトラッキングなんて基本の基本で、いまさらなんですけど、いつも忘れるもんで…記事にすれば忘れないんじゃないかとかそういう感じです。

埋め込みコードの修正

コードの発行のときに「複数のサブドメインがある １ つのドメイン」を選択するか下記のコメント部分を追加します。

<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXXXX-X']);
  _gaq.push(['_setDomainName', '.example.com']); // これを追加
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>

フィルタの作成と適用

ふつうは新しくプロファイルを作ると思うので、新しいプロファイルを同じドメインで作成して下図のようなフィルタを作成して適用します。

これでもう忘れることはないでしょう。。きっと。

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 = 0,
  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プラグインとして作り直しました。伴って仕様や使い方が異なる部分も多いので、ドキュメントとして書いておきます。ただし前半のバリデーションルール周りは同じエンジンを使ってるので、ほぼ同じです。ちなみにすごい長いです。。

ルールを割り当てる際のclass名がhogeからchkhogeに代わりました。アップデートして使う場合は注意してください。

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

トピックス

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

ダウンロード

バリデーションエンジン

exValidation.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というプロパティで指定すること（実行時のプロパティでバリデーションルールを指定する）でルールを決めることができます。

• chkrequired – 必須項目
• chkselect – select要素用の必須項目
• chkradio – radioボタン（いずれかひとつ、グループ分けの親要素必須
• chkcheckbox – checkbox（いずれかひとつ、グループ分けの親要素必須
• chkgroup – 複数の項目をまとめる場合（詳しくは後述
• chkretype-対象にするID – 再入力チェック
• chkemail – メールアドレスチェック（*@*.*）
• chkhankaku – 全角禁止
• chkzenkaku – 全角のみ
• chkhiragana – ひらがなのみ
• chkkatakana – カタカナのみ
• chkfurigana – ふりがな（ひらがな、数字、アルファベット、〜、ー、()）
• chktel – 電話番号(形式チェックはなし)
• chknumonly – 数字のみ
• chknocaps – 英数字（小文字）のみ
• chkzip – 郵便番号(形式チェックはなし)
• chkurl – URL（http(s)://）
• chkminX – X文字以下
• chkmaxX – X文字以上
• chkfile – type=”file”のチェック、chkrequiredは不要

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

<input type="text" name="mail" id="mail" value="" class="chkemail chkhankaku chkrequired" />

必須項目・メールアドレスチェック・全角禁止になります。またクラスに記述する順序は任意で構いません。ところでバリデーションを行う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="chkgroup chkrequired chkhankaku chkemail" 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には chkgroup, chkrequired, chkhankaku, chkemail が入ることになります。

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

<ul class="chkradio" 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にchkrequiredは必要ありません。

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

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

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

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

<select name="sex" id="sex" class="chkselect">
  <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="chkemail chkhankaku chkrequired" />

の後に

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

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

<input type="text" id="remail" name="remail" value="" class="chkretype-mail chkrequired" />

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

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

<span class="chkgroup chkrequired chkhankaku chkemail" id="groupmail"><input type="text" name="mail2" id="mail2" value="" class="" />
@
<input type="text" name="mail3" id="mail3" value="" class="" /></span>

の再入力項目は

<span class="chkgroup chkrequired chkretype-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="chkrequired chkmin6 chkmax12" />

のようにclassに

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

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

7. チェックボックスで対象inputの必須をトグルする

以下該当部分の抜粋コードです。ポイントはトグルにしたい要素はルールを書くときにchkrequiredを必ず含めてください。

<tr>
  <th>Favorite<span>*</span></th>
  <td>
    <span id="fav">
      <label for="f1"><input type="checkbox" id="f1" name="fav[]" value="f1">books</label>
      <label for="f2"><input type="checkbox" id="f2" name="fav[]" value="f2">music</label>
      <label for="f3"><input type="checkbox" id="f3" name="fav[]" value="f3">game</label>
      <label for="f4"><input type="checkbox" id="f4" name="fav[]" value="f4">study</label>
      <label for="f5"><input type="checkbox" id="f5" name="fav[]" value="f5">fishing</label>
      <label for="f6"><input type="checkbox" id="f6" name="fav[]" value="f6">other</label>
    </span>
  </td>
</tr>
<tr>
  <th>Favorite Other</th>
  <td>
    <input type="text" id="favOther" name="favOther" value="">
  </td>
</tr>

で、チェックボックスを含むグループにはchktoggle_hoge_fugaのように

• hoge: トグルを発火させるためのチェックボックスのID
• fuga: チェックボックスの状態によって必須をトグルさせるinputのID

この後説明しているアクティベート時にトグルを行うためのルールを入れておきます。これだけです。

$("form")
  .exValidation({
    rules: {
      fav: "chkgroup chktoggle_f6_favOther", // chktoggle_f6_favOther の部分
      favOther: "chkrequired"
    },
    stepValidation: true
  });

8. アクティベート

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

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

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

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

$("form")
  .exValidation({
    rules: {
      name: "chkrequired",
      kana: "chkrequired chkkatakana",
      email: "chkrequired chkemail chkhankaku chkgroup",
      pass: "chkrequired chkmin6 chkmax12",
      repass: "chkrequired chkretype-pass",
      radio: "chkradio",
      checkbox: "chkcheckbox"
    }
  });

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

オプション

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

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

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

サンプルのパターン1

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

$("form")
  .exValidation({
    rules: {
      // 略
    },
    stepValidation: true
  });

サンプルのパターン2

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

$("form")
  .exValidation({
    rules: {
      // 略
    },
    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: {
      // 略
    },
    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, {
    chkretype: [
      '入力内容が異なります',
      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);

$.validationRulesをextendする形でルールを記述します。バリデーションはclass名で行うので

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

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

ライセンス

MITライセンスなので、ライセンス部分を改変しない限り個人商用問わず利用することができます。
ただし、不具合など発生しても作者は責任を負いませんのでご了承ください。

その他

バグや要望などはgithubのIssuesにください。

サイトの検索で外部検索エンジンを使うときなど、サイトは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://5509.me/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への対応