jQueryで新着情報をつくってみた。

らら
らら

jQueryで新着情報をつくってみた。

はじめに

見出しは・・でかい感じですが・・PCでエクセルで編集したものをFTPで手動でアップロードです・・

はい・・

材料・・

ページャー機能は、下記に頼ります・・

https://github.com/superRaytin/paginationjs

CSVは、これ・・

https://github.com/evanplaice/jquery-csv/

まぁ。お題どおり、こいつ・・・

https://jquery.com/

機能

Newマーク表示機能

公開日指定機能

記事詳細表示・外部リンク（PDF）ダイレクト表示機能

一覧ページのページャー機能

あと、CSVは手動で。アップロードします・・

news.csv

下記の形式です。


id,タイトル,外部リンク,日付,記事詳細


id
	ユニークなIDを登録します。これはページ詳細を表示するために必要です。
タイトル
	新着のタイトルを入力します。
外部リンク
	こちらは、通常は入力しません。直接詳細ページでなく、外部リンクを開く場合にURLを登録します。
	この場合記事詳細は無視されます。
日付
	xxxx/xx/xx形式
	公開日を入力します。一覧にも表示されます。公開日を指定することで登録した日に記事が表示されます。
	当日からしか表示されないことに注意が必要です。未来の日付は。一覧等には表示されません
記事詳細
	詳細記事をHTMLで記述します。エディター等で編集する場合 "が２つ入力されることに注意が必要です。
	例
		<a href=""https://yahoo.co.jp"">

行について

一番初めの行が最新日になるように登録します。

最終行が一番古い記事になります。


100,タイトル,,2024/7/22,記事詳細5
99,タイトル,,2024/7/21,記事詳細4
98,タイトル,,2024/7/20,記事詳細3
97,タイトル,,2024/7/19,記事詳細2
96,タイトル,,2024/7/18,記事詳細1

ファイル一覧


|   index.html					サンプルTOPページ
+---common
|   +---css
|   |       pagination.css		一覧ページャプラグインCSS
|   |       reset.css			自身のCSS
|   |       style.css			自身のCSS
|   |       
|   \---js
|           news_csv.js			新着システム本体
|           pagination.js		一覧ページャプラグイン本体
\---news
    |   index.html				サンプル新着一覧
    |   detail.html				サンプル新着詳細
    \---data
            news.csv			新着CSVファイル

TOPページ


<!DOCTYPE html>
<html>
<head>
<title>新着サンプル</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="common/css/reset.css" rel="stylesheet" type="text/css">
<link href="common/css/style.css" rel="stylesheet" type="text/css">
<script src="//code.jquery.com/jquery-3.6.1.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-csv/1.0.11/jquery.csv.min.js"></script>
<script src="./common/js/news_csv.js"></script>
</head>
<body>
<main>
	<div id="info">
		<div class="info-bar">
			<p class="tit">お知らせ</p>
			<p class="more"><a href="./news/" target="_blank">お知らせ一覧</a></p>
		</div>
	    <div id="topwhatsnew" class="data-container"></div>
	</div>
</main>
</body>
</html>

新着一覧


<!DOCTYPE html>
<html>
<head>
<title>新着サンプル</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="../common/css/reset.css" rel="stylesheet" type="text/css">
<link href="../common/css/pagination.css" rel="stylesheet" type="text/css">
<link href="../common/css/style.css" rel="stylesheet" type="text/css">
<script src="//code.jquery.com/jquery-3.6.1.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-csv/1.0.11/jquery.csv.min.js"></script>
<script src="../common/js/pagination.js"></script>
<script src="../common/js/news_csv.js"></script>
</head>
<body>
<div id="info">
	<section>
		<div class="data-container"></div>
		<div id="pagination-news"></div>
	</section>
</div>
</body>
</html>

詳細ページ


<!DOCTYPE html>
<html>
<head>
<title>詳細</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="../common/css/reset.css" rel="stylesheet" type="text/css">
<link href="../common/css/style.css" rel="stylesheet" type="text/css">
<script src="//code.jquery.com/jquery-3.6.1.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-csv/1.0.11/jquery.csv.min.js"></script>
<script src="../common/js/news_csv.js"></script>
</head>
<body>
<div id="info">
	<section id="newsdetail">
	</section>
</div>
</body>
</html>

news_csv.js

変更は下記のあたりで


var NEWSPAGEMAX = 10;	//1ページあたりのページ数
var NEWSMAX		= 3;	//TOP表示件数
var AFTERDAY	= 3;	//何日後

■newマークは

news_csv.js本体を修正してください


newmark = "NEW!";


