静的htmlのみでページ制作するときにテンプレートが使いたくなったら

wordpressやphpを使える環境でコーディングをしていると、headerやfooterなどサイト内の共通ブロックは、includeを使って別ファイルで制作し、それを共有する手段を取ることができます。
ですがどうしても静的htmlのみでページ制作をしなければならないとき、にもかかわらずサイト全体のページ数が多いとき。共通ブロックに修正やチェックバックが発生したときは同じ修正作業を全ページ分反復するはめになり、煩雑ですしミスのもとになりそうですよね。

そんなときに静的htmlでもテンプレートのようにコードを共有ブロック化する方法があります。
今回はその方法をご紹介します。

javascriptを利用する方法

Javascriptのdocument.writeを利用すると指定の箇所に任意のhtmlを出力することができます。

  document.write('<div class="example_wrap">');
  document.write('<h2>example</h2>');
  document.write('<p>テキストが入ります。</p>');
  document.write('</div>');

上記のように都度記述する方法もありますが、ある程度まとまって記述する場合は、下記の記述でも実現できます。

document.write(
'<div class="example_wrap">',
'<h2>example</h2>',
'<p>テキストが入ります。</p>',
'</div>'
);

比較的コンパクトなブロックのテンプレートに適していると言えます。

SSI（Server Side Include）を利用する方法

SSIはWebサーバーの機能の一つで、HTML内にサーバーで実行するコマンドを記述し、その結果を画面に反映します。WebサーバーがSSIに対応していれば、HTML中にSSIを記述することができます。

まずは対応しているサーバーであることを確認したのち、.htaccessファイルに下記を記述し、SSIを有効化します。

Options +Includes
AddHandler server-parsed html

includeしたいブロックをコーディングしたhtmlファイルを制作します。今回は仮にheader.htmlを作成したとします。

<!-- ▼▼/header.html▼▼ -->
<div class="header">ヘッダーです。</div>
<!-- ▲▲/header.html▲▲ -->

index.htmlに上記のheader.htmlをincludeしたい場合、以下の1行目のように記述します。ファイルの階層は適宜調節してください。

<!--#include virtual="/header.html" -->

<div class="contents">
index.htmlのコンテンツエリアです。
</div>

このindex.htmlをSSIが動作するサーバー上に配置すると以下のように出力されます。

<!-- ▼▼/header.html▼▼ -->
<div class="header">ヘッダーです。</div>
<!-- ▲▲/header.html▲▲ -->

<div class="contents">
index.htmlのコンテンツエリアです。
</div>

htmlファイルをincldeできるので、構造が入り組んだ大きめのブロックでも取り扱いやすいのが特徴です。

まとめ

共通ブロックを共有化することで、制作タスクの省エネ化を行うことが可能です。環境や条件が許すのであればうまく導入して作業効率化を図りましょう。