EJSを使用している環境でtitle
やmeta name="description"
といったメタ情報をJSONファイルひとつで管理できるようにする方法です。
- 紹介する方法はgulpを使用した実装方法になるので、予めgulpが使用できる環境を用意してください。
- EJSの基本的な使用方法などについては割愛しているので、「EJS -- Embedded JavaScript templates」や「GitHub - mde/ejs: Embedded JavaScript templates」などで確認してください。
使用するプラグインとファイル構成
プラグインのインストール
今回はgulpでEJSを使用するので、まず下記コマンドで「gulp-ejs」をインストールします。
$ npm i -D gulp-ejs
ファイル構成
ここで使用する方法は以下のようなファイル構成のものを使用した想定になり、後述するコード内のパスなどについてもこの構成をもとにしています。
├─ /src
│ └─ /ejs
│ ├─ index.ejs
│ ├─ /page
│ │ └─ index.ejs
│ └─ /templates
│ ├─ _head.ejs
│ └─ meta.json
└─ gulpfile.js
タスクの記述
まずはgulpfile.js
に下記のようなタスクを記述し、プラグインを読み込む際に「gulp」と「gulp-ejs」に加え、JSONファイルを読み込むために必要な「fs(File System)」も併せて記述しておきます。
var gulp = require( 'gulp' ),
ejs = require( 'gulp-ejs' ),
fs = require( 'fs' );
gulp.task('ejs', function() {
var json = JSON.parse(fs.readFileSync('src/ejs/templates/meta.json'));
return gulp.src(['src/ejs/**/*.ejs', '!src/ejs/**/_*.ejs'])
.pipe(ejs({json}, {}, {ext: '.html'}))
.pipe(gulp.dest('dist'));
});
JSONファイルの作成
次にタイトルや各種メタ情報を指定するためのJSONファイルを作成します。
今回のサンプルの構成では/src/ejs/templates
内にあるmeta.json
が該当のファイルになるのでそこに下記のような形で記述し、ここではtitle
, meta name="description"
, link rel="canonical"
の3項目を指定する想定となっています。
{
"default": {
"title": "default title",
"description": "default description",
"canonical": "http://example.com/"
},
"home": {
"title": "document",
"description": "home description",
"canonical": "http://example.com/"
},
"page": {
"title": "page - document",
"description": "page description",
"canonical": "http://example.com/page/"
}
}
"home": { ... }
や"page": { ... }
といったようにページ毎にそれぞれオブジェクトを用意し、その中にページで使用したいタイトルやディスクリプションを記述していきます。
ここでは2ページ分の記述しかありませんが、対応するページを増やしたい場合は"page": { ... }
の後に,
を付けて同じように追記し、名前をユニークなものに変更することで追加できます。
また、詳しくは後述しますがデフォルトとなる値を指定したオブジェクトも併せて記述しておきます。
EJSへの記述 & コンパイル
最後にEJSファイルがJSONの内容を読み込むように記述していきます。
まず、各EJSファイルが共通で読み込むファイルとして下記のような内容が記述された_head.ejs
を作成します。
<%
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'] %>">
<link rel="canonical" href="<%= page['canonical'] %>">
</head>
記述されている内容としては、まずコード上部でそれぞれのkey
に値があるかをチェックしており、もしなかった場合はJSONファイルでデフォルト値として設定したものがそれぞれ適用されるようにします。
例えば、上でサンプルとしてあげたJSONで"home"
にある"title": "document"
はコンパイル後にtitle
へ「document」と出力されるものですが、JSONからこの部分を削除してコンパイルすると、title
にはデフォルト値として指定した「default title」が出力されるという動きになります。
JSONで指定したものを出力させるための記述は<%= page['key'] %>
という形で記述していき、"title"
なら<%= page['title'] %>
、"description"
なら<%= page['description'] %>
という形で該当箇所にそれぞれ指定していきます。
次に各ページ用のEJSファイルに上で作成した共通用ファイルを読み込ませていき、読み込みの際にはそのページを表すパラメータを引数の部分に指定します。
今回のサンプルであれば、/src/ejs/index.ejs
はTOPページとなるのでパラメータをhome
に、/src/ejs/page/index.ejs
についてはパラメータをpage
にして、それぞれhead
を挿入したい箇所に下記のような形で記述して_head.ejs
を読み込ませます。
<%-
include('./templates/_head', {
page: json['home']
});
%>
<%-
include('../templates/_head', {
page: json['page']
});
%>
あとは$ gulp ejs
を実行すれば/dist
内にHTMLが出力され、ソースを確認するとそれぞれJSONで指定していたものがhead
内の各箇所に適用されているのを確認できると思います。
今回のサンプルではページ数が少なかったですが、例えばこれが数十・数百ページあるといったようなときにわざわざ各ページをいじらなくてもJSONファイルひとつだけですべて設定・編集できるようになるので、作業中に各種メタ情報が高頻度で変わるとか最後に一気に指定するような場合では非常に便利だと思います。
また、alternate
属性やOGP設定のように、今回のサンプルではなかったものを追加して管理しやすくすることも同じように記述していくことで容易にできます。