ECサイト制作時に便利なjQueryスニペットやプラグイン

  • Posted on
  • Category : Tips
ECサイト制作時に便利なjQueryスニペットやプラグイン

商品のズーム機能やセール情報のカウントダウン表示といったような、ECサイト制作時に便利なjQueryスニペットやプラグインを備忘録兼ねて紹介します。上手く取り入れればユーザビリティの向上に大きく繋がってくると思いますが、見た目が良いからなどの安易な理由で闇雲に取り入れても逆にユーザビリティを損ねかねないので、本当に必要かしっかり考慮する必要があります。

※各プラグインはChromeやFirefoxなどの各種ブラウザとIEは7以上で動作するもので、一部のプラグインはIE6にも対応しています。
使用の際は、ライセンス確認なども併せてご自身で再度確認をお願いします。

ECサイト制作時に便利なjQueryスニペットやプラグイン 目次

  1. パンくずをスリムに見せられる「jBreadCrumb」
  2. 画像の一部を拡大するズーム機能を実装できる「elevatezoom」
  3. 画像を360度回転できる「Threesixty-slider」
  4. スライダーやカルーセルを簡単に設置できる「bxSlider」
  5. 決められた領域で多くの商品を紹介したい時に便利なアコーディオンやタブ切り替えを実装する
    1. アコーディオン – タイプ1
    2. アコーディオン – タイプ2
    3. タブ切り替え
  6. カウントダウンを実装する「jQuery Countdown」
  7. メガメニューを実装する
    1. Amazon風メニューを実装する「jQuery-menu-aim」
    2. よくあるメガメニューを実装する「jQuery Mega Drop Down Menu Plugin」
    3. 横に出るメニューを実装する「jQuery Vertical Mega Menu Plugin」
  8. ニュースティッカーを実装する
    1. jQueryでニュースティッカーをシンプルに実装する方法
    2. アニメーションするニュースティッカー「jQuery News Ticker」
  9. スターレーティング機能を実装する「jQuery Raty」
  10. その他

1. パンくずをスリムに見せられる「jBreadCrumb」

パンくずをスリムに見せられる「jBreadCrumb」

多くの商品を掲載していて細かくカテゴリー分けしたことにより階層が深くなっているサイトや商品名やキーワードなどでページタイトルが非常に長くなってしまっているサイトなど、長くて見辛くなってしまっているパンくずをスリムに見せることができるプラグインです。
使い方も非常に簡単で、既に設置されているものに適用させるのも容易にできると思います。

使用方法

jBreadCrumb」からファイルをダウンロード後にそれぞれ任意の場所に配置して読み込ませます。
例としてソースは以下のようになります。

HTML

<head>
	<link rel="stylesheet" href="css/BreadCrumb.css" type="text/css" />
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/jquery.easing.js"></script>
	<script type="text/javascript" src="js/jquery.jBreadCrumb.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$('#breadCrumb').jBreadCrumb({
				// option here...
			});
		})
	</script>
</head>

<body>
	<div id="breadCrumb" class="breadCrumb">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">Category01</a></li>
			<li><a href="#">Category02</a></li>
			<li><a href="#">Category03</a></li>
			<li><a href="#">Category04</a></li>
			<li><a href="#">Category05</a></li>
			<li>Product Name</li>
		</ul>
	</div>
</body>

アニメーションスピード、イージング、表示幅の最大・最小それぞれの数値指定、予めオープンさせておく要素の指定などといったオプションも幾つか用意されています。
デモとダウンロードは以下より。

目次へ

2. 画像の一部を拡大するズーム機能を実装できる「elevatezoom」

画像の一部を拡大するズーム機能を実装できる「elevatezoom」

よく小さい画像を配置してライトボックスなどを使って大きい画像を表示するというのを見かけますが、「elevatezoom」はカーソルを合わせた部分のみを拡大して見せることができ、画像の細部を見せたい場合に非常に便利なプラグインです。

使用方法

elevatezoom」からファイルをダウンロード後にそれぞれ任意の場所に配置して読み込ませます。
例としてソースは以下のようになります。

HTML

<head>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/jquery.elevateZoom.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$('#zoom').elevateZoom({
				// option here...
			});
		})
	</script>
</head>

<body>
	<img id="zoom" src="images/small-image.jpg" data-zoom-image="images/large-image.jpg" />
</body>

まず小さい画像を通常のimgの感じで配置して、そこにdata-zoom-imageで拡大された時に表示する用の画像を指定します。
イージング、シェイプ、大きさ、表示位置などを設定できるオプションも幾つか用意されているおり、詳しくは「Configuration Options」で確認ができます。

上記ソースはベーシックなタイプのものですが、ギャラリーやライトボックスの機能も実装したものやレンズで覗いているように見せるものなど、シンプルなものから少し凝った感じまで様々な見せ方をすることができます。
これらは配布サイトでサンプルとして紹介されているので、そちらでどのようなものが実装できるかを確認できます。

ちなみにライトボックスを探しているという場合は、以前エントリーにしているのでこちらも参考にしてみてください。

目次へ

3. 画像を360度回転できる「Threesixty-slider」

画像を360度回転できる「Threesixty-slider」

画像をドラッグで任意に動かして見せることができるプラグイン。
サンプルでも車が使用されているように、自動車メーカーのサイトなどでFlashを使ったものなどを見かけますが、それをjQueryで実装したものです。
ドラッグ操作だけでなく、自動回転やコントロールで回転させることもあります。

使用方法

Threesixty-slider」もしくは「GitHub」からファイルをダウンロード後にそれぞれ任意の場所に配置して読み込ませます。
例としてソースは以下のようになります。

HTML

<head>
	<link rel="stylesheet" href="css/360.css" type="text/css" />
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/threesixty.min.js"></script>
	<script type="text/javascript">
		window.onload = init;
		
		var product;
		function init(){
			product = $('.product').ThreeSixty({
				totalFrames: 52,
				endFrame: 52,
				currentFrame: 1,
				imgList: '.threesixty_images',
				progress: '.spinner',
				imagePath:'images/',
				filePrefix: 'car-',
				ext: '.jpg',
				width: 700,
				height: 350,
				navigation: true
			});
		}
	</script>
</head>

<body>
	<div class="threesixty product">
		<div class="spinner"><span>0%</span></div>
		<ol class="threesixty_images"></ol>
	</div>
</body>

少し面倒な感じですが、上記のようにしてフレーム(画像)数、表示させる箇所、画像のパスや拡張子、ナビゲーションの有無などをオプションで指定します。
また、一番肝心な回転させる画像ですが、様々な角度からのものを予め準備しておく必要があります。
(ちなみに、配布サイトのひとつ目のサンプルでは52枚の画像を使用して実装しています)

ページ内に複数設置することもできたり、ドラッグ操作をスクロールバーに変更したりすることもでき、それらの実装方法に関してはサンプルで確認できます。
プラグインやオプションの詳細、ダウンロード、サンプルなどは以下より。

目次へ

4. スライダーやカルーセルを簡単に設置できる「bxSlider」

スライダーやカルーセルを簡単に設置できる「bxSlider」

キャンペーンなどの情報が入ったバナーをローテーションで表示させたり、関連する商品などといった複数の商品を紹介したい時など、スライダーやカルーセル機能を実装したい時に便利なプラグインです。
こういった機能を実装できるプラグインは探したらキリがないくらい他にも沢山ありますが、今回は非常に簡単に設置やカスタマイズができて、レスポンシブにも対応していることから個人的にお世話になっている「bxSlider」を紹介します。

使用方法

bxSlider」からファイルをダウンロード後にそれぞれ任意の場所に配置して読み込ませます。
例としてスライダーを設置したい際は以下のように記述します。

HTML

<head>
	<link rel="stylesheet" href="css/jquery.bxslider.css" type="text/css" />
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/jquery.bxslider.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$('.bxslider').bxSlider({
				// option here...
			});
		});
	</script>
</head>

<body>
	<ul class="bxslider">
		<li><img src="images/pic1.jpg" /></li>
		<li><img src="images/pic2.jpg" /></li>
		<li><img src="images/pic3.jpg" /></li>
	</ul>
</body>

上記の記述をするだけでスライダーを設置することができます。
切り替えの動きをフェードに変更、キャプションを表示、ページャーを設置などといったこともオプションが多数用意されているので簡単に自分好みに変更できます。

また、カルーセルを設置する場合は以下のように表示させたい要素の大きさや数などを指定することで実装できます。

HTML

<head>
	<link rel="stylesheet" href="css/jquery.bxslider.css" type="text/css" />
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/jquery.bxslider.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$('.carousel').bxSlider({
				slideWidth: 200,
				minSlides: 2,
				maxSlides: 2,
				slideMargin: 10
			});
		});
	</script>
