HTML
効率化
ejs
gulp

【EJS】 gulp + EJS でページの量産

アパレルの商品詳細ページのような、同じテンプレートでテキストや画像が違うだけのページを量産する機会があったので、ローカル環境の gulp + EJS で効率化を図ってみました。

◼︎ 前提

※ Node.jsはインストール済みとします

 以下のコマンドを入力して、バージョンが表示されれば正常にインストールされています。「node:command not found」を表示されてしまう場合は、インストールされていません。

node -v

インストールされてない場合はHomebrewでインストールしておく。

※ Node.jsのバージョン管理をするツールは Nodebrew や ndenv があります。
※ Homebrewもインストールされてない場合は、Homebrewのインストールから始めます。

※ gulpはグローバルインストール済みとします

以下のコマンドを入力して、バージョンが表示されれば正常にインストールされています。「gulp:command not found」を表示されてしまう場合は、インストールされていません。

gulp -v

・グローバルにインストールする方法

npm install --global gulp-cli

(省略系)

npm i -g gulp-cli

※ gulp-cli…ターミナルでgulpコマンドを使えるようにするもの

※ 最近はグローバルにはインストールしないで、ローカルのみにインストールする傾向があるようです。理由などをみても筆者もそっちの方がいいと思っています。

◼︎ 手順

1 )package.json の作成

作業するディレクトリに移動してから以下のコマンドを実行

npm init -y

2 )gulp をローカルインストール

npm install --save-dev gulp

(省略系)

npm i -D gulp

※ gulpをグローバルインストールしないで、ローカルインストールのみで使用する場合は、以下のサイトを参考
gulpを使ってみた

3 ) その他パッケージをインストール

・gulp-ejs をインストール

npm install --save-dev gulp-ejs

(省略系)

npm i -D gulp-ejs

・gulp-rename をインストール

npm install --save-dev gulp-rename

(省略系)

npm i -D gulp-rename

4 ) ファイルの格納場所を用意

参考: 第94回 EJSとCSVを使って効率の良い量産をしよう

ディレクトリ構成を図1のようにします。

illust_01.jpg

_frontendディレクトリでEJSなどの処理を行い、publicディレクトリに生成されたHTMLファイルを格納します。

5 ) gulpfile.jsの作成

package.json と同じ場所に作成

gulpfile.js
var gulp = require('gulp');
var fs = require('fs');
var ejs = require('gulp-ejs');
var rename = require('gulp-rename');

gulp.task('ejs',function(){
    var jsonData01 = '_frontend/data/json/data.json',
            json01 = JSON.parse( fs.readFileSync( jsonData01,'utf8' ) );

    for( var i = 0; i < json01.length; i++ ) {
        var fileName = json01[i].number;

        gulp.src('_frontend/ejs/template.ejs')
            .pipe(ejs({
                jData01:json01[i]
            }))

            .pipe(rename('No_' + fileName + '.html'))
            .pipe(gulp.dest('public/'));
    }
});

6 ) テンプレートの作成

template.ejs
<% var jData01 %>

(省略)

    <% if (jData01.thumbs >= 2 ) { %>
    <ul class="thumbs">
        <li><img src="/images/item/<%= jData01.number %>.jpg" /></li>
        <% for( var i = 0; i < jData01.thumbs - 1; i++ ) { %>
        <li><img src="/images/item/<%= jData01.number%>_0<%= i+2 %>.jpg" /></li>
        <% } %>
    </ul>
    <% } %>

    <div>
        <% if ( jData01.new ) { %>
            <img src="/images/common/ico_new.png" alt="NEW" />
        <% } %>

        <p><%- jData01.description %></p>

        <div class="specBox">
            <% for( var i = 0; i < jData01.spec.length; i++ ) { %>
            <ul>
                <li><%= jData01.spec[i].item %></li>
                <li>&yen; <%= jData01.spec[i].price %></li>
                <li>No. <%= jData01.spec[i].number %></li>
                <% if ( jData01.spec[i].size ) { %>
                <li>サイズ:<%= jData01.spec[i].size %></li>
                <% } %>
                <% if ( jData01.spec[i].color ) { %>
                <li>カラー:<%= jData01.spec[i].color %></li>
                <% } %>
            </ul>
            <% } %>
        </div>
    </div>

    <% if (jData01.thumbs >= 2 ) { %>
    <ul class="thumbs">
        <li><img src="/images/item/<%= jData01.number %>.jpg" /></li>
        <% for( var i = 0; i < jData01.thumbs - 1; i++ ) { %>
        <li><img src="/images/item/<%= jData01.number%>_0<%= i+2 %>.jpg" /></li>
        <% } %>
    </ul>
    <% } %>

