先日ECサイトを制作したときに、動きのあるサイトにしないといけなかったので、色々調べて組み込んでみたんですが、jQueryでもう何でも出来ちゃいますね。近い将来ローカルで画像なんかを編集しなくても、ブラウザだけで色々できるようになるんじゃないでしょうか。今回は定番からちょっとマイナー（Google Analytics関係とか）なものまでjQueryの小技、プラグインを集めさせていただきました。
もくじ
補助
７．Google Analytics／クリック数を取得・表示させる
８．郵便番号から住所を自動的に補完
９．フォーム入力の達成率をグラフで表示
１０．読むのに後何分かかるか表示
１１．離脱時にアラート
１２．ボタンに直接ローディングアニメーション
７．Google Analytics／クリック数を取得・表示させる
８．郵便番号から住所を自動的に補完
９．フォーム入力の達成率をグラフで表示
１０．読むのに後何分かかるか表示
１１．離脱時にアラート
１２．ボタンに直接ローディングアニメーション
スクロール
１．ページ内リンク／フッターまわり／トップに戻る
定番だけど、必ず知っておきたい。下部までスクロールすると「シュッ」と横からスライドして出てくるもの、右下におすすめ記事などを出したり、どこかで見かけた定番のフッターまわりやスクロール系。
２．パララックス
パララックス（視差効果）を取り入れる方法。要はjQuery Parallax Plugin Demoみたいな感じです。
スライド
３．カルーセル
マウスホイール、スワイプ設定、レスポンシブ対応、上下左右の違う画像もOK。と機能が豊富だったので。
４．レスポンシブなスライダー
これも定番。レスポンシブなカルーセルタイプのスライダー。オプションで縦スライド・ランダム表示などもできる。
５．ヌルヌルサクサクなスライドメニュー
スライドアニメーションを滑らかに動かす方法として、CSS3を使っていたという。サンプルページはiPhone5でのみ確認できます。
６．サムネイル付きクロスフェードスライドショー
画像を自動でクロスフェードで切り替え。もちろん、レスポンシブ対応でした。
補助
７．Google Analyticsでクリックカウント
google AnalyticsでクリックカウントするjQueryコード。外部・内部リンクもカウントする。これ副業している人は必須ですよ！
８．郵便番号から住所を自動的に補完
郵便番号から住所を自動的に補完してくれる jQueryプラグイン。通常版と、スペース・改行圧縮版のminifyがある。
９．フォーム入力の達成率をグラフで表示
意外とありそうでなかった。フォーム入力時に「現在○○%進んでます」と進捗状況を表示する。入力項目が多くなりそうなフォームにどうぞ。
１０．読むのに後何分かかるか表示
スクロールの位置を取得し「この記事を読むのに○○分かかります」といった表示をしてくれる。つい長文を書いてしまう人は、このプラグインをつけてみてはどうでしょう。
１１．離脱時にアラート
記事に書かれているとおり、どういったシーンで使うの？と思ったんですが、フォームなどのページ遷移で使うといいんですね。地味だけど覚えていて損なしです。
１２．ボタンに直接ローディングアニメーション
たかがローディング効果だと侮ってはいけません。下に伸びたり、中心に向かって降りてきたり。ちょっとした効果だからこそこだわりたいですね。
メニュー
１３．ナビゲーションを最上部に固定
ヘッダーの一番上にメニューなどをピタッと固定させる。こちらもjsの「scrollSpeed」の数値で速度を調整出来ます。
１４．アコーディオン
メニューを開閉するアコーディオン。矢印が回転するもの良いですね。そういえば、僕も最初に勉強したのがアニメーション効果やイベントの（hide/show/click）でした。丁寧なチュートリアルで参考になります。
１５．タブメニュー
jQueryを使ったタブメニュー。フェードインやスクロール等のアニメーション付き。
１６．縦方向にスクロールするティッカー
縦方向にスクロールするティッカー。場所を多く取れないレイアウトなんかで活躍できそうです。
１７．上部固定メニューをクリックで開閉する
クリックで開閉する吹き出しメニュー。Facebookの上部で見かけるあれです。メニューの三角形は画像かと思いきや、やはりCSSです。
ビジュアル
１８．チュートリアルを作る
クリックでチュートリアル、手順説明を出す。キャプチャ撮って説明文が面倒だという時に。
１９．年表／横軸のタイムラインを表示する
横軸で年月を表示する。クリックで指定の要素を表示できる。
２０．地震分布図を作成
igMapというコントロールを用いて、地震分布図を作成。
２１．おしゃれグラフを描画
棒・線・円グラフ何でもOK。フラットデザインで綺麗なビジュアルなので、ブログやHPで使いたくなっちゃいますね。調査や統計の記事を書く場合に説得力が出そうなので、これは実装必須です。
- jQuery Visualize まとめ | monopocket blog
- グラフを描画してくれるjQueryプラグインは、多分”jQuery Visualize”がベスト！ | Shinichi Nishikawa’s
２２．カレンダー
24種類からテーマを選び適用するDatepickerの使い方。ブログだけじゃなくて、通販サイトなんかでも使えます。
２３．可変グリッド
グリッドで隙間を計算しながら並べ替えるボックス整列系のプラグイン。ヌルヌル動くのがポイント。グリッド要素の表示/非表示を切り替えれるようになったとのことです。
画像／写真
２４．写真にぼかしを入れる
フラットデザインに合いそうなjQueryプラグイン。これすごい良いですね！ブラウザに依存する部分はあるのですが、Photoshopでいちいちぼかしを入れる必要がなくなると。ブログのアイキャッチ作成が相当楽になりそうです。
２５．カラー写真を白黒に
これも面白いですよ。通常時は白黒だけどマウスオーバーした部分だけカラー写真になるという、目を引かせるための効果です。
２６．画像切替
フェードイン、スクロールアウトはもちろん「ダブルドア」のように上下から挟み込むように画像が消えるものもあります。
２７．画像ギャラリー
画像ギャラリー用のプラグインまとめ。Fancybox、レスポンシブ対応のColorboxなど色々。
２８．リサイズ
サイズを無理やり合わせると、画像が伸びてしまう。そんな時は画像のサイズ統一とトリミングをしてくれるMyThumbnail。
マウスホバー・クリック
２９．オーバーレイで注釈を表示
オーバーレイで要素に注釈を表示するプラグイン。サイトの説明やヘルプなんかに使えそうですね。
ツールチップ（吹き出し）
マウスを乗せると、吹き出し風のツールチップを出します。WordPress有料テーマなどで最初から入ってるものもありますが、入ってなければこれで。
３１．ポップアップ
JavaScriptのwindow.openと同じように、ポップアップで別ウィンドウを開く。
３２．マウスオーバー
プラグインを使わないマウスオーバー系アニメーション。フェイドでテキスト色・背景色・ずらしなど色々ある。
jQuery入門・使い方
jQuery入門（初心者）
jQueryがこの上なく分かる、スライド中心の初心者さん向けリンクです。準備、書き方、メソッドなど。すでに分かる人も、復習として見てみましょう。
- ノンプログラマーのためのjQuery入門
- Introducing jQuery
- はじめてのjQuery
- JavaScript入門講座
- イモムシでjQuery入門 | 第1回デザイナーがイモムシで覚えるjQuery
- jQuery基礎文法最速マスター – to-R
- ASCII.jp：40分で覚える！jQuery速習講座 (1/6)
リファレンス（中級者）
JQueryの説明が簡単で丁寧に載っているサイトを中心にまとめ。
- jQuery 日本語リファレンス
- Qrefy – jQuery日本語リファレンス
- jQuery Mobile が必須スキルになる！と思うのでこれから勉強する際に参考になる記事まとめ | バシャログ。
- ASCII.jp：Web制作の現場で使えるjQuery UIデザイン入門
- jQuery 開発者向けメモ
- jQuery API 1.4.4 日本語リファレンス – StackTrace
- jQuery超初心者にありがちな6つの間違い – あじゃぱー
プラグイン作成
jQueryプラグインの作り方を、最も分かりやすく書いてあるサイト、スライドをメモしておきます。
