jQueryプラグインのベストトレンド総まとめ2010

１）3D表示プラグイン


サンプルデモ
今年のトレンドと言えば3D。
というわけでこちら。まずはサンプルデモを確認。
触ってわかる通りですが、2枚の画像が3D表示されます。

呼び出す

$(function() {
$('#mindscape').smart3d();
});

HTML

<ul id="mindscape">
<li><img src=".../mindscape1.png" /></li>
<li><img src=".../mindscape2.png" /></li>
</ul>

CSS

#mindscape {
width: 720px;
height: 170px;
overflow: hidden;
border:2px solid #444444;
}
#mindscape li{
width: 844px;
height: 170px;
}

とっても簡単ですね！
ダウンロードとドキュメント



２）フェイスブックやTwitter、mixiなどのボタンを簡単に設置するプラグイン


ダウンロード
制作者のページを見たほうがわかりやすいです。
Twitter/facebook/mixi/GREEのボタンを超カンタンに作れる jQuery.socialbutton プラグインを作ったよ



３）マウスポインタで開閉するボックス


マウスポインタをボックスの上に合わせると4方に画像が開閉するプラグイン。
サンプルデモをご確認ください。
英語で説明が何書いてるかわからないと言う人でもダウンロードするとindex.htmlファイルが入って居ますので、直接どのような構成になっているかを確認できるかと思います。

ダウンロードはこちらの「DOWNLOAD」からどうぞ。



４）イメージ切り替えエフェクト


画像の下のちょこっとある点をクリックで画像の変更が出来ます。
エフェクトは数種類あり、お好みで。

AviaSlider - a unique jQuery Image slideshow plugin
ダウンロードは右下にあります。



５）フォームの装飾


サンプルデモとダウンロード
上のdemoとかいたリンクをクリックすると装飾された状態で閲覧できます。

jQueryページ
jQuery formDesigner | jQuery Plugins

サンプルコード
jquery-formdesigner-plugin - Project Hosting on Google Code



６）浮き出るモーダルボックスウィンドウ


結構いろんなサイトで紹介されていたプラグインのひとつ。
jQueryとしては定番のライトボックスのような形です。
サンプルデモとダウンロード

jQueryページ
jQuery modalBox | jQuery Plugins

サンプルコード
jquery-modalbox-plugin - Project Hosting on Google Code



７）シームレスなアップローダー


PHPとFLASHとjQueryで出来てる。
ちょっと敷居が高いかもしれないけど、とてもスムーズなアップロードが可能となります。
デモとダウンロード
ドキュメント（英語）



８）引き抜きコンテンツパネル


まずはサンプルページにて、一番下までスクロールして見てほしい。
下からパネルが現われる。
さらに、右側の矢印をクリックすれば、全画面にパネルが引き伸ばされるだろう。
用途は非常に高そうです。

ダウンロード
コードを一つ一つ見てもいいですが、どちらかというとダウンロードしてindex.htmlを見たほうがわかりやすいかもしれません。



９）背景ごと大きく切り替わるプラグイン


サンプルデモでご確認できます。
かなり大きめの背景ごと切り替えます。
チュートリアル、ダウンロードはこちら



１０）簡易的なイメージギャラリー


昨年度から比較的多くのユーザーに使われているイメージギャラリー。
少ないスペースでいくつかの画像を効果的に見せる事ができます。
Dynamic Drive DHTML Scripts- Simple Controls Gallery
ダウンロード、サンプル、コードともに上記にあります。



１１）画像にテキストをスタイリッシュに挿入


サンプルデモ
かなり簡単に設置できてしまうプラグインの一つ。
JavaScriptとCSSを読み込む。次にHTMLと少しのコードを付け足すだけ。

HTML

<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<img src="#" />
<span>Your text comes here</span>
</li>
<li class="s3sliderImage">
<img src="#" />
<span>Your text comes here</span>
</li>
<div class="clear s3sliderImage"></div>
</ul>
</div>

JavaScript

$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});

s3Slider jQuery plugin - Overview
↑この右下の方にあるFullVersionダウンロードすればOKです。（2010/11/11）



１２）汎用性の高いスライド式イメージギャラリー


サンプルデモ
かなり汎用性が高い。MMORPGのwebサイトでもさりげなく使われている人気のイメージギャラリー。
トップページのお知らせによく使われている。


ダウンロードとドキュメント
こちらも一度サンプルをダウンロードしてコードを見たほうがわかりやすいですね。
細かいオプションは英語なので、英語が全くわからない場合はページを翻訳してみるとわかるかもしれない。
それでダメならあきらめる方向で。



１３）アコーディオン式メニュー


サンプルとドキュメント
CSSチュートリアル。プラグインは使っておらず、jQuery単体と、CSSで実装できる手軽なアコーディオンメニュー。