サムネイルがある場合、1枚目は 01.jpg、2枚目以降は 01_01.jpg、01_02.jpg、01_03.jpg ...と続くようにしています。10枚以上になることがない条件だったので、10枚以上になったときの対策はしていません。

<% if ( jData01.new ) { %>
<img src="/images/common/ico_new.png" alt="NEW" />
<% } %>

新着アイテムのときは、NEWアイコンを表示します。

    <% for( var i = 0; i < jData01.spec.length; i++ ) { %>
        <ul>
            <li><%= jData01.spec[i].item %></li>
            <li>&yen; <%= jData01.spec[i].price %></li>
            <li>No. <%= jData01.spec[i].number %></li>
            <% if ( jData01.spec[i].size ) { %>
            <li>サイズ:<%= jData01.spec[i].size %></li>
            <% } %>
            <% if ( jData01.spec[i].color ) { %>
            <li>カラー:<%= jData01.spec[i].color %></li>
            <% } %>
        </ul>
    <% } %>

アイテムの数だけ、スペックを表示します。

6 ) data.json の作成(データ入力)

data.json

[
  {
    "number": "01",
    "thumbs": "3",
    "new": "true",
    "description": "この春おすすめの<br>コーディネートです",
    "spec": [
        {
            "item": "ワンピース",
            "price": "18,000",
            "number": "12-1-4",
            "size": "S・M・L",
            "color": "ホワイト・ピンク"
        },
        {
            "item": "バッグ",
            "price": "32,400",
            "number": "18-1-2",
            "size": "",
            "color": ""
        },
        {
            "item": "スニーカー",
            "price": "8,640",
            "number": "16-1-4",
            "size": "23.0 / 24.0",
            "color": ""
        }
    ]
  },
  {
    "number": "02",
    "thumbs": "",
    "new": "",
    "description": "結婚式の二次会にぴったりの<br class=\"pcNone\">パーティードレス!",
    "spec": [
        {
            "item": "ドレス",
            "price": "108,000",
            "number": "12-1-4",
            "size": "9号",
            "color": "ネイビー、ブラック"
        },
        {
            "item": "ネックレス",
            "price": "30,400",
            "number": "18-1-6",
            "size": "",
            "color": ""
        },
        {
            "item": "バッグ",
            "price": "10,680",
            "number": "16-1-3",
            "size": "",
            "color": ""
        }
    ]
  }
]

7 ) gulp でビルドする

以下のコマンド入力

gulp ejs

すると以下のようなHTMLが生成されます

No_01.html
(省略)

    <ul class="thumbs">
        <li><img src="/images/item/01.jpg" /></li>
        <li><img src="/images/item/01_02.jpg" /></li>
        <li><img src="/images/item/01_03.jpg" /></li>
    </ul>

    <div>
        <img src="/images/common/ico_new.png" alt="NEW" />

        <p>この春おすすめの<br>コーディネートです</p>

        <div class="specBox">
            <ul>
                <li>ワンピース</li>
                <li>&yen; 18,000</li>
                <li>No. 12-1-4</li>
                <li>サイズ:S・M・L</li>
                <li>カラー:ホワイト・ピンク</li>
            </ul>

            <ul>
                <li>バッグ</li>
                <li>&yen; 32,400</li>
                <li>No. 18-1-2</li>
            </ul>

            <ul>
                <li>スニーカー</li>
                <li>&yen; 8,640</li>
                <li>No. 16-1-4</li>
                <li>サイズ:23.0 / 24.0</li>
            </ul>
        </div>
    </div>

No_02.html
(省略)

<div>
    <p>結婚式の二次会にぴったりの<br class="pcNone">パーティードレス!</p>

    <div class="specBox">
        <ul>
            <li>ドレス</li>
            <li>&yen; 108,000</li>
            <li>No. 12-1-4</li>
            <li>サイズ:9号</li>
            <li>カラー:ネイビー、ブラック</li>
        </ul>

        <ul>
            <li>ネックレス</li>
            <li>&yen; 30,400</li>
            <li>No. 18-1-6</li>
        </ul>

        <ul>
            <li>バッグ</li>
            <li>&yen; 10,680</li>
            <li>No. 16-1-3</li>
        </ul>
    </div>
</div>

参考:
ざっくりGulp.js入門(Mac向け)
EJS+gulpで静的サイトのHTML生成
テンプレートエンジンEJSで使える便利な構文まとめ