生のHTMLのサイトだと記事の更新が面倒くさい！
全て生のHTMLで作られたサイトにニュースなどの記事を配信するようなサイトってありますよね（vcborn公式サイトとか）。あれって新しい記事を更新する際に毎回HTMLを追加したり変更したりでとてもめんどくさいんですよね。
ということで今回はその記事の情報を全部jsonにまとめて、javascriptを使いjsonから情報を取得してサイトに反映させる仕組みを作っていきたいと思います。
記事情報をjsonにまとめる
今回はわかりやすいようにvcbornの公式サイトを参考に作りたいと思います。
表示させる記事の情報としては、記事タイトル、日付、サムネイル画像です。あとそのページへのリンクも必要です。この情報をjsonにまとめましょう。以下のように情報をまとめたものをarticles.jsonに書きます。
ファイルの上に書かれている方が最新の記事になるようにします。新しい記事の追加は上からですね。
見れば分かると思いますが、titleには記事タイトルを、imgurlにはサムネイル画像のURLを、dateには日付を、linkにはその記事のURLを入れておきます。
[
{
"title": "戦ってきたぜ！6",
"imgurl": "/article/ogp.png",
"date": "2021/12/19",
"link": "/article/news.html"
},
{
"title": "戦ってきたぜ！5",
"imgurl": "/article/ogp.png",
"date": "2021/12/18",
"link": "/article/news.html"
},
{
"title": "戦ってきたぜ！4",
"imgurl": "/article/ogp.png",
"date": "2021/12/17",
"link": "/article/news.html"
},
{
"title": "戦ってきたぜ！3",
"imgurl": "/article/ogp.png",
"date": "2021/12/16",
"link": "/article/news.html"
},
{
"title": "戦ってきたぜ！2",
"imgurl": "/article/ogp.png",
"date": "2021/12/15",
"link": "/article/news.html"
},
{
"title": "戦ってきたぜ！1",
"imgurl": "/article/ogp.png",
"date": "2021/12/14",
"link": "/article/news.html"
}
]JavaScriptでjsonデータを取得&表示
では実際に記事を表示させて行きましょう。一旦全ての記事を表示させる方法を行いたいと思います。
早速コードをどうぞ
HTMLです。div id=”news-flex”に記事が入るようにします。あとAjaxを使うのでjQueryを読み込んでおく必要があります。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="style.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>
<body>
<section id="news">
<h1>News</h1>
<div id="news-flex"></div>
</section>
<script src="article-news.js"></script>
</body>
</html>次はJavaScriptです。
Ajaxを使って、作っておいたjsonファイルを読み込んで必要な部分を取得してHTMLを生成します(article_htmlの部分)。それを.insertAdjacentHTMLを使って追加しています。
HTMLの生成はjson内の要素がいくつあるかを取得して(numberの部分)、for文を使ってその要素の回数分だけHTMLを追加するという動作を繰り返すようにしています。もし表示させる記事数を制限したい場合はfor文を任意の回数だけ繰り返すようにしたらいいでしょう。
$(function () {
$.ajax({
url: "articles.json",
type: "GET",
dataType: "json",
})
.done(function (data) {
// success
var data_stringify = JSON.stringify(data);
var article_json = JSON.parse(data_stringify);
var number = Object.keys(article_json).length;
for(var i = 0; i <= number - 1; i++){
var article_html = `
<div class="one-article">
<a href="${article_json[i]["link"]}">
<img src="${article_json[i]["imgurl"]}">
<div class="article-info">
<div class="date">${article_json[i]["date"]}</div>
<h2>${article_json[i]["title"]}</h2>
</div>
</a>
</div>
`
document.getElementById('news-flex').insertAdjacentHTML('beforeend',article_html);
}
})
.fail(function (data) {
// error
console.log("error");
});
});このコードを使うと以下のような表示になります。(CSSは多少いじった)(画像とタイトルは気にしたら負け)
あとAjaxはlocalhostとかでしか動かなさそうなので注意が必要です。(違ったらごめん)
これで記事の更新が簡単に
これで今まで面倒くさかった記事の更新が楽になります。(まだ使う予定はないが)
いろいろな場面で応用が効きそうですね。是非使ってみてください！
ついでに
今回始めてテンプレートリテラルとやらを使ってみました。
テンプレートリテラルとはバッククオート(`～`)で囲むと改行をそのまま書くことができるのです！
知ってる人からすると「なんだ、そんなことか」って感じかもしれませんが、これまで+とかを駆使して追加するHTMLを生成していたので感動モノです(そこまでではない)。
なんか今JSを勉強してる友達に教えてもらったんですけど、独学でやってると知らないことはずっと知らないまんまですね(何の話?)
