スポンサーサイト

  • --/--/--
  • このエントリーをはてなブックマークに追加

スポンサーリンク

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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

  • 2010/11/17
  • このエントリーをはてなブックマークに追加

スポンサーリンク

jQuery2010特集
もはやこの業界ではかなり浸透しつつあるjQuery。
今回はそんなjQueryにスポットを当て、本年度紹介された中でも、ホットなトレンドプラグインをご紹介します。

※プラグインつかってないのもあります。
IT/Web業界に強い転職サイトGreen

1)3D表示プラグイン

3Dimageプラグイン
サンプルデモ
今年のトレンドと言えば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;
}

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



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

フェイスブックやTwitter、mixiなどのボタンを簡単に設置するプラグイン
ダウンロード
制作者のページを見たほうがわかりやすいです。
Twitter/facebook/mixi/GREEのボタンを超カンタンに作れる jQuery.socialbutton プラグインを作ったよ



3)マウスポインタで開閉するボックス

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



4)イメージ切り替えエフェクト

滑らかなエフェクトきりかえ
画像の下のちょこっとある点をクリックで画像の変更が出来ます。
エフェクトは数種類あり、お好みで。
選べるエフェクト
AviaSlider - a unique jQuery Image slideshow plugin
ダウンロードは右下にあります。



5)フォームの装飾

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

jQueryページ
jQuery formDesigner | jQuery Plugins

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



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

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

jQueryページ
jQuery modalBox | jQuery Plugins

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



7)シームレスなアップローダー

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



8)引き抜きコンテンツパネル

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

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



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

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



10)簡易的なイメージギャラリー

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



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

画像とテキストをスタイリッシュに表示
サンプルデモ
かなり簡単に設置できてしまうプラグインの一つ。
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)



12)汎用性の高いスライド式イメージギャラリー

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

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



13)アコーディオン式メニュー

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



14)アコーディオンスライドギャラリー

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

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

アコーディオン作成2

アコーディオン作成3

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



15)手軽にTwitterのツイートを読み込みするプラグイン

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



16)フォロワをサイトに表示するようにする

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



17)サイトにタイムラインを表示する

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




18)必要なツイートだけをサイトに表示させる

検索語やハッシュタグ、ユーザー名を抽出
検索語を指定して表示させたり出来る代物。
とくに優れたポイントは、ハッシュタグ検索、ユーザー検索などがオプションで設定出来る点。
どういう事かと言うと、例えば「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は日本語からのみ検索。
そのほかのオプション、詳しくはドキュメント参照。
ダウンロード、ドキュメントはこちら



19)要素をグリッドにかっちり収めるプラグイン

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



20)様々なシチュエーションをカバーするツールチップ

様々なシチュエーションでつかえるツールチップ

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

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


非同期で読み込ませたり
非同期で読み込ませたり


ツールの色かえたり
ツールの色変えたり

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

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



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

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



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

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

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



23)スライダーイメージギャラリーの設置

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



24)コンパクトニュースボックスの設置

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

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



25)ポラロイド写真ギャラリーで注目をあつめる

ポラロイド写真風ギャラリー
サンプルデモ

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

FLASHのようにXMLを使うわけではなく、直接HTMLファイルに書き込む形となります。
アルバム名
ただし、アルバム名は日本語がつけれるが、ポラロイドの下部に入る部分は半角英語のみとなっているのでご注意を。
ダウンロードはこちらから



26)カラーピッカーをサイトに設置

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

他にも以下のようなものも人気です。
カラーピッカー
jQuery color plugin xcolor - Website and Application Intelligence



27)簡易リストYoutubeプレイヤー

簡易リストYoutubeプレイヤー
サンプルデモ1サンプルデモ2
Youtubeをちょっとだけ変わった表示としてサイトに貼り付ける事ができるプレイヤー。
サンプル2ではタイル状に並べた画像をクリックすると、その画像がプレイヤーに変換されると言うもの。
クリックした画像が動画に
ダウンロードとドキュメント

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



28)手軽にグリッドを無視したデザインを導入

手軽にグリッドを無視したデザインの導入
サンプルデモはこちら
もはや話題すぎてこんなのは紹介されたくないと言う人も居るかもしれませんが、定番であり、導入も簡単。
さらに手軽にグリッドデザインを無視したポイントが作れますのでとても人気のプラグインです。
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
});




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

iPhoneのセレクトボタン風にフォームを変更する
サンプルデモ、ダウンロードはこちら
もはや説明不要かと。ギャラリーのように大きな仕事はしませんが、シンプルでかっこいいプラグインです。

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



30)iGoogleみたいな、アレ

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



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

ハイクオリティイメージギャラリー

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



おまけ2)lightbox系いっぱい

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


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


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

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


それでは、また。



スポンサーリンク

トップへ戻る

