jQueryで、csvの指定時間に自動で切り替わる、現在開催中のイベントのみ楽天のエントリーバナーを表示させることで、管理を楽にする方法。
もくじ
楽天Tips関連記事
楽天スマホで使える！classを使わずにcssを適用する裏技
指定時間に自動タイマーで切り替わる！楽天のバナーをcsvで管理する【jQuery】
jQueryで現在の日付で判別し、対象期間中だけテキストを表示する
cssだけ！jQueryを使わないスマホでよくある横から出てくるドロワーメニュー
【RMS】楽天スマホに禁止タグのiframeを入れる裏技
【jQuery】営業日・定休日カレンダーを簡単に管理する
jquery.csv.jsで、csvデータをクエリパラメーターで出力htmlを振り分ける
jQueryで現在の時刻を判別し、表示するバナーを切り替える
jQueryでiframe内から親ページをリダイレクトさせる
やりたいこと
・複数のバナーを現在開催中のものだけ表示したい。
・PCのみ表示のバナーがあるのでデバイスでバナーを切り替えたい。
・開催中のバナーをbxSliderでまとめたい。
・楽したい。
バナーを表示するhtml
html
<ul id="timesale"></ul>
htmlは複数表示のためのulのみです。
バナーを切り替えるJavaScript
JavaScript
$(document).ready(function() {
var getDevice = (function(){
var ua = navigator.userAgent;
if(ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0){
return 'sp';
}else{
return 'pc';
}
})();
var randam = Math.random()*10;
$.get('./entrybanner.csv?d='+randam,function(data){
var csv = $.csv.toArrays(data);
var img_path = './img/';
var nowDate = new Date(),
startDate = "",
endDate = "";
if (getDevice == 'pc') {
var i_width = ' width="468"',
i_height = ' height="60"';
} else if (getDevice == 'sp') {
var i_width = ' width="100%"',
i_height = '';
}
var banner = '',
main1 = '<li><a href="',
main2 = '" target="_blank"><img src="',
main3 = '"'+i_width+i_height+'></a></li>';
$(csv).each(function(index){
if (this[2] && this[2] != "start") {
startDate = new Date(this[2]);
endDate = new Date(this[3]);
if (getDevice == 'pc') {
if(startDate <= nowDate && (!endDate || nowDate <= endDate)){
banner += main1+this[1]+main2+img_path+this[0]+main3;
}
}
if (getDevice == 'sp') {
if(startDate <= nowDate && (!endDate || nowDate <= endDate) && this[4] != 1){
spimg = this[0].replace("pc","sp");
banner += main1+this[1]+main2+img_path+spimg+main3;
}
}
}
})
$("#timesale").append(banner);
});
});
ユーザーエージェントを調べるJavaScript
まずユーザーエージェントを調べます。
jquery.csv.jsを準備する
次にcsvを取り込みます。
下記、記事を参考にjquery.csv.jsを準備してください。
もちろんcsvの文字コードはutf-8で。
変数を定義していきます。img_pathはファイルパスを定型文として変数に入れています。絶対パスで書くとコードが長くなるし、汚くなるのでこういう使い方すると読みやすくなります。
あとはmain1なども、変数に入れています。
この場合は読みにくいじゃん！って思いますが、理由があります。
今回のような数件の処理ならほぼ変わりませんが、この件数が増えていくと処理スピードが違ってくるので私はこうしていますがご自由に。
if (this[2] && this[2] != “start”) {でエクセルでいうC列が空じゃなく、さらに「start」でもない場合に処理します。
ほんとはcsv上に処理するフラグを立てれればいいのですが面倒なのでこうしています。
ちなみにエクセルは文字コードがutf-8だと文字化けします。
文字コードがutf-8のcsvをエクセルで開くときに文字に日本語さえ入れなければ文字化けしないので、項目は日本語以外で書くと便利ですよ。
画像のファイル名はそれぞれpc,sp部分以外は共通にしてあります。
こうすることで、スマホ用画像のファイル名PC用を変更すれば作り出せるのでその分csvの項目も減らせますよね。
小ネタばかりダラダラ書きましたが、ほぼ今までの記事の組み合わせなので自分でいろいろカスタムして項目を増やしたり処理を分岐したりすることで作りたいものを作れちゃいますね！
bxSliderを準備する
bxSliderのサイトからダウンロードしてきます。
装飾も必要ないのでjquery.bxslider.min.jsだけを任意の場所にアップロードして、そのhtmlのページのhead内でJavaScriptを読み込みます。
通常ですと、html内でbxSliderを適用する要素の指定と適用したいところですが、今回はJavaScriptで動かす要素を書き出しているので、html側では指定しません。
liを書き出す前にbxSliderを適用したところで意図したとおりに動きませんよね？読み込む順番が重要なので今回はJavaScript側に記述します。
JavaScriptに追記する
JavaScript
if (getDevice == 'pc') {
if (cnt >= 2) {
$('#timesale').bxSlider({
auto: true,//自動でスライドさせるかの設定（する）
pager: false,
slideWidth: 470,
controls: false,
speed:500,
autoControls: false,
autoHover: true
});
} else {
$('#timesale').bxSlider({
auto: false,//自動でスライドさせるかの設定（しない）
pager: false,
slideWidth: 470,
controls: false,
speed:500,
autoControls: false,
autoHover: true
});
}
}
if (getDevice == 'sp') {
if (cnt >= 2) {
$('#timesale').bxSlider({
auto: true,//自動でスライドさせるかの設定（する）
pager: false,
controls: false,
speed:500,
autoControls: false,
touchEnabled: true//スマホなどのタッチ、スワイプに反応させるかの設定（する）
});
} else {
$('#timesale').bxSlider({
auto: false,//自動でスライドさせるかの設定（しない）
pager: false,
controls: false,
speed:500,
autoControls: false,
touchEnabled: false//スマホなどのタッチ、スワイプに反応させるかの設定（しない）
});
}
}
$(‘#timesale’).bxSlider({});でidがtimesaleの要素にbxSliderを適用します。
あとはデバイスや表示枚数に合わせてbxSliderのオプションを変更しています。
実はcntとi_widthとi_heightもbxSlider用に仕込んでありました。
読み込みのタイミングなのかバナーのサイズがbxSliderによって小さくされて、表示が崩れる場合があったので元のバナーサイズを規定値で入れてやると直ったのでこうしています。
この部分を$(“#timesale”).append(banner);に追記することで、htmlへの書き出しが終わってからbxSliderの処理を始めています。
まとめ
js
$(document).ready(function() {
var getDevice = (function(){
var ua = navigator.userAgent;
if(ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0){
return 'sp';
}else{
return 'pc';
}
})();
var randam = Math.random()*10;
$.get('./entrybanner.csv?d='+randam,function(data){
var csv = $.csv.toArrays(data);
var img_path = './img/';
var nowDate = new Date(),
startDate = "",
endDate = "";
if (getDevice == 'pc') {
var i_width = ' width="468"',
i_height = ' height="60"';
} else if (getDevice == 'sp') {
var i_width = ' width="100%"',
i_height = '';
}
var banner = '',
main1 = '<li><a href="',
main2 = '" target="_blank"><img src="',
main3 = '"'+i_width+i_height+'></a></li>';
$(csv).each(function(index){
if (this[2] && this[2] != "start") {
startDate = new Date(this[2]);
endDate = new Date(this[3]);
if (getDevice == 'pc') {
if(startDate <= nowDate && (!endDate || nowDate <= endDate)){
banner += main1+this[1]+main2+img_path+this[0]+main3;
}
}
if (getDevice == 'sp') {
if(startDate <= nowDate && (!endDate || nowDate <= endDate) && this[4] != 1){
spimg = this[0].replace("pc","sp");
banner += main1+this[1]+main2+img_path+spimg+main3;
}
}
}
})
$("#timesale").append(banner);
if (getDevice == 'pc') {
if (cnt >= 2) {
$('#timesale').bxSlider({
auto: true,
pager: false,
slideWidth: 470,
controls: false,
speed:500,
autoControls: false,
touchEnabled: true,
autoHover: true
});
} else {
$('#timesale').bxSlider({
auto: false,
pager: false,
slideWidth: 470,
controls: false,
speed:500,
autoControls: false,
touchEnabled: true,
autoHover: true
});
}
}
if (getDevice == 'sp') {
if (cnt >= 2) {
$('#timesale').bxSlider({
auto: true,
pager: false,
controls: false,
speed:500,
autoControls: false,
touchEnabled: true
});
} else {
$('#timesale').bxSlider({
auto: false,
pager: false,
controls: false,
speed:500,
autoControls: false,
touchEnabled: false
});
}
}
});
});
これでただのulのエントリーバナーをスライダーにすることができました！
省スペースなので使いやすいですよ！
今のところスーパーポイントアッププログラムが常時開催なので要素がなくてエラーになることもないのでこのままで大丈夫そうですね。
今後このバナーを下げなくてはいけない場合はcntが0だと処理しない条件を追加すれば問題なさそうですね。
楽天で使う際の注意点
楽天で使う前に確認しておかなくてはいけない、とても重要なことがあります。
それはbxSliderの本体jquery.bxslider.min.jsには外部リンクが含まれているということ！
jsのファイルのライセンス表示の部分ですね。
* bxSlider v4.2.12
* Copyright 2013-2015 Steven Wanderski
* Written while drinking Belgian ales and listening to jazz
* Licensed under MIT (http://opensource.org/licenses/MIT)
*/
これをこのままアップロードしてしまうと「違反点数制度」の対象となってしまい…
違反点数 35点！
罰金 10万円！
表示制限 7日！
のペナルティが発生します！
やってられないですね！
でもbxsliderのライセンス表示を消すのはいいのか？という話になってきますが、
上の表記を見ると「MITライセンス」になっています。
ですが、公式サイトには「WTFPLライセンス」と書いてあります。
その箇所の文を翻訳すると、
絶対とは問題ないとは言い切れませんが、削除の際は自己責任でお願いします。
これでエントリーバナースライダーの完成です！
コメント