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の中身は変えてなかった！とかいうミスも少なくなりそうです。