</head>

<body>
	<ul class="carousel">
		<li><img src="images/pic1.jpg" /></li>
		<li><img src="images/pic2.jpg" /></li>
		<li><img src="images/pic3.jpg" /></li>
		<li><img src="images/pic4.jpg" /></li>
		<li><img src="images/pic5.jpg" /></li>
	</ul>
</body>

配布サイトでは様々なサンプルが全部で19種用意されており、「Examples」で確認することができます。
また、先述したようにオプションも多数用意されており、詳細は「Options」で確認できます。

目次へ

5. 決められた領域で多くの商品を紹介したい時に便利なアコーディオンやタブ切り替えを実装する

決められた領域で多くの商品を紹介したい時に便利なアコーディオンやタブ切り替えを実装する

ごちゃごちゃさせたくないけど沢山の商品や情報を掲載したい時に便利なアコーディオンやタブ切り替えを実装する方法です。
いずれもシンプルな記述で実装でき、ちょっとした見栄えもCSSで簡単に変更できます。

5-1. アコーディオン – タイプ1

jQueryを使用してクリックした箇所のみが開閉するタイプのアコーディオンを実装する方法です。
それぞれ下記のように記述します。(CSSはjQuery内に記述する方法でも問題ありません。)

jQuery

$(document).ready(function(){
	$('.accordion dt').click(function() {
		$(this).toggleClass('open');
		$(this).next().slideToggle();
	});
});

HTML

<dl class="accordion">
	<dt>Menu 01</dt>
	<dd>Menu 01 contents...</dd>
	<dt>Menu 02</dt>
	<dd>Menu 02 contents...</dd>
	<dt>Menu 03</dt>
	<dd>Menu 03 contents...</dd>
</dl>

CSS

dt { cursor: pointer;}
dd { display: none;}

アコーディオンの開閉時それぞれで見栄えを変えたい時は、アコーディオンが開いている状態でdt要素にopenというクラスが付加されるようになっているので、それを用いることで簡単に変更できます。
クラス名を変更したい時は赤字部分を任意のものに変更してください。

5-2. アコーディオン – タイプ2

先程のものとは違い、ひとつしか開かないタイプのアコーディオンを実装する方法です。
HTMLとCSSはタイプ1で使用したものをそのまま使用できるので、jQueryの記述のみ下記のように変更します。

jQuery

$(document).ready(function(){
	$('.accordion dt').click(function() {
		$(this).next('dd').slideToggle();
		$(this).next('dd').siblings('dd').slideUp();
		$(this).toggleClass('open');
		$(this).siblings('dt').removeClass('open');
	});
});

タイプ1と同様にアコーディオンが開いている状態でdt要素にopenというクラスが付加されるようになっているので、見栄えなどを変更する際はそれを用いることで簡単に変更できます。
クラス名を変更したい時は赤字部分を任意のものに変更してください。

5-3. タブ切り替え

シンプルなタブ切り替えを実装する方法で、それぞれ下記のように記述します。

jQuery

$(document).ready(function(){
	$('.tab .area').hide();
	$('.tab .area:first').show();
	$('.tab-nav li:first').addClass('active');
	
	$('.tab-nav li').click(function() {
		$('.tab-nav li').removeClass('active');
		$(this).addClass('active');
		$('.tab .area').hide();
		$($(this).find('a').attr('href')).show();
		return false;
	});
});

HTML

<div class="tab">
	<ul class="tab-nav">
		<li><a href="#tab01">Tab 01</a></li>
		<li><a href="#tab02">Tab 02</a></li>
		<li><a href="#tab03">Tab 03</a></li>
		<li><a href="#tab04">Tab 04</a></li>
	</ul>
	<div id="tab01" class="area"> Tab 01 contents... </div>
	<div id="tab02" class="area"> Tab 02 contents... </div>
	<div id="tab03" class="area"> Tab 03 contents... </div>
	<div id="tab04" class="area"> Tab 04 contents... </div>
</div>

切り替えタブの部分は、現在開いているタブにactiveというクラスが付加されるようになっているので、見栄えなどを変更する際はそれを用いることで簡単に変更できます。
クラス名を変更したい時は赤字部分を任意のものに変更してください。

それぞれ簡単なデモを用意したので、実装の動きは以下より確認できます。

目次へ

6. カウントダウンを実装する「jQuery Countdown」

カウントダウンを実装する「jQuery Countdown」