Twitter版のネタ帳では毎週月曜~金曜までWeb屋さんに役立つ色んな情報や単なるネタまでをつぶやいています。

関連するエントリー

コメント

この記事にコメントする人はクリック

コメントポリシーをお読みください
管理者にだけ表示を許可する

渡辺 お疲れ様です

お疲れ様です(*^▽^)/ 使えそうなjQueryばかりで目移りします!!

2010/11/17 Wed 11:25| |

- 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2010/11/22 Mon 17:51| |

yuki ありがとうございます

ここにもうちょっとこだわりたい!でもFlash作るのも・・・という時に便利なモノがいっぱいですね。使わせてもらいます!

2010/12/10 Fri 11:52| |

トラックバック

この記事にトラックバックする人はクリック

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

http://e0166.blog89.fc2.com/blog-entry-816.html 記事自体は昨年のものですが、今でも十分使えるものばかり。 こういうのをサラッと使えるようになりたい。...

3RiseCreative BLOG:2011-09-16 11:07

FC2Ad

広告


IT・Web業界の求人なら転職サイトgreen(グリーン) ホームページテンプレート、WordPressテーマ、Facebookページテンプレートならクラウドテンプレート ネットマーケティングとは│ネットマーケティング検定 SEOコンサルティング&SEO対策 無料レスポンシブWebデザインテンプレート 広告主募集

あわせて読みたい
フィードメーター - ホームページを作る人のネタ帳

人気の記事一覧

あなたのブログの再訪問者を増やす50の方法

私の経験から感じた事を書き記します。全てが全てその時々で、正しいとは限りませんが、一つの指針としてお使いください。因みに全部リスト化すると230くらいありましたが、それはきっとセミナーとかでやるかなぁと。

http://e0166.blog89.fc2.com/blog-entry-824.html

あなたの生活を確実に拘束し時間を浪費させる動画50

今回は生産性を向上させる事ばかり考えて記事を書いてきたので、逆に年末にかけて忙しい皆さんの時間を出来るだけ拘束し、忙しさを倍増させるものが無いかを考えました。その結果、動画で行こうと言う事になったのが1ヶ月以上前。動画閲覧本数はおそらく600本以上。その中から、おもしろそうなものを50個ベストチョイスいたしました。

http://e0166.blog89.fc2.com/blog-entry-820.html

webデザインのセンスを磨く○○系のwebデザインまとめ

webデザインを学ぶならwebデザインから。と言うわけで、今回は海外のエントリを中心に、○○系のまとめをまとめます。

http://e0166.blog89.fc2.com/blog-entry-817.html

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

もはやこの業界ではかなり浸透しつつあるjQuery。今回はそんなjQueryにスポットを当て、本年度紹介された中でも、ホットなトレンドプラグインをご紹介します。

http://e0166.blog89.fc2.com/blog-entry-816.html

ツイッターの日常における35の行動パターン

私が良く見かける35の行動パターンに名前をつけてみようと思う。年末の誰も見てない時に公開しようと思っていた、ただのネタだったのですが、結構時間がかかりこの時期に・・・。

http://e0166.blog89.fc2.com/blog-entry-823.html

ウェブデザイナーのためのウェブアプリ15

OSがWindowsであろうと、ubuntuであろうと、共通のサービスを受けることができるのがウェブアプリケーションです。ウェブデザイナーの中には、自宅ですでにubuntuを利用している人も多い。また、Mac、Windowsと、各自それぞれの使いやすい物を利用していると思います。

http://e0166.blog89.fc2.com/blog-entry-784.html

愛用するGoogleChromeエクステンション12個

この2年でノートPC2台購入。自他のPCはクラッシュしてリカバリー。会社のPCは新しいのがあたり、再セットアップ。そんなこんなで、会社はまぁともかくとして、とりあえず全PCが比較的3ヶ月に一度リカバリーしてもいいように、自分用にメモとして残しておきます。

http://e0166.blog89.fc2.com/blog-entry-784.html

文章や会話のプレゼンテーションを向上させる方法

文章力がないためにプレゼンに失敗した、会話がうまくできずにプレゼンに失敗した。こういう経験はなかなか無い。なぜなら多くの場合、失敗したことに気がつかないからです。

http://e0166.blog89.fc2.com/blog-entry-802.html

サイトの裏側の意識を変え売り上げをアップする方法

ネットショップ運営者が、あることをちょっとだけ始めてみただけでわずか5ヶ月で売り上げが3倍になりました。はたして、webサイト運営がどのように変わったのでしょうか。。

http://e0166.blog89.fc2.com/blog-entry-749.html

webサイトのリピーターを増やすさりげない5つのコツ

多くのビジネスサイトのアクセス数を支えている大手検索サイト、Yahoo、Googleのアルゴリズムが変わる事で、突然商売がひっくり返る事態を回避する方法。

http://e0166.blog89.fc2.com/blog-entry-746.html
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。