【gulp+EJS】JSONによるmeta管理

以前metaについて書きましたが、今回はgulp+EJS環境で外部JSONファイルを読む方法について書こうと思います。

これのメリットはそれぞれのページのmeta情報を一括で管理できるようになります

以前の記事はこちら

あわせて読みたい
EJSにおけるmeta情報の設定方法 僕は静的ページコーディングの際はejsを使用しています。 ejsでファイルを分割することでWordPressのようにheaderとfooterを共有でどのページでも呼び出せるようになり...
この記事の目次

ファイルの準備

JSON

以下のようなJSONファイルを用意します

{
  "default": {
    "title": "デフォルトtitle",
    "description": "default description",
    "keywords": "keywords"
  },

  "about": {
    "title": "aboutページタイトル",
    "description": "about us, description",
    "keywords": "about,keywords"
  },

  "contact": {
    "title": "contactページタイトル",
    "description": "contact us, description",
    "keywords": "contact,keywords"
  }
}

gulpfile.jsのejsタスク

const ejs = require("gulp-ejs");
const fs = require('fs');
const ejsCompile = () => {
	//jsonファイルを読み込み
	var meta = JSON.parse(fs.readFileSync('./src/json/meta.json', 'utf8'));
	return src(srcPath.ejs)
		.pipe(ejs({
			  meta:meta
		  }, { ext: '.html'}
		))
		.pipe(dest(destPath.html));
};

const fs = require('fs');
これはNode.jsのfsモジュールで、ファイルを操作する際に必要なものです。

fs.readFileSync(path, option)
ファイルの読み込みを行うための記述で、第二引数には文字コードを書きます

JSON.parse(file)
読み込んだファイルをJSONオブジェクトにするための関数です

ここでは変数metaに格納しています。

.pipe(ejs({meta:meta},{ ext: '.html'}))
ejsコンパイル時に変数meta(右)をmeta(左)という名前で渡します

ejs

ejsファイルでは、例えばabout.ejsの場合は以下のように書きます

<title><%= meta.about.title %></title>  
<meta name="description" content="<%= meta.about.description %>" />
<meta name="keywords" content="<%= meta.about.keywords %>" />

そうするとコンパイル時に以下のように出力されます

<title>aboutページタイトル</title>  
<meta name="description" content="about us, description" />
<meta name="keywords" content="about,keywords" />

contactページであればejs内のmeta.aboutをmeta.contactに変えるといった具合です

各ページに応じて読み込むように設定する

これが数ページならいいのですが、ejsファイルが増えていくとなるとそれぞれmeta.***をいちいち書き換えるのが面倒です

各ページ1箇所だけ変更すると自動的に読み込みたい記述を引っ張ってくるよう設定を行います

<%
  var _default = json['default'];
  for ( var key in _default ) {
    if ( typeof page[key] === 'undefined' ) {
      page[key] = _default[key];
    }
  }
-%>
<head>
  <meta charset="UTF-8" />
  <title><%= page['title'] %></title>  
  <meta name="description" content="<%= page['description'] %>" />
  <meta name="keywords" content="<%= page['keywords'] %>" />
</head>
<%- include('./common/_head', { page: json['about'] }); %>

この例でいくとabout.ejsで_head.ejsを読み込みます。
その際にjson['about']をpageと言う変数名で_head.ejsに渡します
つまり以前<%= meta.about.title %>としていたところのmeta.aboutの部分をpageに置き換えることができます

ここでmeta.jsonにaboutの内容が記述されていればその値がそのまま出力されます。

meta.jsで未定義の場合の処理

では以下の記述は一体何をしているのか
正直コピペで動きますが、一応何をしてるのかくらい把握しておくといいと思います。
知ってて損なことはないです

//抜粋
<%
  var _default = json['default'];
  for ( var key in _default ) {
    if ( typeof page[key] === 'undefined' ) {
      page[key] = _default[key];
    }
  }

aboutの記述が全く、または一部ない場合にdefaultの内容が反映されるようにするための記述です
for...inでmeta.js内のdefaultをループで回してます

if( typeof page[key] === 'undefined' )
例えばmeta.jsのaboutのtitleがない状態だった場合や、{ page: json['hogehoge'] }が指定されてない場合などがこの条件に当てはまります

page[key] = _default[key];
するとこれが適用されデフォルトで設定された値が代入されます

for...inに関しては以下の記事をご覧の上、keyとary[key]がどのように出力されるか確認するとよくわかると思います

あわせて読みたい
EJSでの構文 過去記事でも一部触れた箇所がありますが、EJSで使用できる構文をまとめます https://code-widgit.com/post-625/ 【EJSで何ができるか】 変数・配列が使える繰り返し処...

contact.ejsであれば同様に以下のように1箇所のみ記述を変えてあげればOKです

<%- include('./common/_head', { page: json['contact'] }); %>

あとはお好みでmeta情報を増やしていけばいいと思います

この記事が気に入ったら
フォローしてね!

シェアしてね!!
  • URLをコピーしました!

著者

Webコーダー。
ドライブとコーヒーとガジェットが好き。
「Code Widgit」は「Code With it」と「gadget」を合わせた造語。

この記事の目次
閉じる