記事:node製テンプレートエンジン-ejsを使って自動化①のイメージ画像

node製テンプレートエンジン-ejsを使って自動化①

web制作

Writing:
照屋祐太

thumbnail-teruya

はじめまして、昨年の10月にフロントエンドとして入社した照屋です!
生まれも育ちも沖縄で、青い海に囲まれ過ごしてきました。あー。。釣りしたい。
初心者エンジニアですが日々精進します!どうぞよろしくお願いします。

世は様々なタスクランナーで、時間がかかってしまう作業を自動化しています。
テンプレートエンジンejsを活用して、作業時間を短縮していきましょう!

やりたいこと

  1. googleスプレットシートで情報を管理し、csvファイルでダウンロードした後、json形式に変換
  2. jsonでまとめた情報をejsで取得しhtml形式にして出力

今回は「googleスプレットシートで情報を管理し、csvファイルでダウンロードした後、json形式に変換」までをやってみます。
※gulpの環境設定は整っているものとします。

[目次]

サイト構成

今回は量産する可能性があるページのみスプレットシートで管理します。
下記の様なフォルダ構成で進めていきます。

gulpfile.js
build (納品用フォルダ)
 |- index.html (トップページ)
 |- store
    |-index.html (店舗トップページ) 
    |-store1.html (店舗1の紹介ページ)
    |-store2.html (店舗2の紹介ページ)
    |-store3.html (店舗3の紹介ページ)
 |- product
    |-index.html (商品トップページ)
    |-product1.html (商品1の紹介ページ)
    |-product2.html (商品2の紹介ページ)
    |-product3.html (商品3の紹介ページ)
 |- feature
    |-index.html (特集ページトップページ)
    |-feature1.html (特集ページ1の紹介ページ)
    |-feature2.html (特集ページ2の紹介ページ)
    |-feature3.html (特集ページ3の紹介ページ)
 |- contact/index.html (お問い合わせページ)
 |- sitemap/index.html (サイトマップページ)
source (作業フォルダ)
 |- index.ejs (トップページ) 
 |- contact/index.ejs (お問い合わせページ)
 |- sitemap/index.ejs (サイトマップページ)
 |- data
    |-data.csv
 |- template
    |- feature (特集ページで使うテンプレート)
       |- _template.ejs
    |- product (商品紹介で使うテンプレート)
       |- _template.ejs
    |- store (店舗紹介で使うテンプレート)
       |- _template.ejs
    |- index (各カテゴリのトップで使うテンプレート)
       |- _template.ejs

入力用シート作成

さて始めていきますー。
今回はgoogleのスプレットシートで管理します。

img_ejs1

こんな感じで一旦入力用のシートを作成してみました。
が、、後々出力用のシートが必要となってきますので、シート2のタブを作成しましょう。

出力用シート作成

img_ejs2

idやparentIdは下記の様なルールにします。

  • id:ファイル名
  • parentId:親フォルダ(ない場合はルート直下に置かれます。)
  • template:テンプレート(ない場合は個別で作成します。)
  • title:タイトル
  • keywords:キーワード
  • description:ディスクリプション

関数の定義

img_ejs3

シート1で記入したデータを取得します。
シート2の「A2」の方に下記の記述をしてください。
= importrange(“◯◯◯”, “シート1!A2:BP”)

img_ejs5

◯◯◯の部分はURLの/d/の後に記載されている箇所を入力してください

csvファイルのダウンロード

img_ejs4

シート2のタブにいる状態で
「ファイル」→「形式を指定してダウンロード」→「カンマ区切りの値(.csv,カンマ区切りの値)」
これで無事csvファイルをダウンロードできたことを願います。
ダウンロード後のファイルは、data.csvにリネームして./source/data/に格納してください。

パッケージのインストール

csvからjsonにするためのパッケージをインストールしていきます。

ターミナル

$ cd ../作業ディレクトリ/
$ npm init
$ npm install --save-dev gulp
$ npm install --save-dev gulp-csvtojson

gulpファイルにタスクを定義

ここでcsvファイルをjsonファイルにするための設定を入力します。

gulp.js

var gulp = require('gulp'),
	csvtojson = require('gulp-csvtojson');
gulp.task('build', function () {
	gulp.src(./source/data/data.csv)
		.pipe(csvtojson({ toArrayString: true }))
		.pipe(gulp.dest(./source/data));
});

実行

ターミナル

$ gulp build

終わりに

少し大雑把に書いちゃいましたが、json形式に変換できましたでしょうか?
次回は「jsonでまとめた情報をejsで管理しhtml形式にして出力」を記載しようと思います。

参考記事