jQueryで動的にテンプレートを読み込むには

こんにちは！ご無沙汰しております。

エンジニアの平﨑です。

今回はjQueryを使えば初心者でも簡単にテンプレートを読み込んでサイト構築が出来ますよ、というお話をしようと思います。

はじめに

WEBページを作成するにあたって、要件によってシステムを作ったり、
WordpressなどのCMSを使ったり、シンプルにHTMLファイルを置くだけだったり様々な方法があります。

共通しているのは、HTMLファイルとCSSファイルと画像ファイル、
それと最近では多分JSファイルも必須で組み合わせて構築することですね。

そこで問題になってくるのがヘッダー、フッターやメニューなどの共通部分の取り扱いです。

システムやCMSで吐き出す、JavaScriptのテンプレートエンジンを使う、
などすれば1箇所をいじればいいので楽なんですが、
例えばAmazon S3にHTMLファイルその他を置いただけで
構築されているような、ごくシンプルなサイトでは
メニューを一部分いじるだけでも
すべてのHTMLファイルを書き換えないといけないため、
面倒かつミスが起こりやすくなります。
それを防止するために、テンプレートエンジンといかないまでも
簡単にかつ動的にHTMLファイルを読み込めるスクリプトを書いてみました。

概要

こちらのページのサンプルを元に説明していきます。
CSSの色味があまりよろしくないのはご容赦を。(笑)

サンプルページは下記のようなファイル構成になっています。

css、imagesディレクトリ: CSSや画像が入っています
jsディレクトリ: 後で説明するinclude.jsが入っています
pagesディレクトリ: サンプルページです
templatesディレクトリ: 読み込むテンプレートのHTMLファイルと設定ファイル(mapping.json)が入っています

.
├── css
│   └── style.css
├── images
│   └── yururi.png
├── index.html
├── js
│   └── include.js
├── pages
│   ├── index.html
│   └── parent
│       ├── child
│       │   └── index.html
│       └── index.html
└── templates
    ├── footer.html
    ├── header.html
    ├── mapping.json
    ├── page1.html
    ├── page2.html
    ├── page3.html
    └── top.html

├── css

│ └── style.css

├── images

│ └── yururi.png

├── index.html

├── js

│ └── include.js

├── pages

│ ├── index.html

│ └── parent

│ ├── child

│ │ └── index.html

│ └── index.html

└── templates

├── footer.html

├── header.html

├── mapping.json

├── page1.html

├── page2.html

├── page3.html

└── top.html

jQueryを使って簡単にテンプレートを設定できるJSです
include.jsの変数: base に基準となるURLパスを設定してください
テンプレートはtemplatesディレクトリ直下に置きます
JSONファイルに各ページで読み込むべきテンプレート(htmlファイル)を設定します
指定したテンプレートが存在しないとファイル読み込みエラーになりますのでご注意ください

JavaScriptとかよく知らないよ！という方でも
下記の説明を踏まえてアレンジしてもらえば簡単に動的にテンプレートの読み込みが出来るようになりますよ。

説明(使い方)

js/include.jsを開いて変数: base にベースとなるURLを書きます。
サンプルページの場合は「http://yururi-to.jp/tmp/template_jquery」となります。
※ baseの最後に「/」は付けないでください。
例) http://yururi-to.jp/tmp/template_jquery/

var base = 'http://yururi-to.jp/tmp/template_jquery';
var appendTemplate = function(id, templateId, level) {
  var path = 'templates/' + id + '.html';
  for (var i = 1; i < level; i++) {
    path = '../' + path;
  }
  $("<div>").load(path, function() {
    $(this).find('a').each(function() {
      var href = base + $(this).attr('href');
      $(this).attr('href', href);
    });
    $("#" + id).append($(this).html());
    $(this).remove();
  });
};

$(function() {
  var mapping_json = base + '/templates/mapping.json';
  $.getJSON(mapping_json, function(mapping){
    var uri = location.href;
    if (uri.match(/\.html$/)) {
    } else if (uri.match(/\u002f$/)) {
      uri = uri + 'index.html';
    } else {
      uri = uri + '/index.html';
    }
    var regexp = new RegExp(base + '/(.*)');
    var match_uri = uri.match(regexp);
    var includes = mapping[RegExp.$1];
    var level = RegExp.$1.split(/\u002f/).length;
    if (includes) {
      for (var i = 0; i < includes.length; i++) {
        var id = includes[i];
        var templateId = id + 'Template';
        appendTemplate(id, templateId, level);
      }
    }
  });
});

