gulp-ejsとjsonファイルを使って更新データの管理を楽にする方法

gulp-ejsとjsonファイルを使って更新データの管理を楽にする方法

本格的な梅雨時期に入ったようで、本日もうなるような大雨ですね。
私の事務所は入り口がくぼんだような地面になっているので、往来する時は池に飛び込むような仕様になっております。

さて今回の題材はタイトルのとおり。
皆さん公開したサイトデータの中でちょくちょく更新する必要があるデータを扱う時があると思います。

一文更新で終わり。とかならいいんですが、買取データみたいな配列じみた更新を行う場合、結構手間がかかってめんどくさいですよね。

今回はそんなめんどくさい更新を、データをもらうだけで済むような形に整えたいと思います。

まずは環境確認

以下の環境がすべて整っている前提でお話をしていきますので、足りないものがある場合は適宜調整をお願いします。

  • 該当webサイトにgulpを設置
  • gulp-ejsインストール済み

取り出すデータをまとめるjsonファイルを作成

json(拡張子は.json)ファイルとはいわゆるデータ格納ファイルのようなもので、記法に沿ってデータを入力すると簡易データベースのような役割を持ちます。

例えば車の買取データを日付と買い取ったお客さんの住んでるエリア、車種の3つに分けてデータ管理したい。という場合など、以下のように書くことでデータ格納することができます。


{
	"cardata":[
		{
			"date":"1日",
			"aria":"東京",
			"item":"フィット"
		}
	]
}
//cardataは大枠の名前で[]は後で配列にするため付けてます

これでデータベースに「日付」「買取エリア」「車種」という3つのデータが格納されました。
それではそのままこのデータを使って、話を進めていきましょう。

jsonファイルに格納するデータを複数に増やす

当然買取データの場合、車に関するデータは複数である可能性が高いです。(中には1台ということもあるかも)
というわけで、配列を作って複数の買取データを格納するようにします。


{
	"cardata":[
		{
			"date":"1日",
			"aria":"東京",
			"item":"フィット"
		},
		{
			"date":"1日",
			"aria":"大阪",
			"item":"ベンツ"
		},
		{
			"date":"1日",
			"aria":"名古屋",
			"item":"レクサス"
		},
	]
}

これで計3つの買取データが並びました。
あとはこれをhtml側に呼び出すだけですね。

htmlに呼び出すための下準備

gulp-ejsを使っている人ならいうまでもないかもしれません。
htmlファイルを出力するためにまず紐付けをしてあげます。

gulpfile.jsにjsonに関する内容を追記していきます。


var gulp = require("gulp");
var plumber = require("gulp-plumber");

//ejsのコンパイル
var ejs = require("gulp-ejs");
var fs = require('fs');

gulp.task("ejs", function(){
	var json = JSON.parse(fs.readFileSync('ejs/data.json'));
	gulp.src(
		["ejs/**/*.ejs",'!' + "ejs/**/_*.ejs"]
	)
		.pipe(plumber())
		.pipe(ejs(json,{"ext":".html"}))
		.pipe(gulp.dest("../car"));
});

階層に気をつけてコードの記述をしたら、紐付けは完了です。

エラーが起きる場合は、記法が間違っていることがほとんどです。(gulpのバージョンなどによって記法が違う場合もある)
まずはファイル階層の指定が間違っていないか確認し、それでもダメだったら根本の記法を確認してみて下さい。
(最終手段は初期化ですかね 汗)

取り出したいjson内のデータを指定してejsファイルに出力

さて、最終段階ですね。ここまで出来ていればもうあとは楽勝です。

以下の記述をejsファイル内、買取データを表示したい場所に記述します。


<%- cardata[0].date %> <%- cardata[0].aria %> <%- cardata[0].item %>

配列の中の必要な情報を、順番つけて表示しています。
[]の中の数字はデータの順番を入れます。0から始まるので、3番のデータを取り出したい場合は、[2]と指定したらいいです。

ちなみに繰り返し出力にしたい場合は、for文を使って以下のように記述します。


<ul>
<% for (var i in cardata) { %>
	<li><%- cardata[i].date %> <%- cardata[i].aria %> <%- cardata[i].item %></li>
<% } %>
</ul>

これで、データの取り出しは完了です。1回組み込んじゃえばあとはデータを変更し、コマンド出力するだけでお手軽更新の完了ですね。
jsonファイルはテキストでお客さんに渡してそこにデータを入力してもらうようにすればものすごい作業短縮ができます。
いちいち手作業で日付が~、車種が~って直すのめんどくさいですしね。

使えるワザはなんでも使って作業の時間を短縮していきましょう

ただでさえやることが多くなっているweb業界。なるべく効率化できるものは効率化して、余分な時間を生み出したいものですね。

制作に役立つカテゴリの最新記事