アパレルの商品詳細ページのような、同じテンプレートでテキストや画像が違うだけのページを量産する機会があったので、ローカル環境の 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のようにします。
_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>¥ <%= 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>¥ <%= 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>¥ 18,000</li>
<li>No. 12-1-4</li>
<li>サイズ：S・M・L</li>
<li>カラー：ホワイト・ピンク</li>
</ul>
<ul>
<li>バッグ</li>
<li>¥ 32,400</li>
<li>No. 18-1-2</li>
</ul>
<ul>
<li>スニーカー</li>
<li>¥ 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>¥ 108,000</li>
<li>No. 12-1-4</li>
<li>サイズ：9号</li>
<li>カラー：ネイビー、ブラック</li>
</ul>
<ul>
<li>ネックレス</li>
<li>¥ 30,400</li>
<li>No. 18-1-6</li>
</ul>
<ul>
<li>バッグ</li>
<li>¥ 10,680</li>
<li>No. 16-1-3</li>
</ul>
</div>
</div>
参考:
ざっくりGulp.js入門（Mac向け）
EJS+gulpで静的サイトのHTML生成
テンプレートエンジンEJSで使える便利な構文まとめ