コピペでOK！楽天のページにjQueryで動くバナーを設置する方法
【新しい記事】こちらもあわせてどうぞ
「売れている楽天のショップ」 「担当のECCからここを参考にしたら良いと言われたショップ」 「なんかかっこいいなと思ったショップ」 それらのショップにはほとんどの場合「動くバナー」が設置されていたりしませんか？
「どうやってやるんだろう」「うちの店舗では無理だな」そんな風に思っている担当者の皆様ご安心下さい。ハカセの研究室なら簡単にコピペだけで導入出来ます。しかも無料です。
今まで出来なかった事が出来る。そう、jQueryならね。
いきなりうざい感じで始まりましたが、本日はやってみたいと考えてる方も多いはずの「jQuery（ジェイクエリー）」を使用した動くバナーの導入方法を説明します。
jQueryとは？
オープンソースのJavaScriptライブラリの一つ。2006年1月にJohn Resig氏が最初のバージョンを公開し、現在は有志プログラマによる開発者集団「jQuery Team」が開発・メンテナンスしている。
IT用語辞典 e-words より
これだけ読んでもさっぱり何の事かわからないかも知れません。実際私は1ミリも解りませんが、簡単に説明するとJavaScriptというプログラム言語を簡単にしてくれる拡張パーツみたいなものです。（多分…）
「簡単にしてくれる」と書きましたが、正確には「少ないコードで」と言った方が正しいかも知れません。コードが少なくて済めば当然ページは軽くなるので、読み込みで待たされる様な事も少なくなります。
さらに大きなメリットとしては、ほとんどのデバイスのほとんどのブラウザで動いてくれると言う事があります。
一昔前、ホームページの動くパーツと言えばgifアニメかFlashでした。Flashはプレイヤーがインストールされていないと再生出来ない（動かない）うえ、iPhoneやiPadなどのiOSでは実質再生不可だったりと不便でした。（もちろん便利な点もたくさんあります）
そこでここ数年人気になって来たのがjQueryを使った数々の仕掛け。動くバナー、ロールオーバーのアクション、スムーススクロールなど実に多くの事に使われています。
もちろん私も使ってます。
このサイトでも派手なところから地味なところまで、結構な数のjQueryのコードが動いています。ちなみに画面左下にあるページ上部へ戻るボタンを押すとスムースに上部までスクロールするのですが、そちらのコードはこんな感じ。
$(function(){
$('a[href^=#]').click(function(){
var speed = 500;
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
$("html, body").animate({scrollTop:position}, speed, "swing");
return false;
});
});
KLUTCHE
[browser-shot width=”600″ height=”400″ url=”http://klutche.org/archives/536/”]
たったこれだけのコードで「アンカー（#）へのリンクをクリックしたらニューンとスムーズにスクロールしろ」的な事を実現しているのです。仕組みは良くわかりませんがすごい奴です。jQueryは出来る子です。
さて、じゃあそろそろ本題。どうやってjQueryを（正しくはjQuery依存のコードを）楽天のページで動かすのか。
jQueryバナー実装の流れ
なぜわざわざiframeで読み込むのかというと、商品ページやカテゴリページなど楽天RMSで作るページにはscriptタグが使用出来ないからです。
バナーの画像を用意
こればっかりはこちらで用意出来ないので、ご自分でご用意下さい。記事内ではダミーの画像を使用します。
jQueryファイルのリンクを貼る
jQueryの本家サイトから、最新のjQueryライブラリファイルを ダウンロードして下さい。「Download the compressed, production jQuery 2.0.2」のリンクを右クリックしてファイルを保存して下さい（Macの方はoption＋クリック）。
ダウンロードした「jquery-2.0.2.min.js」をGOLDにアップします。
アップしたjQueryライブラリファイルを読み込むタグを、GOLDのページの</body>の直前あたりにコピペ。（ファイルのURLを書き換えるのを忘れずに）
<script type="text/javascript" src="アップした「jquery-2.0.2.min.js」のURL"></script>
JavaScriptとHTMLを書く
ここでちょっと補足説明。「jQuery スライドバナー」とか「jQuery バナー」とかで検索すると色々なコードが公開されていますが、そのコードには「プラグイン」タイプと「コードのみ」のタイプがあります。
「プラグイン」タイプの場合は、コードが外部ファイル（～.jsというjavascriptファイル）になっているので、上で読み込んだjQueryのライブラリファイルと同じようにGOLDにアップした上でリンクを貼ります。
<script type="text/javascript" src="プラグインの「～.js」のURL"></script>
コードのみの場合は<body></body>の直前に<script type=”text/javascript”></script>で囲んで該当のコードを記載します。
※なんでjavascriptを<body>の最後に書くかって言うのは、めんどくさいので説明しませんがその方がページの読み込みが早いからと覚えておいて下さい。
実際にやってみる
リンク先の説明通りに作ってみれば、ほとんど調整しなくても簡単に出来るはずです。（感謝です）
GOLDにアップするページのソースはこんな感じになるはずです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-jp">
<title>jQueryを使ったスライドバナー</title>
<style type="text/css">
/* .slideShow
------------------------- */
.slideShow {
margin: 0 auto;
text-align: left;
display: none;
}
/* .mainView
------------------------- */
.slideShow .mainView {
width: 100%;
position: relative;
overflow: hidden;
}
.slideShow .mainView ul {
width: 100%;
overflow: hidden;
position: relative;
}
.slideShow .mainView ul li {
top: 0;
left: 0;
width: 100%;
position: absolute;
}
.slideShow .mainView ul li img {
width: 100%;
}
/* .thumbNail
------------------------- */
.slideShow .thumbNail {
width: 100%;
overflow: hidden;
}
.slideShow .thumbNail ul {
width: 110%;
}
.slideShow .thumbNail ul li {
float: left;
display: inline;
overflow: hidden;
cursor: pointer;
}
.slideShow .thumbNail ul li img {
width: 100%;
}
.slideShow .thumbNail ul li.active {
filter: alpha(opacity=100)!important;
-moz-opacity: 1!important;
opacity: 1!important;
}
/* sideNavi
------------------------- */
.slideShow .mainView .btnPrev,
.slideShow .mainView .btnNext {
top: 0;
width: 5%;
height: 100%;
position: absolute;
z-index: 100;
}
.slideShow .mainView .btnPrev {
left: 0;
background: #ccc url(../img/btnPrev.png) no-repeat center center;
}
.slideShow .mainView .btnNext {
right: 0;
background: #ccc url(../img/btnNext.png) no-repeat center center;
}
/* =======================================
ClearFixElements
======================================= */
.slideShow ul:after {
content: ".";
height: 0;
clear: both;
display: block;
visibility: hidden;
}
.slideShow ul {
display: inline-block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slideShow { margin:0;}/*全体の入れ物を左寄せに*/
</style>
</head>
<body>
<div class="slideShow">
<!-- ・各画像のURLを使用するものに変更する
・リンク先（#1から#6まで）を必要に応じて変更する -->
<div class="mainView">
<ul>
<li><a href="#1"><img src="banner01.jpg" alt=""></a></li>
<li><a href="#2"><img src="banner02.jpg" alt=""></a></li>
<li><a href="#3"><img src="banner03.jpg" alt=""></a></li>
<li><a href="#4"><img src="banner04.jpg" alt=""></a></li>
<li><a href="#5"><img src="banner05.jpg" alt=""></a></li>
<li><a href="#6"><img src="banner06.jpg" alt=""></a></li>
</ul>
</div><!--/.mainView-->
<div class="thumbNail">
<ul>
<li><img src="banner01.jpg" alt=""></li>
<li><img src="banner02.jpg" alt=""></li>
<li><img src="banner03.jpg" alt=""></li>
<li><img src="banner04.jpg" alt=""></li>
<li><img src="banner05.jpg" alt=""></li>
<li><img src="banner06.jpg" alt=""></li>
</ul>
</div><!--/.thumbNail-->
</div><!--/.slideShow-->
<!-- ↓のsrc=""の中をアップしたライブラリファイルのURLに変更 -->
<script type="text/javascript" src="jquery-2.0.2.min.js"></script>
<script>
$(function(){
$(window).load(function(){
var setWrap = $('.slideShow'),
setMainView = $('.mainView'),
setThumbNail = $('.thumbNail'),
setMaxWidth = 800,
setMinWidth = 320,
thumbNum = 6,
thumbOpc = 0.5,
fadeTime = 1000,
delayTime = 5000,
sideNavi = 'on', // 'on' or 'off'
autoPlay = 'on'; // 'on' or 'off'
setWrap.each(function(){
var thisObj = $(this),
childMain = thisObj.find(setMainView),mainUl = childMain.find('ul'),mainLi = mainUl.find('li'),mainLiFst = mainUl.find('li:first'),
childThumb = thisObj.find(setThumbNail),thumbUl = childThumb.find('ul'),thumbLi = childThumb.find('li'),thumbLiFst = childThumb.find('li:first'),thumbLiLst = childThumb.find('li:last');
thisObj.css({width:setMaxWidth,display:'block'});
mainLi.each(function(i){
$(this).attr('class','view' + (i + 1).toString()).css({zIndex:'98',opacity:'0'});
mainLiFst.css({zIndex:'99'}).stop().animate({opacity:'1'},fadeTime);
});
thumbLi.click(function(){
if(autoPlay == 'on'){clearInterval(setTimer);}
var connectCont = thumbLi.index(this);
var showCont = connectCont+1;
mainUl.find('.view' + (showCont)).siblings().stop().animate({opacity:'0'},fadeTime,function(){$(this).css({zIndex:'98'});});
mainUl.find('.view' + (showCont)).stop().animate({opacity:'1'},fadeTime,function(){$(this).css({zIndex:'99'});});
$(this).addClass('active');
$(this).siblings().removeClass('active');
if(autoPlay == 'on'){timer();}
});
thumbLi.css({opacity:thumbOpc});
thumbLiFst.addClass('active');
// メイン画像をベースにエリアの幅と高さを設定
var mainLiImg = mainLi.find('img'),
baseWidth = mainLiImg.width(),
baseHeight = mainLiImg.height();
// レスポンシブ動作メイン
imgSize();
function imgSize(){
var windowWidth = parseInt($(window).width());
if(windowWidth >= setMaxWidth) {
thisObj.css({width:setMaxWidth});
childMain.css({width:baseWidth,height:baseHeight});
mainUl.css({width:baseWidth,height:baseHeight});
mainLi.css({width:baseWidth,height:baseHeight});
thumbLi.css({width:((setMaxWidth)/(thumbNum))});
} else if(windowWidth < setMaxWidth) {
if(windowWidth >= setMinWidth) {
thisObj.css({width:'100%'});
childMain.css({width:'100%'});
mainUl.css({width:'100%'});
mainLi.css({width:'100%'});
} else if(windowWidth < setMinWidth) {
thisObj.css({width:setMinWidth});
childMain.css({width:setMinWidth});
mainUl.css({width:setMinWidth});
mainLi.css({width:setMinWidth});
}
var reHeight = mainLiImg.height();
childMain.css({height:reHeight});
mainUl.css({height:reHeight});
mainLi.css({height:reHeight});
var reWidth = setThumbNail.width();
thumbLi.css({width:((reWidth)/(thumbNum))});
}
}
$(window).resize(function(){imgSize();});
imgSize();
// サムネイルマウスオーバー
var agent = navigator.userAgent;
if(!(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1)){
thumbLi.hover(function(){
$(this).stop().animate({opacity:'1'},200);
},function(){
$(this).stop().animate({opacity:thumbOpc},200);
});
}
// ボタン移動動作
function switchNext(){
var setActive = thumbUl.find('.active');
setActive.each(function(){
var listLengh = thumbLi.length,
listIndex = thumbLi.index(this),
listCount = listIndex+1;
if(listLengh == listCount){
thumbLiFst.click();
} else {
$(this).next('li').click();
}
});
}
function switchPrev(){
var setActive = thumbUl.find('.active');
setActive.each(function(){
var listLengh = thumbLi.length,
listIndex = thumbLi.index(this),
listCount = listIndex+1;
if(1 == listCount){
thumbLiLst.click();
} else {
$(this).prev('li').click();
}
});
}
// サイドナビボタン（有り無し）
if(sideNavi == 'on'){
childMain.append('<a href="javascript:void(0);" class="btnPrev"></a><a href="javascript:void(0);" class="btnNext"></a>');
var btnPrevNext = $('.btnPrev,.btnNext'),btnPrev = $('.btnPrev'),btnNext = $('.btnNext');
if(!(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1)){
btnPrevNext.css({opacity:thumbOpc}).hover(function(){
$(this).stop().animate({opacity:'0.9'},200);
},function(){
$(this).stop().animate({opacity:thumbOpc},200);
});
} else {
btnPrevNext.css({opacity:thumbOpc});
}
btnPrev.click(function(){switchPrev();});
btnNext.click(function(){switchNext();});
}
// 自動再生（有り無し）
if(autoPlay == 'on'){
function timer(){
setTimer = setInterval(function(){
switchNext();
},delayTime);
}
timer();
}
});
});
});
</script>
</body>
</html>
AKIKO様のご指摘によりスタイルシートを一部修正。2013/11/19
見本はこんな感じです。→見本
CSSで調整（必要であれば）
今回は参考にしたblack-flag.netさんで全部用意してくれてたので、サクッとコピペのみで行けました（感謝・感謝）が、iframeで読み込む事を考えて下記の1行を追加しました。
.slideShow { margin:0;}/*全体の入れ物を左寄せに*/
iframeで商品ページやカテゴリページに読み込む
出来たページの動作確認をしたら、GOLDにアップして、バナーを置きたいページの置きたい部分に下記のコードを追加します。
<iframe src="アップしたバナーのページのURL" frameborder="0" scrolling="no" width="460" height="400" align="left"></iframe>
こんな感じで表示されるはずです。
なんだそんなに難しくないじゃん
どうでしょう、私の文章力の無さで説明は長くなってしまいましたが、仕組みさえわかってしまえばそんなに難しくないのではないでしょうか。
動くバナーを設置したらすぐ売上が上がるってものではありませんが、人気【ひとけ】を演出できたり、狭いスペースで複数の商品へのリンクが設置出来たり、動く事で目立ったりとメリットは少なからずあります。
ネット上にはまだまだたくさんのコードが公開されていますので、色々と導入してみてはいかがでしょう（やりすぎ注意です）。毎日少しづつでも「お客さんが来たくなる売り場」「安心して買いたくなる売り場」を作っていく事が大事だと思います。
それではまた。
ハカセ 
mmmtonatto 
安森 盛貞 
平山 
toriii 
AKIKO 
yama 
solid 
yu 
質問者 
como 
38138 
sabano 
tonecchi 
yuka 
SUさん 
ｋA 
kuro 
博士様
こんにちは。
とっても役に立つ記事をありがとうございます！
色々調べたのですが、迷子になりつつあるので、
質問させてください。
場違いだったら消去してください！
今楽天GOLDで編集しているのですが、下記のようなエラーが出てiframeが表示できません！
「The XSS Auditor refused to execute a script in ‘xxx’ because its source code was found within the request. The auditor was enabled as the server sent neither an ‘X-XSS-Protection’ nor ‘Content-Security-Policy’ header. 」
何かご助力いただければと思います。
よろしくお願いします！