よく見かける「セール終了まであと○日!」みたいなカウントダウンを実装する方法です。
カウントダウン系のプラグインは他にも沢山ありますが、幾つか試した中でIEでも問題なく動いて、実装や見栄えの変更なども容易にできる印象がある「jQuery Countdown」を紹介します。

使用方法

jQuery Countdown」からファイルをダウンロード後にそれぞれ任意の場所に配置して読み込ませます。
中には沢山のファイルがありますが、基本的に必要なのはjquery.countdown.jsと和訳用のjquery.countdown-ja.jsになります。
下記は例として「2013年7月1日午前10時」までのカウントダウンを設定して、設定期間を過ぎたら「終了しました」という文言を出すというものを実装する方法です。

HTML

<head>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/jquery.countdown.js"></script>
	<script type="text/javascript" src="js/jquery.countdown-ja.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$('#countdown').countdown({
				until: new Date(2013, 07 - 1, 01, 10, 00, 00),
				format: 'DHMS',
				alwaysExpire: true,
				onExpiry: function(){
					$('#countdown').html('<p>終了しました。</p>');
				}
			});
		});
	</script>
</head>

<body>
	<div id="countdown"></div>
</body>

期間の設定はuntilの赤字部分で変更ができ、左から「年, 月, 日, 時, 分, 秒」となっています。
表示されるフォーマットはformatalwaysExpireで期間終了後の動きの設定、期間終了後にカウントダウンが表示されていた箇所の文言を変えたりバナーを表示させたりといった変更の設定をonExpiryでします。
alwaysExpireはデフォルトではfalseになっており、そのままだと期間終了時にアクセスした時にonExpiryで指定したものが表示されないので、onExpiryを設定している場合はここを忘れずtrueで指定しておく必要があります。

配布サイトでは他にも様々なタイプのカウントダウンのサンプルが用意されており、また「Quick Ref」で各オプションなどを確認できます。

目次へ

7. メガメニューを実装する

メガメニューを実装する

グローバルナビゲーションなどでドロップダウンを使って沢山のリンクを表示させたいときに便利なメガメニューを実装するプラグインで、商品やカテゴリーがかなりの量になってしまったけど、見栄えはスマートにしたいという時などに非常に便利です。
スライダーやカウントダウンなどと同様にメガメニューを実装するプラグインも数多くありますが、今回は実装やカスタマイズも容易にできるプラグインを3つ紹介します。

※画像はAmazon風メニューを実装する「jQuery-menu-aim」のサンプルをキャプチャしたものです。

7-1. Amazon風メニューを実装する「jQuery-menu-aim」

使いやすいと言われているAmazon風メニューを実装できるプラグインで、特徴としてはスムーズな動きやカーソルが離れてもメニューが閉じられずにそのまま表示されているなどがあります。

使用する際は「jQuery-menu-aim」からファイルをダウンロード後、他のプラグインと同様にそれぞれ任意の場所に配置して読み込ませ、実装したい箇所のIDやクラスを指定します。
ファイル内にはサンプルもあるので、見栄えや記述方法などで参考にできます。
オプションなどプラグインの詳細は以下より。

7-2. よくあるメガメニューを実装する「jQuery Mega Drop Down Menu Plugin」

よく見るメガメニューを実装できるプラグインで、マウスオンで表示されるものとクリックで表示されるものの2タイプを実装できます。
また、フェードかスライドかなどの動きの設定や表示スピードなども任意で指定できます。

使用する際は「jQuery Mega Drop Down Menu Plugin」からファイルをダウンロード後、他のプラグインと同様にそれぞれ任意の場所に配置して読み込ませ、実装したい箇所のIDやクラスを指定します。
オプション」「サンプル」などプラグインの詳細は以下より。

7-3. 横に出るメニューを実装する「jQuery Vertical Mega Menu Plugin」

一般的にメガメニューなどというと先程のように横に並んだメニューで下にドロップダウンが出るというのをよく見かけますが、このプラグインは縦に並んだメニューで横に飛び出すようなメニューを実装できます。

使用する際は「jQuery Vertical Mega Menu Plugin」からファイルをダウンロード後、他のプラグインと同様にそれぞれ任意の場所に配置して読み込ませ、実装したい箇所のIDやクラスを指定します。
オプション」「サンプル」などプラグインの詳細は以下より。

目次へ

8. ニュースティッカーを実装する

ニュースティッカーを実装する

