Edited at

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

More than 1 year has passed since last update.

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

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

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

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


手順1: 表示させたいテキストデータの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'));


手順3: 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の導入からでも30分くらいでできそう)、データは一つのJSONで管理できるのでPC,SPで情報が違う!っていう冷や汗かくこともなさそうです。

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