$(function() {
var news_record = [
	"id",			// ido
	"title",		// タイトル
	"link",			// 外部リンク
	"date",			// 日付
	"description",	// 記事詳細
];
var NEWSPAGEMAX = 10;	//1ページあたりのページ数
var NEWSMAX		= 3;	//TOP表示件数
var AFTERDAY	= 3;	//何日後
var news_rec	= [];
	//新着TOP　
	if($('#topwhatsnew').length) {
		$.get("./news/data/news.csv", newscsv, 'text');
		function newscsv(data) {
			var csv = $.csv.toArrays(data);
			var cnt = 0;
			var newshtml = '<div>';
			$(csv).each(function(i) {
				if (this.length > 0) {
					for(var item = 0; item < this.length; item++) {
						news_rec[news_record[item]] = this[item];
					}
					var dateval 	= news_rec['date'];
					// 日付が2000/00/00形式のみ
					var dateParts 	= dateval.split('/');
					var year		= parseInt(dateParts[0]);
					var month		= parseInt(dateParts[1]) - 1;
					var day			= parseInt(dateParts[2]);
					var targetTime	= new Date(year,month,day,0,0);
					var currentTime	= new Date();
					if (currentTime >= targetTime) {
						targetTime.setDate(targetTime.getDate() + AFTERDAY);
						var newmark = "";
						if (currentTime <= targetTime) {
							newmark = "NEW!";
						}
						var viewdate = year+'年'+(month+1)+'月'+day+'日';
						newshtml += '<dl><dt>' + viewdate +'<span>'+newmark+'</span>'+ '</dt>';
						if(news_rec['link'] === undefined || news_rec['link'] =="")  {
							newshtml += '<dd><a href="./news/detail.html?id=' +news_rec['id'] +'">'+ news_rec['title'] + '</a></dd></dl>';
						} else {
							newshtml += '<dd><a href="' +news_rec['link'] +'">'+ news_rec['title'] + '</a></dd></dl>';
						}
						cnt++;
						if(cnt >= NEWSMAX) {
							return false;
						}
					}
				}
			});
			newshtml = newshtml +'</div>';
			$('#topwhatsnew').html(newshtml);
		}
	}
	//新着詳細
	if($('#newsdetail').length) {
		var target_id = GetUrlParam('id');
		if(target_id) {
			var newshtml = "";
			$.get("./data/news.csv", newscsv, 'text');
			function newscsv(data) {
				var csv = $.csv.toArrays(data);
				$(csv).each(function(i) {
					if (this.length > 0) {
						for(var item = 0; item < this.length; item++) {
							news_rec[news_record[item]] = this[item];
						}
						if(news_rec['id'] == target_id) {
							var dateval 	= news_rec['date'];
							// 日付が2000/00/00形式のみ
							var dateParts 	= dateval.split('/');
							var year		= parseInt(dateParts[0]);
							var month		= parseInt(dateParts[1]) - 1;
							var day			= parseInt(dateParts[2]);
							var targetTime	= new Date(year,month,day,0,0);
							var currentTime	= new Date();
							if (currentTime >= targetTime) {
								var viewdate = year+'年'+(month+1)+'月'+day+'日';
								newshtml += '<dl><dt>' + viewdate + '</dt>';
								newshtml += '<dd>' + news_rec['title'] + '</dd>';
								newshtml += '<dd>' + news_rec['description'] + '</dd></dl>';
								$('#newsdetail').html(newshtml);
								return false;
							}
						}
					}
				});
			}
		}
	}
	//新着一覧
	if($('#pagination-news').length) {
		$.get("./data/news.csv", newscsv, 'text');
		function newscsv(data) {
			var csv = $.csv.toArrays(data);
			var json = [];
			$(csv).each(function(i) {
				if (this.length > 0) {
					for(var item = 0; item < this.length; item++) {
						news_rec[news_record[item]] = this[item];
					}
					var dateval 	= news_rec['date'];
					// 日付が2000/00/00形式のみ
					var dateParts 	= dateval.split('/');
					var year		= parseInt(dateParts[0]);
					var month		= parseInt(dateParts[1]) - 1;
					var day			= parseInt(dateParts[2]);
					var targetTime	= new Date(year,month,day,0,0);
					var currentTime	= new Date();
					if (currentTime >= targetTime) {
						var news_line = {
							id: news_rec['id'],
							title: news_rec['title'],
							link: news_rec['link'],
							date: news_rec['date'],
							description: news_rec['description']
						};
						json.push(news_line);
					}
				}
			});
			$('#pagination-news').pagination({
				dataSource: json,
//				totalNumber: 120,
				pageSize: NEWSPAGEMAX,
				callback: function(response, pagination) {
					var newshtml = '<div>';
					$.each(response, function (index, item) {
						var dateval 	= item.date;
						// 日付が2000/00/00形式のみ
						var dateParts 	= dateval.split('/');
						var year		= parseInt(dateParts[0]);
						var month		= parseInt(dateParts[1]) - 1;
						var day			= parseInt(dateParts[2]);
						var viewdate = year+'年'+(month+1)+'月'+day+'日';
						newshtml += '<dl><dt>' + viewdate + '</dt>';
						if(item.link === undefined|| item.link=="") {
							newshtml += '<dd><a href="detail.html?id=' +item.id +'">'+ item.title + '</a></dd></dl>';
						} else {
							newshtml += '<dd><a href="' +item.link +'">'+ item.title + '</a></dd></dl>';
						}
					});
					newshtml += '</div>';
					$('#pagination-news').prev().html(newshtml);
				}
			});
		}
	}
	function GetUrlParam( paramName )
	{
		var oRegex = new RegExp( '[\?&]' + paramName + '=([^&]+)', 'i' ) ;
		var oMatch = oRegex.exec( window.top.location.search ) ;
		if(oMatch && oMatch.length > 1) {
			val = oMatch[1];
			val = val.replace(/%25/g, "%");
			val = val.replace(/%3D/g, "=");
			return val;
		} else {
			return '' ;
		}
	}
})

できあがり・・

TOPページ

jQueryで新着情報

一覧

jQueryで新着情報

詳細

jQueryで新着情報

関連記事