PC,SPのテキストデータを一括管理したい！がejsとjsonで簡単にできた話
業務でLPのテキストデータとKVだけ毎月更新してリリースしています。
PC,SPとソースコードが異なるため、PC,SPそれぞれのページでデータが間違っていないか、誤差がないかをしらべる作業量が多すぎて発狂しそうになります。
なるべく工数かけずにどうにかしたい！と思って方法を探したところ、ejsをつかうとHTMLの構造が違っていてもデータを変数で指定できて、設定も簡単そうだったのでやってみました！
gulpやejsの導入はここでは触れていません。
手順１： 表示させたいテキストデータのJSONを作成。
架空の店舗情報一覧をHTMLに表示するという前提でつくってみました。
[
{
"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します。
const fs = require('fs');
const jsonData = JSON.parse(fs.readFileSync('./data.json'));
手順３： ejsを読み込み、JSONをejsテンプレート内部で呼び出せるようにする
gulp-ejsの第一引数にハッシュ形式でjsonを指定すると、ハッシュで指定したキーを使ってejsテンプレート内部でJSONを呼び出すことができます。
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タグ内に埋め込んでいきます。
<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で指定したテキストが表示されています！
<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の中身は変えてなかった！とかいうミスも少なくなりそうです。
Author And Source
この問題について(PC,SPのテキストデータを一括管理したい！がejsとjsonで簡単にできた話), 我々は、より多くの情報をここで見つけました https://qiita.com/imaramukuo/items/3bd236b34b1571614238著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .