【gulp】htmlテンプレート「gulp-html-extend」についてメモメモ(2) ~レイアウトを使用した横展開

【gulp】htmlテンプレート「gulp-html-extend」についてメモメモ(2) ~レイアウトを使用した横展開

みなさま、こんにちは。huluで配信されている『進撃の巨人』を週末で見終え、続きが気になり電子書籍で全巻揃えてしまった kouraku です。そして、17冊もあっという間に読み終えてしまいました。

さて今回は、前回ご紹介しましたhtmlテンプレート「gulp-html-extend」のサンプルについて軽く解説を踏まえ、横展開を試してみたいと思います。

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

「gulp-html-extend」の構文について

まずは、公式に書かれている構文を見てみましょう。

@@master [=] path [jsonString]
e.g. <!-- @@master master.html {"foo":"bar"} -->

@@placeholder [=] blockName
e.g. <!-- @@placeholder footer -->

@@include [=] path [jsonString]
e.g. <!-- @@include /footer.html {"foo":"bar"} -->

@@var [=] variableName
e.g. <!-- @@var foo -->

@@block [=] blockName
e.g. <!-- @@block footer -->

@@close
You must add <!-- @@close --> at the end of every block

上記の中で、前回サンプルとして作成したコードの中で登場したものは、@@var 以外の5つになります。ということで、@@var 以外について前回サンプルを元にそれぞれどういう役割をしているかを見てみます。

@@master [=] path [jsonString]
ページで使用しています。レイアウトを指定します。

@@placeholder [=] blockName
レイアウトで使用しています。コンテンツを挿入する場所を指定します。

@@include [=] path [jsonString]
レイアウトで使用しています。 外部HTMLを挿入する場所を指定します。

@@block [=] blockName 〜 @@close
ページで使用しています。レイアウトの placeholder で指定した場所に挿入するコンテンツの内容を記述しています。

なお、@@placeholder と @@include は、基本どこでも使用することは可能です。

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

改めて前回サンプルコードを見ながら使い方を確認していきます。
まずは、レイアウトとして用意した /layout/layout.html を見てみます。

[/layout/layout.html]

:
<body>
<!-- @@include /common/header.html -->
<!-- @@placeholder=content -->
<!-- @@include /common/footer.html -->
<!-- SCRIPTS -->
<!-- Example: <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> -->
</body>
</html>

このレイアウトでは、ヘッダーとフッターをそれぞれ外部ファイルとして用意した header.html と footer.html を @@include で指定しています。
また、@@placeholder で content という名前のブロックを挿入するように指定してます。

次に、ページとして用意した /modules/index.html を見てみます。

[/modules/index.html]

<!-- @@master /layout/layout.html -->
<!-- @@block content -->
<article>
<header>
<h1>インデックスの見出し</h1>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, vel eveniet nemo repudiandae dolore consequatur similique dicta voluptates accusamus laboriosam earum sed itaque ex aliquam unde minima illo et obcaecati?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, vel eveniet nemo repudiandae dolore consequatur similique dicta voluptates accusamus laboriosam earum sed itaque ex aliquam unde minima illo et obcaecati?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, vel eveniet nemo repudiandae dolore consequatur similique dicta voluptates accusamus laboriosam earum sed itaque ex aliquam unde minima illo et obcaecati?</p>
</article>
<!-- @@close -->

@@master で先ほどのレイアウト /layout/layout.html を指定しています。
そして@@block 〜 @@close に、レイアウトの @@placeholder で指定した content ブロック内に挿入する内容を記述しています。

では、コンパイルしたソースを見てみます。コンパイルすると、/htdocs/index.html が出力されますので、このファイルのソースを表示します。

コンパイル後のindex.htmlのソース

同じレイアウトを使用してページを横展開する

ページとレイアウトの関係性がなんとなく分かってきたところで、次は同じレイアウトを使用して、簡単なページの横展開を行ってみます。

では、index.html を複製して、index2.html と index3.html の2ページ追加します。ページが異なることが分かるよう、タイトルだけ変えておきます。

[/modules/index2.html]

<!-- @@master /layout/layout.html -->
<!-- @@block content -->
<article>
<header>
<h1>インデックス2の見出し</h1>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, vel eveniet nemo repudiandae dolore consequatur similique dicta voluptates accusamus laboriosam earum sed itaque ex aliquam unde minima illo et obcaecati?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, vel eveniet nemo repudiandae dolore consequatur similique dicta voluptates accusamus laboriosam earum sed itaque ex aliquam unde minima illo et obcaecati?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, vel eveniet nemo repudiandae dolore consequatur similique dicta voluptates accusamus laboriosam earum sed itaque ex aliquam unde minima illo et obcaecati?</p>
</article>
<!-- @@close -->
[/modules/index3.html]

<!-- @@master /layout/layout.html -->
<!-- @@block content -->
<article>
<header>
<h1>インデックス3の見出し</h1>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, vel eveniet nemo repudiandae dolore consequatur similique dicta voluptates accusamus laboriosam earum sed itaque ex aliquam unde minima illo et obcaecati?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, vel eveniet nemo repudiandae dolore consequatur similique dicta voluptates accusamus laboriosam earum sed itaque ex aliquam unde minima illo et obcaecati?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, vel eveniet nemo repudiandae dolore consequatur similique dicta voluptates accusamus laboriosam earum sed itaque ex aliquam unde minima illo et obcaecati?</p>
</article>
<!-- @@close -->

用意ができたらコンパイルします。

$ gulp html-extend

htdocs配下に index2.html と index3.html が出力されています。ソースを見ると、同じレイアウトを使ってページが出来上がっているのが分かりますね。

今回のサンプルデータ

まとめ

ここで言う「レイアウト」と「ページ」の関係性は、他のテンプレートエンジンでも使います。中身は普通のHTMLで書けるので、練習用に「gulp-html-extend」で慣らしておくのも良いと思います。

次回は、「gulp-html-extend」の変数(@@var)を使って、タイトルの変更やナビゲーションなんかを作ってみたいと思います。

それにしても、巨人の正体がみんなアレなのかと思うと・・・なるほど、人を食う意味とか、色々とつじつまが合ってくるのが不思議ですね。ただ、目的が何なのかがまだ分かりません。あと、人物紹介に最初の方で死んだはずの◯◯◯が載っているのが謎ですよね。一体、この先どうなるやら・・・。12月9日の新刊発売が待ち遠しいです。

  • このエントリーをはてなブックマークに追加

この記事を読んだ人にオススメ