perlベースの静的サイトジェネレーターDapper入門： レイアウトファイル編集基礎編

# はじめに

Dapperは「静的サイトジェネレーター」の一つです。

他の多くのサイトジェネレーター同様、Dapperは「型紙」にあたるファイルと、記事ごとのデータを書き込んだテキストファイルの内容を組み合わせて、公開用のhtmlファイルを作り出します。「型紙」はところどころに「穴」が開けてあり、その穴を記事データファイルの内容で埋めていくわけです。

Dapperでは、この型紙ファイルのことを**レイアウトファイル**、記事データファイルのことを**ソースファイル**と呼びます。これにサイト全般の設定を記載した設定ファイルを加えた３種類が、Dapperによるサイト構築の主要要素です。

これらの概略は既に[別記事](https://qiita.com/doikoji/items/fa7793aaab0224c31e7e#%E3%81%BE%E3%81%9A%E3%81%AFdapper%E3%81%8C%E6%8B%B5%E3%81%88%E3%81%A6%E3%81%8F%E3%82%8C%E3%81%9F%E3%82%82%E3%81%AE%E3%82%92%E7%9C%BA%E3%82%81%E3%82%8B)で述べました。本記事では、レイアウトファイルの具体的な書き方について纏めます。

## レイアウトファイル

レイアウトファイルは標準ではベースディレクトリ（サイト編集の作業用ディレクトリで、設定ファイル_config.yamlが置かれている場所）直下の`_layout/`サブディレクトリ以下に置かれます。

日本語対応HTML5のページを作るための必要最小限の要素を書いたレイアウトファイルのサンプルを示します。

```
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>[% page.title %]</title>
</head>
<body>
[% page.content %]
</body>
</html>
```

レイアウトファイルが基本的に穴埋め式HTMLファイルであることは既に見ました。まず考えるべきは、「穴埋めに使う」データを用意するかです。

それには、まずは「変数」について理解しましょう。

## [% 変数 %] － 変数の値で穴埋めを行う基本形

上の例でみたように、レイアウトファイルは基本的にhtmlファイルそのものです。しかし、中にちょっと奇妙な記述が含まれています。

```
[% page.content %]
```

これは、レイアウトファイルへの穴埋めにおいてもっとも基本的な形式です。指定した「変数」の値でレイアウトファイル中の`[% 変数 %]`の値に置き換えることを指示する「命令」です。そうしてデータが置き換えられた結果が、最終的なHTMLファイル出力へとつながります。

レイアウトファイル中では、この`[%  %]`形式の命令を多用します。これを**ディレクティブ**と呼びます。今見たのは変数の参照ですが、他にも「変数の定義」・「ループ制御」・「条件判定」など様々な機能を持ったディレクティブが用意されています。

レイアウトファイルのhtml部分が「固定的な内容」なのに対して、「変数」は記事ごとに内容が変わりうる部分です。では、その変数の「値」はどこで決めるのでしょうか。その情報を書き込む場所は３つあります。設定ファイル（_config.yml）、ソースファイル、そしてレイアウトファイル自身です。

### 設定ファイル由来の変数
サイト全体で共通に参照されるデータは設定ファイル内に定義された変数に格納しておくのが合理的でしょう。

```
# Dapper configuration file
---
name : My Site

```

設定ファイル内の変数をレイアウトファイル内で参照する場合は、`[% %]`内の変数名の先頭に、`site.`を付加します。

たとえば、上のような設定ファイルがあったとして、その中の変数`name`を使いたい場合は、レイアウトファイル中のディレクティブは`[% site.name %]`となります。

### ソースファイル由来の変数

Dapperで言うところのソースファイルは、完成品としてのhtmlページに１：１対応するパラメータ設定記述ファイルです。

```
---
layout: article
title: テスト記事
---
本文に加えられるべきテキストは---より下に書く。
```

ソースファイル内に書かれた変数の定義を参照する場合は、`[% %]`内の変数名の先頭に、`page.`を付加します。

たとえば、上のようなソースファイルがあったとして、その中の変数`title`を使いたい場合は、レイアウトファイル中の記述は`[% page.title %]`です。

また、ソースファイル内での変数定義は、ファイル先頭に`---`と`---`に挟まれる形で書くことになっています。しかし、ソースファイル中ではこの---よりも後にもテキストを書くことができます。この部分はmarkdownテキストと見なされ、HTML形式に変換されたものが、特別な変数`content`に代入されます。レイアウトファイル中では`[% page.content %]`のように参照することができます。

### レイアウトファイルの中で定義される変数

変数はレイアウトファイルそのものの中でも定義できます。それには`[% 変数名=式 %]`という形式のディレクティブを使います。

```
[% x = 2 %]
```
xに2が代入され、改行・スペース以外何も出力されません。

```
[% (x = 2) %]
```
xに2が代入されるとともに、結果（つまり`2`）が出力されます。
このように、ディレクティブの中には代入式を置くことができます。式の立て方については次節で詳しく述べます。

## 式・関数

レイアウトファイルの中では、変数の値（リテラル）をただ参照するだけでなく、数値計算や文字列の加工を行い、その結果を利用することもできます。

```
[% x = 2 %]
[% y = 3 %]
[% x * (y - 1) %]
```
上の例では、最終的に`4`が出力されます。

関数も使えます。ただし、Dapperの世界ではこれを「フィルタ」として利用します。

```
[% 3.1415 | int %]
```
上の例では、`int`が関数でありフィルタということになります。ご覧の通り、フィルタは演算対象の式の後ろに`|`を挟んで後置されます。シェルスクリプトではおなじみのスタイルですね。ただ、代入式の中で使えるので、ちょっとばかり混乱します。

```
[% z = 3.1415 | int %]
```
この例では、まずフィルタリング部分が先に処理されて数値の整数化が行われ、結果が変数`z`に代入されます。つまりz=3となります。

これ以外にも様々な算術関数・文字列処理関数がフィルタとして利用できます。使える式や関数は`Template::Alloy::Operator.`（[metacpanサイト](https://metacpan.org/pod/distribution/Template-Alloy/lib/Template/Alloy/Operator.pm)参照）に依ります。

# より進んだ処理に向けて

ここまで、変数の基本的な使い方について解説しました。

Dapperでは実はハッシュやリストを扱うこともでき、さらに条件判定式やループ制御と組み合わせることで、非常に複雑・柔軟なコンテンツ構築が可能です。それらについては、別記事で改めて論じたいと思います。