【gulp】htmlテンプレート「gulp-html-extend」についてメモメモ（３）　～変数を使う

gulp

2015.09.28

みなさま、こんにちは。hulu で「めぞん一刻」が配信されていたので、最近夫婦揃って見始めた kouraku です。学生時代、高橋留美子の大ファンで、「めぞん一刻」は中でも一番好きな、とても思い出深い作品でした。そんな作品のアニメが全部見れるなんて、hulu 素晴らしい！（あ、決して hulu の回し者ではありませんよ（笑））

さて、今回は前回ご紹介しました「gulp-html-extend」のサンプルに手を加え、変数などを利用し使い勝手を良くしたテンプレートの作成方法についてメモメモ。

※前回までの記事を元に進めていきます。

「gulp-html-extend」の変数の使い方を確認

「gulp-html-extend」で変数を使える、というのは公式の構文を見ればなんとなく分かりますが、いざ使おうと思っても、掲載されている例文だけではイマイチ使い方がはっきりとしませんでした。

ということで、そのヒントを探すため公式の Github の test フォルダを覗いてみると・・・なるほど、そのままでした（苦笑）。

/test/fixtures/extend_and_include.html で実際に変数を設定していて、インクルードしている include.html（@@var=a）とレイアウトの master_b.html（@@var=var）で設定した変数を使っているのが分かります。出力結果は /test/expected/extend_and_include.html になることを想定しています。

・変数の設定

<!-- @@master=master_b.html {"var":"var-->in-->extend_and_include.html"}-->

・変数の使用

my content
<!--@@var= var -->

・出力結果

my content
var-->in-->extend_and_include.html

変数を使ってページごとにタイトルを変更する

それでは、前回までに作成したサンプルに少し手を加えていきたいと思います。まずは手始めに、ページごとにタイトルを変更できるようにしてみます。

まずは各ページの下記共通コード（タイトル名のみ異なっている）を layout.html に移植します。

[/modules/index.html, index2.html, index3.html]

  ：
<article>
<header>
<h1>インデックスの見出し</h1>
</header>
  ：
</article>
  ：

移植した結果は下記の通りです。ここでは、予めタイトル部分を変数 title で置き換わるように設定します。

[/layout/layout.html]

  ：
<body>
<!-- @@include /common/header.html -->

<article>
<header>
<h1><!--@@var= title --></h1>
</header>
<!-- @@placeholder=content -->
</article>

<!-- @@include /common/footer.html -->
  ：

次に、各ページのタイトルを変数 title に設定します。

[/modules/index.html]

<!-- @@master /layout/layout.html {"title":"インデックスの見出し"}-->
  ：

[/modules/index2.html]

<!-- @@master /layout/layout.html {"title":"インデックス2の見出し"}-->
  ：

[/modules/index3.html]

<!-- @@master /layout/layout.html {"title":"インデックス3の見出し"}-->
  ：

ではコンパイルをします。

$ gulp html-extend

各ページのタイトルが設定したものに差し替わり、前回と同様の結果が得られていることが分かります。

ナビの作成をしてみよう

次に、ナビを作成してみたいと思います。イメージとしては、ヘッダーにグロナビがあって、カレントページのメニューがアクティブ状態になる（クラスに .current を付与する）、といった感じです。

では、まず header.html に下記の通り簡単なコードを追加します。

[/common/header.html]

<header>
<h1>gulp-html-extend テスト</h1>
<nav> <---- ここから
<ul class="gnav">
<li><a href="index.html">インデックス</a></li>
<li><a href="index2.html">インデックス2</a></li>
<li><a href="index3.html">インデックス3</a></li>
</ul>
</nav> <---- ここまで
</header>

この状態でコンパイルをすると、各ページのヘッダーにリストが入ります。次に、カレントページの状態を実現するための仕組みを追加しましょう。

「gulp-html-extend」には条件式などはありません。ではどうやってカレント状態を作るか。「変数を指定しなければ表示されない」という特性を活かすことで実現できます。

少し格好悪くなりますが、下記コードの様に、各 li タグにクラスが入る箱を用意します。ここでは、nav1, nav2, nav3 とします。

[/common/header.html]

<header>
<h1>gulp-html-extend テスト</h1>
<nav>
<ul class="gnav">
<li class="<!--@@var= nav1 -->"><a href="index.html">インデックス</a></li>
<li class="<!--@@var= nav2 -->"><a href="index2.html">インデックス2</a></li>
<li class="<!--@@var= nav3 -->"><a href="index3.html">インデックス3</a></li>
</ul>
</nav>
</header>

続いて、各ページにカレントページ用の変数（.current）を仕込みます。

[/modules/index.html]

<!-- @@master /layout/layout.html {"title":"インデックスの見出し", "nav1":"current"}-->
  ：

[/modules/index2.html]

<!-- @@master /layout/layout.html {"title":"インデックス2の見出し", "nav2":"current"}-->
  ：

[/modules/index3.html]

<!-- @@master /layout/layout.html {"title":"インデックス3の見出し", "nav3":"current"}-->
  ：

全て用意できたところで、コンパイルをします。

$ gulp html-extend

これで、カレントページの実装が完了しました。カレント状態が分かりやすい様に、.gnav .current に font-weight: bold; だけ当てておきましょう。

[/layout/layout.html]

  ：
<style type="text/css">
<!--
.gnav .current {
font-weight: bold;
}
-->
</style>
</head>
  ：

はい、これでナビの作成も完了しました。

今回のサンプルデータ

まとめ

条件式などないため複雑なことはできませんが、上記の様なコードの組み方でいけば、ある程度カバーできるのではないでしょうか。まだまだバージョンアップを続けている様子なので、今後の動向にしっかり目を向けていきたいと思います。次回は watch に追加して監視させる方法と、タグ閉じ忘れなどを警告してくれるプラグインを導入する方法をメモしたいと思います。

それにしても、今見てもはまってしまう「めぞん一刻」って、やっぱり名作ですよね。自分の結婚式に参加してくれた親友（彼も高橋留美子ファン）のために、この作品の一節を最後の挨拶にこっそり引用したこともありましたっけ。本当に思い出深い作品だったことを改めて思い出させてくれました。