swig|htmlのヘッダ・フッタの共通化などで実装を効率化する
swigでhtmlの実装すれば、htmlのヘッダーやフッターの共通化などができ、htmlの管理・実装の効率が格段に上がります。
swigとは、テンプレートエンジンの1つで、htmlの中に変数やif文やfor文などのプログラムを書き足して、それをhtmlに変換することができます。
また、phpなどのサーバ言語と違い、ローカルでコンパイルしてhtmlファイルを作成できるので、レンタルサーバーとの契約でサーバ言語が使えない場合でも簡単に導入することができます。
今までどおり、htmlファイルをレンタルサーバに置くだけです。
swigを使った具体例
例えば下記のようなホームページ（html）があるとします。
<!DOCTYPE HTML>
<html>
<head>
<title>サンプルホームページ</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</head>
<body>
<!-- 共通ヘッダー -->
<header>
swigでhtmlを効率化する方法
</header>
<h1>swigとは</h1>
swigでhtmlの実装しすれば、htmlのヘッダーやフッターの共通化などができ、htmlの管理・実装の効率が格段に上がります。
<!-- 共通フッター -->
<footer>
コピーライト
問い合わせ先
</footer>
</body>
</html>おそらくほとんどの画面でhead部分と共通ヘッダーと共通フッターの部分は共通になる思います。
10ページくらいhtmlで作りこんだあとに、「やっぱり共通ヘッダーのレイアウトを変えたい」となった場合に、すべてのhtmlを直さなければいけなくなります。
しかしswigで実装すれば、ヘッダー部分などを別ファイルにすることができます。なので各画面ではその別ファイルを読み込むだけでいいので、すべての画面で実装し直す手間がなくなります。
まず1ページごとのhtml(拡張子は.swigに変換します)は下記のようになります。
sample.swig{% include './head.swig' %}
<h1>swigとは</h1>
この部分のみ各画面で実装するだけです！！
{% include './foot.swig' %}上記ソースでincludeしているファイルを作成します。
head.swig<!DOCTYPE HTML>
<html>
<head>
<title>サンプルホームページ</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</head>
<body>
<!-- 共通ヘッダー -->
<header>
swigでhtmlを効率化する方法
</header>foot.swig
<!-- 共通フッター -->
<footer>
コピーライト
問い合わせ先
</footer>
</body>
</html>gulpを使ってswigをコンパイルする方法
swigからhtmlに変換する方法ですが、gulpというツールを利用すると簡単に変換することができます。
gulpの使い方についてはgulp|gulpの基本的な使い方で詳しく紹介しています。
まずプラグインをインストールします
$ npm install --save-dev gulp-swigそしてgulpのタスクを作成し、実行するだけでdestで指定した場所に変換されたhtmlファイルが出来上がります。
var swig = require('gulp-swig');
gulp.task('swig', function() {
gulp.src('sample.swig')
.pipe(swig())
.pipe(gulp.dest('dest'));
});