PC,SPのテキストデータを一括管理したい！がejsとjsonで簡単にできた話

業務でLPのテキストデータとKVだけ毎月更新してリリースしています。

PC,SPとソースコードが異なるため、PC,SPそれぞれのページでデータが間違っていないか、誤差がないかをしらべる作業量が多すぎて発狂しそうになります。

なるべく工数かけずにどうにかしたい！と思って方法を探したところ、ejsをつかうとHTMLの構造が違っていてもデータを変数で指定できて、設定も簡単そうだったのでやってみました！

gulpやejsの導入はここでは触れていません。

手順１： 表示させたいテキストデータのJSONを作成。

架空の店舗情報一覧をHTMLに表示するという前提でつくってみました。

data.json

[
	{
		"name": "レストラン1",
		"caption": "様々なシーンでご利用頂ける飲み放題付きプランを多数ご用意しています！",
		"image": "https://placehold.jp/320x240.png",
		"budget": "【夜】2,000〜3,000【昼】500〜1,000",
		"genre": "居酒屋"
	},
	{
		"name": "レストラン2",
		"caption": "ノンアルコールカクテルが豊富！女子会、合コンにぴったりのプランをご用意しております！",
		"image": "https://placehold.jp/320x240.png",
		"budget": "【夜】3,000〜4,000【昼】1,000〜1,500",
		"genre": "カフェ"
	},
	{
		"name": "レストラン3",
		"caption": "都心にありながら、ゆっくり過ごせる隠れ家レストラン。おちついたひと時を過ごせます。",
		"image": "https://placehold.jp/320x240.png",
		"budget": "【夜】3,000〜4,000【昼】500〜1,000",
		"genre": "創作料理"
	}
]

手順2： fsモジュールを呼び出し、JSONを読み込めるようにする

node.jsのfsモジュールをつかってdata.jsonの中身を文字列としてよみこんで、それをJSONにparseします。

gulpfile.js

const fs = require('fs');
const jsonData = JSON.parse(fs.readFileSync('./data.json'));

手順３： ejsを読み込み、JSONをejsテンプレート内部で呼び出せるようにする

gulp-ejsの第一引数にハッシュ形式でjsonを指定すると、ハッシュで指定したキーを使ってejsテンプレート内部でJSONを呼び出すことができます。

gulpfile.js

const ejs = require('gulp-ejs');
gulp.task('ejs', () => {
	gulp.src('./src/**/*.ejs', {base: './src'})
		.pipe(ejs({storeData: jsonData}))
		.pipe(ejs({}, {}, {ext: '.html'}))
		.pipe(gulp.dest('./build/'))
})

手順4： jsonデータをループさせてejsテンプレートに埋め込む

あとはハッシュで指定したキーをつかって変更を加えたいテキスト部分のHTMLタグ内に埋め込んでいきます。

index.ejs

<ul class="cassettsWrapper">
	<% storeData.forEach((data) => { %>
	<li>
		<a href="" class="cassettsLink">
			<div class="cassettsThumb">
				<img src="<%= data.image%>" alt="<%= data.name%>の写真" class="cassettsThumbImg">
			</div>
			<div class="cassettsContents">
				<div class="ContentsCaption"><%= data.caption%></div>
				<div class="ContentsSubinfo">
					<div class="subinfoName"><%= data.name%></div>
					<div class="subinfoBudget"><%= data.budget%></div>
					<div class="subinfoGenre"><%= data.genre%></div>
				</div>
			</div>
		</a>
	</li>
	<% });%>
</ul>

出力結果!

このようにHTMLが出力されました！
ちゃんとJSONで指定したテキストが表示されています！

index.html

<ul class="cassettsWrapper">
	
	<li>
		<a href="" class="cassettsLink">
			<div class="cassettsThumb">
				<img src="https://placehold.jp/320x240.png" alt="レストラン1の写真" class="cassettsThumbImg">
			</div>
			<div class="cassettsContents">
				<div class="ContentsCaption">様々なシーンでご利用頂ける飲み放題付きプランを多数ご用意しています！</div>
				<div class="ContentsSubinfo">
					<div class="subinfoName">レストラン1</div>
					<div class="subinfoBudget">【夜】2,000〜3,000【昼】500〜1,000</div>
					<div class="subinfoGenre">居酒屋</div>
				</div>
			</div>
		</a>
	</li>
	
	<li>
		<a href="" class="cassettsLink">
			<div class="cassettsThumb">
				<img src="https://placehold.jp/320x240.png" alt="レストラン2の写真" class="cassettsThumbImg">
			</div>
			<div class="cassettsContents">
				<div class="ContentsCaption">ノンアルコールカクテルが豊富！女子会、合コンにぴったりのプランをご用意しております！</div>
				<div class="ContentsSubinfo">
					<div class="subinfoName">レストラン2</div>
					<div class="subinfoBudget">【夜】3,000〜4,000【昼】1,000〜1,500</div>
					<div class="subinfoGenre">カフェ</div>
				</div>
			</div>
		</a>
	</li>
	
	<li>
		<a href="" class="cassettsLink">
			<div class="cassettsThumb">
				<img src="https://placehold.jp/320x240.png" alt="レストラン3の写真" class="cassettsThumbImg">
			</div>
			<div class="cassettsContents">
				<div class="ContentsCaption">都心にありながら、ゆっくり過ごせる隠れ家レストラン。おちついたひと時を過ごせます。</div>
				<div class="ContentsSubinfo">
					<div class="subinfoName">レストラン3</div>
					<div class="subinfoBudget">【夜】3,000〜4,000【昼】500〜1,000</div>
					<div class="subinfoGenre">創作料理</div>
				</div>
			</div>
		</a>
	</li>
</ul>

この方法なら、PC,SPどちらのHTML構造を変えなくてもいいので作業工数は少なく（gulpの導入からでも３０分くらいでできそう）、データは一つのJSONで管理できるのでPC,SPで情報が違う！っていう冷や汗かくこともなさそうです。

PC,SPでソースが一緒でもテキストデータはJSONで管理した方が、閉じタグ消してしまった！とか、店名かえたけど、altの中身は変えてなかった！とかいうミスも少なくなりそうです。