お知らせや新着情報などを限られたスペースで表示させられるニュースティッカー。
多くの情報を知らせたい・見せたいという時は一覧リストのようなものの方がパッと見でわかるのでそちらを使用したほうが良いと個人的には思いますが、さり気なく表示させる程度で良いという場合に便利なプラグインです。

※画像はアニメーションするニュースティッカー「jQuery News Ticker」のサンプルをキャプチャしたものです。

8-1. jQueryでニュースティッカーをシンプルに実装する方法

数多くの便利なスニペットを掲載している「BlackFlag」さんで紹介されている方法で、シンプルなニュースティッカーを以下の3パターン実装できます。

  • フェード切り替え
  • 下からスライドイン
  • 右からスライドイン

基本的な使い方はjQueryとサイトで紹介されているスクリプトをそれぞれ読み込ませ、HTMLはul要素をdivなどのブロック要素で囲み、そこに任意のIDもしくはクラス指定と切り替えエフェクトの指定をrel属性で指定します。
あとはCSSで見栄えを整えるだけで実装できます。
また、切り替わる際のエフェクトスピード、切り替わるまでの待機時間、切り替わる際のエフェクトのイージング指定といったものも簡単に設定できます。

サイトでは使い方や実際の動きもサンプルで確認でき、文字数カットやイージング処理を変更するといったカスタマイズなども併せて紹介されています。

8-2. アニメーションするニュースティッカー「jQuery News Ticker」

左から右へ1文字ずつアニメーションしながら表示されるニュースティッカープラグイン。
スピードの設定値が遅いと全文表示されるまで少し待つ必要があるので、ユーザーによってはすぐ確認できなくて嫌う人もいそうですが、マウスオンすれば全文表示されるようになっており、またコントローラ機能がついているので前後の文章をすぐに確認することができます。

使用方法

jQuery News Ticker」からファイルをダウンロード後にそれぞれ任意の場所に配置して読み込ませます。
例としてソースは以下のようになります。

HTML

<head>
	<link rel="stylesheet" href="css/ticker-style.css" type="text/css" />
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/jquery.ticker.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$('#js-news').ticker({
				// option here...
			});
		})
	</script>
</head>

<body>
	<ul id="js-news" class="js-hidden">
		<li class="news-item"><a href="#">This is the 1st latest news item.</a></li>
		<li class="news-item"><a href="#">This is the 2nd latest news item.</a></li>
		<li class="news-item"><a href="#">This is the 3rd latest news item.</a></li>
		<li class="news-item"><a href="#">This is the 4th latest news item.</a></li>
	</ul>
</body>

上記のようにul要素を使ったシンプルな記述で簡単に実装することができ、オプションで表示やフェード切り替えのスピード、ポーズ時の長さ指定なども任意で設定できます。
デモとダウンロードは以下より。

目次へ

9. スターレーティング機能を実装する「jQuery Raty」

スターレーティング機能を実装する「jQuery Raty」

AmazonやAppStoreなどで見かけるようなスターを用いた評価機能を実装できるプラグイン。
数値を保存だとかの機能はもちろん別途作成する必要がありますが、見栄えや動きだけならこれで簡単にできます。

使用方法

jQuery Raty」からファイルをダウンロード後にそれぞれ任意の場所に配置して読み込ませます。
例としてソースは以下のようになります。

HTML

<head>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/jquery.raty.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$('#star').raty({
				// option here...
			});
		})
	</script>
</head>

<body>
	<div id="star"></div>
</body>

上記のように非常に簡単な記述で実装できます。
レーティング画像はダウンロードファイル内にも幾つか入っていますが、任意で変更したい場合も簡単な記述で変更できます。
また、予め付けておく数の指定やハーフ指定、ヒント表示、マウスオン時の挙動など、オプションも多数用意されています。
プラグインやオプションの詳細、ダウンロード、サンプルなどは以下より。

目次へ

以上、ECサイト制作時に便利なjQueryスニペットやプラグインでした。
過去に自分が使用したものや今後ECサイトで使えるかも(使用頻度が高いかも)と個人的に思ったものをまとめてみましたが、こっちのが汎用性あるよとかこんなのもあるよっていうのがあれば是非教えてください。

また、機能的に被っているのもあったりで上記では紹介していませんが、他にも下記のようなスニペットやプラグインもあるので、興味がある方はこちらも参考にしてみてください。

※下記プラグインは一部IEのバージョンによっては動かないものもあります。

Back to Top

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。