１４）アコーディオンスライドギャラリー


FLASH全盛期の時にかなり流行った。というか携帯キャリアのページがこれにうめつくされて、まねしてた時代があった。いまは手軽にjQueryで導入できる時代に・・・。
が、これがまた一味違う。
ダウンロードがexeファイルになっていて、インストールする形に。
Javascript Accordion Menu

つまりローカルソフトを使ってJavaScriptを生成し、直接それを最後にコピーできる状態にして渡してくれるという代物。







かなり説明ははぶきましたが、フィーリングで何とかなるレベルです。



１５）手軽にTwitterのツイートを読み込みするプラグイン


サンプルデモ
非常に手軽にツイッターのつぶやきを表示させる事が出来るプラグイン。といっても、Twitter公式からJavaScriptをはりつけるだけで表示出来るので、あくまでもCSSを多少いじる目的があって導入するものとなるでしょう。
プラグインのダウンロード、ドキュメント
「download the source files」をクリックし、ダウンロードできます。



１６）フォロワをサイトに表示するようにする


サンプルデモは4つあります。そのうちの一つがこちら。
webサイトにフォロワーをずらーっと並べる事が出来るプラグイン。
なかなか見ごたえがあるのと、ちょっとソーシャルな気分が味わえる。
ダウンロード、ドキュメントはこちら
サンプルはコードのコピペ。プラグインは画面下部のほうのリンクから「download plugin」をクリックで。



１７）サイトにタイムラインを表示する


サンプルデモ、ダウンロード、ドキュメントはこちら
webサイトのあなたのつぶやきのタイムラインを表示。




１８）必要なツイートだけをサイトに表示させる


検索語を指定して表示させたり出来る代物。
とくに優れたポイントは、ハッシュタグ検索、ユーザー検索などがオプションで設定出来る点。
どういう事かと言うと、例えば「jQuery」のハッシュタグで、さらに貴方がツイートしたもののみがwebサイトやブログに表示させる事が可能と言う事。
つまり、それ以外の余計な会話や、リプライを表示しなくてもすむって事ですね。
導入はJavaScriptで、多少オプション設定が必要になります。

