swig|htmlのヘッダ・フッタの共通化などで実装を効率化する

swightmlの実装すれば、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'));
});

関連記事

  • watchifyとgulpで自動コンパイルと差分更新をおこなう

    今回は開発環境をさらに便利にするために、ファイルが変更されたら自動でビルドを実行し、ブラウザをリロードする処理を実装します。ファイルを変更すると自動でビルドが行われ、ブラウザが再読込されますが、ビルド...


  • Nunjucksの基本的な使い方 -extends,block,include-

    htmlのおすすめテンプレートエンジンNunjucksはとても便利なのです。extendsという機能を使えば、ヘッダやフッタの共通部分を作成しておき(ベースとなるファイル)、各ページではページごとに変...


  • npmのpackage.jsonを最新のバージョンに更新する

    package.jsonのパッケージを最新のバージョンに更新する方法を紹介します。最新のバージョンに更新するためには、package.jsonに記載されているパッケージのバージョンの記載を最新にする必...


  • less|cssに変数を使い実装を効率化する方法

    lessには変数を使うだけでなく、変数の色をX%明るくしたり、暗くしたり、透過したり、といった便利な関数も用意されています。また、要素を入れ子にして設定したり、関数を自作できるなど、とても便利な機能が...


  • gulpの便利なタスク gulpfile.jsの記述例

    gulpの便利なおすすめプラグインで紹介したプラグインなどを利用したgulpの便利なタスクの実装例を紹介します。less,js,htmlのコンパイルや軽量化、watchとlivereload、エラー時...


  • Nunjucksで独自のファンクションを実行する

    gulp-dataと組み合わせると、引数のような形で各ファイルにデータ(変数など)を渡すことができます。同じ容量で、変数ではなくファンクション自体をgulp-dataで設定すると、自分で定義したファン...


  • gulpでディレクトリ構造を維持したままdestにコピーする

    gulpで以下のようなフォルダ構成で、page.html、page2.htmlをそれぞれのフォルダ配下のフォルダにコピーする場合、普通にdestを指定するだけではうまくいかないことがあります。コピーす...


  • gulpの便利なおすすめプラグイン

    gulpを導入するとWEB開発をとても効率よく簡単に行うことができるようになります。私がよく利用している便利なプラグインを紹介します。


  • gulp-nunjucks-renderでNunjucksをgulpでコンパイルする方法

    Nunjucksをgulpでコンパイルする方法を紹介します。今回はgulp-nunjucks-renderを使用します。まずは、コマンドラインでgulp-nunjucks-renderをインストールし...


  • highlight.jsをローカルで実行してハイライトされたファイルを出力

    ホームページやブログでプログラムのコードを掲載する際に、以下のようにコードをシンタックスハイライト(色付け)をすることがあると思います。highlight.jsという便利なライブラリを使っていましたが...