var base = 'http://yururi-to.jp/tmp/template_jquery';

var appendTemplate = function(id, templateId, level) {

var path = 'templates/' + id + '.html';

for (var i = 1; i < level; i++) {

path = '../' + path;

}

$("<div>").load(path, function() {

$(this).find('a').each(function() {

var href = base + $(this).attr('href');

$(this).attr('href', href);

});

$("#" + id).append($(this).html());

$(this).remove();

});

};

$(function() {

var mapping_json = base + '/templates/mapping.json';

$.getJSON(mapping_json, function(mapping){

var uri = location.href;

if (uri.match(/\.html$/)) {

} else if (uri.match(/\u002f$/)) {

uri = uri + 'index.html';

} else {

uri = uri + '/index.html';

}

var regexp = new RegExp(base + '/(.*)');

var match_uri = uri.match(regexp);

var includes = mapping[RegExp.$1];

var level = RegExp.$1.split(/\u002f/).length;

if (includes) {

for (var i = 0; i < includes.length; i++) {

var id = includes[i];

var templateId = id + 'Template';

appendTemplate(id, templateId, level);

}

});

簡単に説明すると、「templates/mapping.json」に記載されているパスに
設定されているテンプレートを階層を考慮して読み込み、
指定されたidが入っているタグに挿入します。
JSONってなんぞや、という方はこちらで書き方を確認して下さい。
ページの「階層+ファイル名」をキーとして、
読み込むテンプレートの名前(.htmlを除く)=差し込むタグのid
の配列を値として設定します。

ファイルツリーの一番上の階層にあるindex.htmlですと、
設定JSONファイルにheader、footer、topと挿入先idを設定しておきます。

{
  "index.html": ["header", "footer", "top"],
  "pages/index.html": ["header", "footer", "page1"],
  "pages/parent/index.html": ["header", "footer", "page2"],
  "pages/parent/child/index.html": ["header", "footer", "page2", "page3"]
}

{

"index.html": ["header", "footer", "top"],

"pages/index.html": ["header", "footer", "page1"],

"pages/parent/index.html": ["header", "footer", "page2"],

"pages/parent/child/index.html": ["header", "footer", "page2", "page3"]

}

index.htmlにおいて、header、footer、topがidとして指定されているのは
headerタグ、articleタグ、footerタグになりますので、
それぞれに指定されたテンプレートの
「templates/header.html」
「templates/footer.html」
「templates/top.html」
が挿入されることになります。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>outside templates including sample with jQuery</title>
    <!--[if lt IE 9]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
      <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="http://yururi-to.jp/tmp/template_jquery/css/style.css" media="all" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://yururi-to.jp/tmp/template_jquery/js/include.js"></script>
  </head>
  <body>
    <div id="container">
      <!-- header -->
      <header id="header"></header>

      <!-- main contents -->
      <article id="top"></article>

      <!-- footer -->
      <footer id="footer"></footer>
    </div>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>outside templates including sample with jQuery</title>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

</div>

</body>

</html>

<h1>outside templates including sample with jQuery</h1>
<nav>
  <ul class="clearfix">
    <li><a href="/">Top</a></li>
    <li><a href="/pages/">Page1</a></li>
    <li><a href="/pages/parent/">Page2</a></li>
    <li><a href="/pages/parent/child/">Page3</a></li>
  </ul>
</nav>

<h1>outside templates including sample with jQuery</h1>

<nav>

</ul>

</nav>

<span>© Copyright 2015 ゆるりと製作所. All rights reserved.</span>

1	<span>© Copyright 2015 ゆるりと製作所. All rights reserved.</span>

<hgroup>
  <h1>[H1]......</h1>
  <h2>[H2-1]......</h2>
  <h2>[H2-2]......</h2>
</hgroup>
<p>bra bra bra</p>
<aside>
  <h1>Top Page</h1>
  <p>This page is Top</p>
  <img src="images/yururi.png">
</aside>

</hgroup>

<aside>

</aside>

このようにHTMLをパーツのように読み込んであげればメンテナンスもコンテンツの追加も簡単ですね。
こちらのサンプルをダウンロードしたい場合は下記リンクからどうぞ。
template_jquery.zip

jQueryで動的にテンプレートを読み込むには

はじめに

概要

説明(使い方)

コメントを残すコメントをキャンセル

人気の記事

最近の投稿

カテゴリー

ソーシャルメディア

はじめに

概要

説明(使い方)

コメントを残す コメントをキャンセル

人気の記事

最近の投稿

カテゴリー

コメントを残すコメントをキャンセル