<script src="js/tweetquote.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
//<![CDATA[
tweetquote.load( “ここに検索語をいれる" );
//]]>
</script>

オプションは以下のように

<script src="js/tweetquote.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
//<![CDATA[
tweetquote.load( {
“username” : “ユーザーネーム”,
“lang” : “jp”,
“hashtag” : “#hotpants”,
“refreshrate” : 20000
} );
//]]>
</script>

refrshrateは1000で1秒ごとに切り替わる。
langは日本語からのみ検索。
そのほかのオプション、詳しくはドキュメント参照。
ダウンロード、ドキュメントはこちら



１９）要素をグリッドにかっちり収めるプラグイン


floatさせた要素をレンガ風に整列してくれるjQuery Masonry | CSS Lecture
2010年は結構グリッドデザインが流行ったりしま、、、せんでしたっけ？
このプラグインは、floatさせて、要素が想定外の並び方をするのを防ぐためのものです。
解説も国産の物なのでわかりやすいかと。



２０）様々なシチュエーションをカバーするツールチップ



本年度のツールチップの中でひときは人気なのがこれ。
jQuery Bubble Popup v.2.3.1(サンプルやドキュメント）
プラグインダウンロード


色んな要素にチップつけれたり



非同期で読み込ませたり



ツールの色変えたり

本当に様々な事が出来ます。
ダウンロードプラグイン

こんなツールチップじゃ足りないよというなら以下で。
20 Helpful jQuery Tooltip Plugins and Tutorials



２１）jQueryでwebカメラにアクセスしキャプチャしたり録音したりする


サンプルページ
今年はwebカメラ導入が結構ふえたんじゃないでしょうか。
このjQueryから、webカメラへアクセスし、キャプチャーをとれたりします。
ダウンロードプラグイン
サンプルページで、カメラ下のリンクをクリックすればキャプチャー出来ます。
音声も録音可能で、webカメラを使ったアプリ開発もブラウザでできちゃうかもしれないですねー。



２２）スクロールバーをちょっとだけおしゃれにしてみる


サンプルデモ
サイドバーにもこだわりを持ちたい人のためのjQueryプラグイン。
ちょっとしたところにこだわっている人に憧れたならこういうところにもこだわってみてはどうだろうか。
ダウンロードはこちら

他にもまだスクロールバーにこだわりたいと言う人は以下からどうぞ。
10 jQuery Custom Scrollbar Plugins



２３）スライダーイメージギャラリーの設置


サンプルデモ
スライダー式のwebイメージギャラリーです。
クリックすると拡大もでき、様々なシチュエーションで使えます。
ダウンロード、ドキュメントはこちら



２４）コンパクトニュースボックスの設置


サンプルデモ
非常にコンパクトでダイナミックなニュースボックスケース。
ちょっとしたスペースに配置する事で効果を発揮するかもしれません。
ダウンロード、ドキュメント

導入の際、たぶん無いとは思いますが、CSSが意外と多いので、かぶらないように気をつけて導入しましょう。



２５）ポラロイド写真ギャラリーで注目をあつめる


サンプルデモ

このあたりまで来ると、ギャラリーを全画面で表示するか、それとも開いたスペースを利用するかの用途と、好みによってわかれるかもしれないが、こうしたギャラリーも非常に人気。
特に、写真を勝手にポラロイド風に仕上げてくれる点と、アルバムごと、または、写真ごとに名前がつけれるという点がすぐれている。

FLASHのようにXMLを使うわけではなく、直接HTMLファイルに書き込む形となります。

ただし、アルバム名は日本語がつけれるが、ポラロイドの下部に入る部分は半角英語のみとなっているのでご注意を。
ダウンロードはこちらから



２６）カラーピッカーをサイトに設置


サンプルデモはこちら
あんまり使わないだろうけども、もしダイレクトに服の色をかえたりなんだりと言うユーザーエクスペリエンスを提供したい時には、覚えておいて損はないかもしれないですね。
ダウンロードとドキュメント

他にも以下のようなものも人気です。

jQuery color plugin xcolor - Website and Application Intelligence



２７）簡易リストYoutubeプレイヤー


サンプルデモ１／サンプルデモ２
Youtubeをちょっとだけ変わった表示としてサイトに貼り付ける事ができるプレイヤー。
サンプル２ではタイル状に並べた画像をクリックすると、その画像がプレイヤーに変換されると言うもの。

ダウンロードとドキュメント

ちょっと上級者向けに以下のようなプレイヤーもあるが、私はDLもしていないし、試験もしていないので、チャレンジしたい人だけ試してみるといいです。サンプルデモ
ダウンロードとドキュメントが以下。
badsyntax's jquery-youtube-player at master - GitHub



２８）手軽にグリッドを無視したデザインを導入


サンプルデモはこちら
もはや話題すぎてこんなのは紹介されたくないと言う人も居るかもしれませんが、定番であり、導入も簡単。
さらに手軽にグリッドデザインを無視したポイントが作れますのでとても人気のプラグインです。
jQueryGlobe - jQuery Plugin - Feature List
サンプルのダウンロードはテキストリンクの「with examples from here.」から出来ます。

コードも簡単だったりします。

$.featureList(
$("#tabs li a"),
$("#output li"), {
start_item : 1
}
);

// Alternative
$('#tabs li a').featureList({
output : '#output li',
start_item : 1
});

２９）iPhoneっぽいセレクトボタンに変換するプラグイン


サンプルデモ、ダウンロードはこちら
もはや説明不要かと。ギャラリーのように大きな仕事はしませんが、シンプルでかっこいいプラグインです。

因みに、フォームにだけ焦点を合わせるなら
今日から現場で使えるjQueryのフォーム関連プラグイン15選がお勧めです。



３０）iGoogleみたいな、アレ


サンプルデモ
ドラッグ、ドロップで移動したり出来る要素の追加ができる。
複数のウィジェットの実装や、追加ができ、ドラック＆ドロップで移動も可能。
ダウンロードはこちらから



おまけ１）ハイクオリティイメージギャラリー



サンプルデモはこちら
そりゃもう素敵なギャラリーです。
が、一点、本当は紹介しようかどうか悩んだ点がひとつ。
ダウンロード後、サンプルindex.htmlを開くと左のメニュー画像が一切表示されませんでした。
サーバーにアップしても変わらないため一応今回の紹介選考からはずしました。
そんなもの、おれの手にかかればいちころだというツワモノがいたらチャレンジしてみてください。



おまけ２）lightbox系いっぱい


今年は昨年度にくらべ、lightboxの使用数が減った気がします。
なので、今回のトレンド特集からははずそうと思っていたのですが、これまでの流れと違い「みなさんの使い方が上手くなった」為、クリティカルな部分部分で使われるようになり、その結果数が減少したのかも知れないとも考えて居ます。
そこで、手を変え、品を変え、色々と成長しているlightbox特集が見たいという人は以下からどうぞ。
20 Most Efficient jQuery Lightbox Plugins


以上です！
お疲れ様でしたって、言ってくれてもいいよ！

因みにjQueryを１から学びたいっていう人は以下で
web制作の現場で使うjQueryデザイン入門が激しくお勧めな件

また、以下のエントリーでは、jQueryの簡単な説明と、プラグインの働きを少し紹介しています。
jQueryでやる！ブログで使えそうな楽しいナビメニュー45


それでは、また。