最終更新日:2018/08/28過去記事:こちらもどうぞコピペでOK!楽天のページにjQueryで動くバナーを設置する方法ネットショップ担当者になったばかりで、HTMLやCSSもよくわからんのに、いきなり「このシュッて動くバナーのやつ作って」と上司に言われ、ググってググってこのページたどり着いたみなさん、こんにちわ。なくてもWEBデザイン初心者の方たちの役に立つ内容だと思いますので、まあだまされたと思って、最後までお付き合いいただければ幸いです。HTMLやCSSの初心者、かつネットショップ担当者(特に楽天)に向けて記事を書いておりますので、その他に方には余計な記述もあります。「俺ネットショップ関係無いし」って方は、必要無い部分を読み飛ばしていただければ、通常の記事として読めると思います。https://ja.wikipedia.org/wiki/JQueryjQuery(ジェイクエリー)は、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計されたJavaScriptライブラリである。様々な場面で活用されており、JavaScriptライブラリのデファクトスタンダードと呼ぶ者もいる[2]。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ではスライダーのレイアウトを選べるので、そのレイアウトによっても変わってきますが、ここでは割愛します。「決まって無いけどとりあえず作ってみる」って方はダミーを用意したので、こちらをご使用ください。バナーダミー画像(zip)GOLD用HTMLファイルの準備まずはフォルダを用意して、名称を「slide」にでもしておきましょう。(すでにサイトを持っていてそのローカルコピーがあるなら、その中に用意して下さい)WEBエディタ(HTMLを編集するソフト)をお持ちの方は、新規HTMLファイルを用意して、「slide.html」として上記のフォルダ内に保存しましょう。サクラエディタMacの方は、CotEditorや、miなどを使用して、新規書類を作成し、下記内容をコピペして、「slide.html」という名前で保存して下さい。Now」をクリックすとダウンロード出来ます。ダウンロードしたものを解答するとフォルダの中に色々入っていますが、「slick」ってフォルダだけを使いますので、上記で用意したフォルダの中にコピーしておきましょう。上の方で用意した画像を、先程用意したフォルダ「slide」に移動させて置きましょう。そのまま裸で入れるよりはフォルダに入れておいたほうが何かと便利なので「img」フォルダを作って入れました。3.3.1」を右クリックして、「slide」フォルダの中にそのままの名前「jquery-3.3.1.min.js」で保存しておきましょう。※この記事を書いているときはjQueryの最新版が3.3.1なので上記リンクやファイル名も3.3.1となっていますが、この数字部分は変わる可能性があります。出来たファイルはこんな感じになるはずです作ってみる準備が長くなりましたが、いよいよ製作に入ります。必要なファイルを読み込みます。HTMLファイルの中で<head>と</head>の間に下記内容をコピペします。src="slick/slick.min.js"></script>ファイルパスは必要に応じて修正して下さい。HTMLの中で画像とリンク先を設定HTMLファイルの中の<body>と</body>の間に下記内容をコピペします。src="img/test05.jpg"></a></li></ul>リストタグじゃなくても大丈夫みたいなので、わかる方は適宜変更して下さい。リンク先の設定も忘れずに!楽天のショップで利用する事を考えると、iframeで呼び出す事になるので、aタグのtarget属性は_blankまたは_topなどにしておく必要があると思います。});});</script>.sliderの部分はHTMLで指定した任意のクラス。ローカルでテストよし!ここまで来たらとりあえずブラウザで見てみよう!ブラウザを開いて出来たファイルをドラッグ&ドロップするか、出来たファイルを右クリックして「プログラムから開く」を選び、テストで使うブラウザを選ぶと見れます。動かない?何かが間違ってるはず、原因を特定するために一つずつ試して行こう。・画像が表示されない画像のパス(URL)が間違っているはず。imgタグだけで画像が表示され無いようならパスの間違い。・画像は表示されているが、ズラッと並んでいるだけスタイルシートか、javaScriptのファイルへのパスが間違っている可能性大。ファイルを呼び出す順番も同じ様にしよう。・動いたけど左右の矢印や下部の点が文字化け(???)みたいになっているHTMLファイルの文字コードの問題の可能性大。文字コードを指定できるエディタで「UTF-8」に変更し、再度ためしてみよう。動いた?見た目を少し修正して、本番環境にアップしてみよう。10px;}</style>これを</head>の手前に追加して、もう一度見てみましょう。ここまで来たらほぼ完成です。さくアップロードしてみましょう。本番環境にアップロードFTPのソフトを起動して楽天GOLDのサーバーに今まで作ったデータをアップロードします。(画像やslickフォルダも一緒にアップロードするのを忘れずに)アップロードが終わったら再度チェックしてみましょう。このとき出来る限り色々なデバイス(PCやスマホ)からチェックしてみた方が良いです。あなたの店舗のGOLDのURL/アップロードしたフォルダ名/slide.htmlこんな感じのURLなはずなので、自分のPC、同僚のPC、自分のスマホなどからチェックしてみましょう。表示されない、表示がおかしい場合、再度上部のチェックを行って見ましょう。個人的な経験から言うと、ローカル(自分のPC)で動いていたものが、アップすると動かなくなる場合、8割くらいの確率でファイルのパスがおかしいです。コンソール(Console)タブを表示、赤文字で「これこれのファイルがネーヨ」みたいなエラーメッセージが表示されていれば、そのファイルへのパスが間違っている。エラーが出てないのに表示されていない場合は、他の原因だと思われます。楽天のページ(RMSのページ)で表示させるにはせっかく出来たので、RMSで出来ているページ(商品ページや、カテゴリページ)でも表示したいのに...。そんな時はiframeの出番です。scrolling="no"></iframe>こんな感じで呼び出してあげましょう。srcの部分は先程アップしたファイルのURLに変更して下さい。縦横サイズを指定するため、スタイルシートにちょっと追記します。0;}iframeについてiframeとは、HTMLファイルの中に別のHTMLファイルを埋め込む(呼び出す、読み込む)ことのできるHTMLタグです。楽天のページの場合(Yahooショッピングもほぼ同じ)、システム(RMS)で自動生成するページでは、javaScript(jQuery)は使用できません。そのため、別のページでjavaScriptを使用し、それをシステムで自動生成したページで呼び出す事で、javaScriptを擬似的に使用することが可能になります。「メンドクセーから普通にjavaScript使えるよーにしてくれや!」と思うのですが、javaScriptでは悪意を持ったプログラムも作ることは可能な訳で、セキュリティ上仕方が無い事なのだろうと思います。まとめ前回の記事が大分古くなってしまったので、改めて新記事を書いてみました。おもったより時間が掛かってしまいましたが、できる限りわかりやすく書いてみたつもりですので、全国のWEBデザイン初心者様、新米ネットショップ担当者様たちのお役に立てば幸いです。それでは、現場からは以上です。15:55ハカセ様はじめまして!いつもこちらのブログを参考にさせていただいてます。楽天GOLDでスライド画像を使いたく、こちらの記事を参考にして手順通りすすめていたのですが「slickを動かすためのスクリプトを追加」の項目が理解できずに行き詰まってしまいました。[/script]をの前にコピーしてローカルテストを行いましたが、画像がズラッと並んでしまい上手くいきません。初心者まるだしの質問で申し訳ございませんが、ご教示いただければ幸いです。16:50ZEN様コメントありがとうございます。「slickを動かすためのスクリプトを追加」の部分の表示がおかしくなっておりました。修正しましたのでjavascriptをタグの中にコピペしてみてください。19:14ハカセ様はじめまして!いつもこちらのブログを参考にさせていただいてます。>このシュッて動くバナーのやつ作ってまさにこんな感じで、泣く泣く勉強中です。スマホ用のサイズ調整のやり方を教えていただけるとたいへんありがたいです。0;スマホでは表示が大きくなってしまい、viewportつけてもなかなかうまくいってくれず苦戦しています。ずうずうしいお願いで申し訳ありません。3.3.1」を右クリックして、「slide」フォルダの中にそのままの名前「jquery-3.3.1.min.js」で保存しておきましょう。上記の二つであああってなってで動きました。コメントをキャンセルメールアドレスが公開されることはありません。ハカセの研究室ページ先頭に戻る。