【初心者向け】jQueryでスライドバナー最新版（2018年6月）
過去記事：こちらもどうぞ
コピペでOK！楽天のページにjQueryで動くバナーを設置する方法
ネットショップ担当者になったばかりで、HTMLやCSSもよくわからんのに、いきなり「このシュッて動くバナーのやつ作って」と上司に言われ、ググってググってこのページたどり着いたみなさん、こんにちわ。
そうでなくてもWEBデザイン初心者の方たちの役に立つ内容だと思いますので、まあだまされたと思って、最後までお付き合いいただければ幸いです。
あくまでHTMLやCSSの初心者、かつネットショップ担当者（特に楽天）に向けて記事を書いておりますので、その他に方には余計な記述もあります。「俺ネットショップ関係無いし」って方は、必要無い部分を読み飛ばしていただければ、通常の記事として読めると思います。
jQueryとは
引用 https://ja.wikipedia.org/wiki/JQuery
jQuery（ジェイクエリー）は、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計されたJavaScriptライブラリである。
ジョン・レシグが、2006年1月に開催された BarCamp NYC でリリースした。様々な場面で活用されており、JavaScriptライブラリのデファクトスタンダードと呼ぶ者もいる[2]。ロゴの下に表記されているキャッチコピーは「write less, do more」（「少ない記述で、もっと多くのことをする」の意）。
これだけ読んでも何にも分からないと思いますが、要約すると「javaScriptを便利に使える様にするやーつ」ということらしいです。
javaScriptについて
「じゃあ、javaScriptって何？」って方、安心してください。「ググれカス」という言葉をぐっと飲み込んで、説明します。
引用 https://ja.wikipedia.org/wiki/JavaScriptJavaScript（ジャバスクリプト）とは、プログラミング言語のひとつである。Javaと名前が似ているが、全く異なるプログラミング言語である（後述の#歴史を参照）。
JavaScriptはプロトタイプベースのオブジェクト指向スクリプト言語であるが、クラスなどのクラスベースに見られる機能も取り込んでいる。
ウェブブラウザ上で動作し動的なウェブサイト構築やリッチインターネットアプリケーションの開発に用いられる。また、2010年以降はnode.jsなどのサーバサイドJavaScript実行環境や各種ライブラリの充実により、MEANに代表されるように、Web開発の全ての領域で活用されるようになってきている。
ハイ！これまたよくわかりませんが、「HTMLやCSSで出来ない様な事も色々出来ちゃうすごいやーつ」であってます（多分）。 意外と重要なところは「WEBブラウザ上で動く」ってことです。WEBブラウザってのはインターネット・エクスプローラーやSafari、ChromeなどWEBサイトを見るときに使うソフトのことです。
最初に準備すること
さて、ここからは実践編、早速作ってみましょう。
見本はこんな感じです。
リンク先の商品やカテゴリページをリストアップ
ネットショップで使うならリンクを張って商品などを紹介することが多いハズですので、商品とリンク先をリストアップしておくと後で楽になります。
「決まって無いけどとりあえず作ってみる」って方はダミーを用意したので、こちらをご使用ください。
サイズを決めて画像を用意
サイトのどこに乗っけるかを決めて、サイズを決めておきましょう。slickではスライダーのレイアウトを選べるので、そのレイアウトによっても変わってきますが、ここでは割愛します。
「決まって無いけどとりあえず作ってみる」って方はダミーを用意したので、こちらをご使用ください。
GOLD用HTMLファイルの準備
まずはフォルダを用意して、名称を「slide」にでもしておきましょう。 （すでにサイトを持っていてそのローカルコピーがあるなら、その中に用意して下さい）
WEBエディタ（HTMLを編集するソフト）をお持ちの方は、新規HTMLファイルを用意して、「slide.html」として上記のフォルダ内に保存しましょう。
「WEBエディタって何だよ？持ってネーヨ」って方は、
Windowsの方は、
TeraPad や、サクラエディタ
Macの方は、
CotEditorや、mi
などを使用して、新規書類を作成し、下記内容をコピペして、「slide.html」という名前で保存して下さい。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
slickをダウンロード
slickのサイトにアクセスして、右側の「get it now」をクリックすると、下の方にスクロールするので、「Download Now」をクリックすとダウンロード出来ます。
ダウンロードしたものを解答するとフォルダの中に色々入っていますが、「slick」ってフォルダだけを使いますので、上記で用意したフォルダの中にコピーしておきましょう。 画像を移動させる 上の方で用意した画像を、先程用意したフォルダ「slide」に移動させて置きましょう。そのまま裸で入れるよりはフォルダに入れておいたほうが何かと便利なので「img」フォルダを作って入れました。
jQueryファイルをダウンロード
jQuery公式サイトから「Download the compressed, production jQuery 3.3.1」を右クリックして、「slide」フォルダの中にそのままの名前「jquery-3.3.1.min.js」で保存しておきましょう。
※この記事を書いているときはjQueryの最新版が3.3.1なので上記リンクやファイル名も3.3.1となっていますが、この数字部分は変わる可能性があります。
準備が出来ました。
出来たファイルはこんな感じになるはずです
作ってみる
準備が長くなりましたが、いよいよ製作に入ります。
必要なファイルを読み込みます。
HTMLファイルの中で<head>と</head>の間に下記内容をコピペします。
<link rel="stylesheet" type="text/css" href="slick/slick.css" media="screen" /> <link rel="stylesheet" type="text/css" href="slick/slick-theme.css" media="screen" /> <script src="jquery-3.3.1.min.js"></script> <script src="slick/slick.min.js"></script>
ファイルパスは必要に応じて修正して下さい。
HTMLの中で画像とリンク先を設定
HTMLファイルの中の<body>と</body>の間に下記内容をコピペします。
<ul class="slider">
<li><a href="リンク先URL" target="_blank"><img src="img/test01.gif"></a></li>
<li><a href="リンク先URL" target="_blank"><img src="img/test02.gif"></a></li>
<li><a href="リンク先URL" target="_blank"><img src="img/test03.jpg"></a></li>
<li><a href="リンク先URL" target="_blank"><img src="img/test04.jpg"></a></li>
<li><a href="リンク先URL" target="_blank"><img src="img/test05.jpg"></a></li>
</ul>
リストタグじゃなくても大丈夫みたいなので、わかる方は適宜変更して下さい。リンク先の設定も忘れずに！
楽天のショップで利用する事を考えると、iframeで呼び出す事になるので、aタグのtarget属性は_blankまたは_topなどにしておく必要があると思います。（わからない人はそのままでOK）
slickを動かすためのスクリプトを追加
<script>
$(function() {
$('.slider').slick({
autoplay: true, //オートプレイ
autoplaySpeed: 5000, //オートプレイの切り替わり時間
dots: true, //下の点々
easing: 'ease-in-out', //スライドの動きを制御
});
});
</script>
.sliderの部分はHTMLで指定した任意のクラス。
ローカルでテスト
よし！ここまで来たらとりあえずブラウザで見てみよう！
ブラウザを開いて出来たファイルをドラッグ＆ドロップするか、出来たファイルを右クリックして「プログラムから開く」を選び、テストで使うブラウザを選ぶと見れます。
動かない？
何かが間違ってるはず、原因を特定するために一つずつ試して行こう。
画像のパス（URL）が間違っているはず。imgタグだけで画像が表示され無いようならパスの間違い。
スタイルシートか、javaScriptのファイルへのパスが間違っている可能性大。 [上部へのリンク] ファイルを呼び出す順番も同じ様にしよう。
HTMLファイルの文字コードの問題の可能性大。文字コードを指定できるエディタで「UTF-8」に変更し、再度ためしてみよう。
やっと動いた？
見た目を少し修正して、本番環境にアップしてみよう。
<style>
body {
margin: 0;
padding: 0;
}
.slider {
width: 600px;
padding: 0;
margin: 0 0;
}
.slick-arrow {
z-index: 100;
}
.slick-prev {
left: 10px;
}
.slick-next {
right: 10px;
}
.slick-prev:before,
.slick-next:before {
color: #900;
}
.slick-dots {
bottom: 10px;
}
</style>
これを</head>の手前に追加して、もう一度見てみましょう。
ここまで来たらほぼ完成です。さっさくアップロードしてみましょう。
本番環境にアップロード
FTPのソフトを起動して楽天GOLDのサーバーに今まで作ったデータをアップロードします。（画像やslickフォルダも一緒にアップロードするのを忘れずに）
アップロードが終わったら再度チェックしてみましょう。このとき出来る限り色々なデバイス（PCやスマホ）からチェックしてみた方が良いです。
あなたの店舗のGOLDのURL/アップロードしたフォルダ名/slide.html
こんな感じのURLなはずなので、自分のPC、同僚のPC、自分のスマホなどからチェックしてみましょう。
表示されない、表示がおかしい場合、再度上部のチェックを行って見ましょう。
個人的な経験から言うと、ローカル（自分のPC）で動いていたものが、アップすると動かなくなる場合、8割くらいの確率でファイルのパスがおかしいです。
ファイルパスをチェックする方法
そのページをブラウザで開いて、F12を押し、デベロッパーツールを開く（IE、Chromeの場合） コンソール（Console）タブを表示、赤文字で「これこれのファイルがネーヨ」みたいなエラーメッセージが表示されていれば、そのファイルへのパスが間違っている。
エラーが出てないのに表示されていない場合は、他の原因だと思われます。
楽天のページ（RMSのページ）で表示させるには
せっかく出来たので、RMSで出来ているページ（商品ページや、カテゴリページ）でも表示したいのに…。
そんな時はiframeの出番です。
<iframe src="slide.html" id="if" scrolling="no"></iframe>
こんな感じで呼び出してあげましょう。srcの部分は先程アップしたファイルのURLに変更して下さい。
縦横サイズを指定するため、スタイルシートにちょっと追記します。
iframe#if {
width: 600px;
height: 400px;
margin: 0;
padding: 0;
}
iframeについて
iframeとは、HTMLファイルの中に別のHTMLファイルを埋め込む（呼び出す、読み込む）ことのできるHTMLタグです。
楽天のページの場合（Yahooショッピングもほぼ同じ）、システム（RMS）で自動生成するページでは、javaScript（jQuery）は使用できません。そのため、別のページでjavaScriptを使用し、それをシステムで自動生成したページで呼び出す事で、javaScriptを擬似的に使用することが可能になります。
「メンドクセーから普通にjavaScript使えるよーにしてくれや！」と思うのですが、javaScriptでは悪意を持ったプログラムも作ることは可能な訳で、セキュリティ上仕方が無い事なのだろうと思います。
まとめ
前回の記事が大分古くなってしまったので、改めて新記事を書いてみました。おもったより時間が掛かってしまいましたが、できる限りわかりやすく書いてみたつもりですので、全国のWEBデザイン初心者様、新米ネットショップ担当者様たちのお役に立てば幸いです。
それでは、現場からは以上です。
ハカセ 
ZEN 
TOM 
じゅん 
Keika 
ハカセ様
はじめまして！いつもこちらのブログを参考にさせていただいてます。
楽天GOLDでスライド画像を使いたく、こちらの記事を参考にして手順通りすすめていたのですが「slickを動かすためのスクリプトを追加」の項目が理解できずに行き詰まってしまいました。
わからないなりに、[script] [/script]をの前にコピーしてローカルテストを行いましたが、画像がズラッと並んでしまい上手くいきません。
初心者まるだしの質問で申し訳ございませんが、ご教示いただければ幸いです。