📑

軽量マークアップ言語markgaab入門（２）：HTMLの雛形から完成版ウェブページを作る

2023/08/20に公開

Perl

この記事の主題は?

作者開発の軽量マークアップ言語markgaabと、そのサポートツールWini.pmを活用すると、定型的なウェブページを効率的に作りまくれるよという話です。

当記事の内容を再現するには、お使いのPC上でWini.pmを使えるようにしておく必要があります。

参照：
ウェブサイトらくらく作成軽量マークアップ言語markgaab/Wini

さっそく実践

次のような手順を踏みます。

エディタで雛形HTMLファイルを作る。
エディタで「パラメータファイル」を作り、その中に記事ごとのテキストを書き込む。
コマンドラインからWini.pmを呼び出し、雛形HTMLとパラメータファイルの内容を合成して完成版HTMLファイルを作る。

まず「雛形HTMLファイル」を作る

ここではtemplate.htmlとして、以下のファイルを用意しましょう。

<!DOCTYPE html>
<html lang="[[lang]]">
<head>
<meta charset="UTF-8">
<!-- link rel="stylesheet" type="text/css" href="https://unpkg.com/mvp.css" -->
<style>
  h1, h2{
    text-align: center;
  }
  td{
    text-align: center;
  }
  .right{
    text-align: right;
  }
  footer{
    background-color: black;
    color: white
  }
</style>
<title>[[pagetitle]]</title>
</head>
<body>

<header>
<h1>[[sitetitle]]</h1>
<h2>[[pagetitle]]</h2>
<div class="right">First Published: [[firstdate]]</div>
<div class="right">Last Updated: [[lastdate]]</div>
</header>
<hr>

<section id="introduction">
<h1>序論</h1>
[[introduction]]
</section>

<section id="main">
<h1>本文</h1>
[[_]]
</section>

<section id="conclusion">
<h1>結論</h1>
[[conclusion]]
</section>

<footer>
Copyright &copy; John Doe, 2022, All right reserved.
</footer>
</body>
</html>

ブログの個別記事ページを想定して作成しました。何の飾り気もありませんが、一方でセマンティックウェブを意識し、シンプルながらもセクショニングタグ（<header>, <footer>, <section>）を使っています。

この段階でプレビューを見てみましょう。

ご覧の通り、ところどころに[[...]]という文字列が見えるのが特徴的です。これらは、最終的には所定の文字列に置き換えられことになります。このような場所のことを「プレースホルダー」といいます。数学的に言えば、[[変数名]]で指定した変数に特定の「値」を代入していくことになります。

パラメータファイルを作る

テンプレート中プレースホルダーに流し込まれるテキストデータのことを「パラメータファイル」と呼びます。

パラメーターファイルはJSONに似たフォーマットの「変数定義」領域と、markgaabで書かれたテキストから成ります。

とにかく作ってみましょう。ファイル名はsample.parとしておきます。

===
firstdate: '2023-01-01'
lastdate: '2023-08-17'
lang: 'ja'
sitetitle: 'My Site'
pagetitle: 'My Page'
===

このファイルのテキストをテンプレートHTMLに「穴埋め」していくことにより、完成版のHTMLファイルが完成する。

; {{*|template.html}}
: テンプレートHTMLファイル
; {{*|sample.par}}
: このファイル。「穴埋め」用テキスト

?#introduction

ここでは、Wini.pmをテンプレートモードで扱う例を示す。

?#conclusion

こんな感じで、定型的HTMLページを生成することができる。

変数定義域

ファイルの冒頭に===の対に囲まれた領域があります。これが変数定義領域です。一行一変数として変数の値を設定します。

各行のフォーマットは次のような形を取ります。

変数名： 'テキスト'

変数名には半角アルファベット・数字・アンダースコアを使うことができます。テキストは半角の'または"で囲んでください。

markgaabセクション

パラメータファイルの変数定義域以外のところには、markgaab形式のテキストを書くことができます。

markgaab形式は、markdownやウィキペディア用マークアップで使われる様式に似た簡易なフォーマットでハイパーテキストを書くもので、最終的にHTMLに変換されることを前提としています。

上記の例を理解するための必要最低限の説明：

改段落したいところには「空行」を置く（空行にならない改行は無視される）。
;で始まる行は「定義リスト」の項目名（<dt>タグに対応)。
:で始まる行は「定義リスト」の説明文（<dd>タグに対応)。
?#で始まる行は「セクションの開始宣言」。?#には半角英数字からなるIDを設定する。これは雛形ファイルのプレースホルダーのIDに対応する（つまり変数名として使われる）。
雛形ファイル中の[[_]]は特殊なプレースホルダーで、パラメータファイルの変数定義域と最初のセクション開始の間に置かれたmarkgaabテキストに対応する。

この他、ハイパーリンク、インラインイメージ、文字スタイル設定（強調、斜体など）、表の挿入などができますが、詳細はマニュアル（ウェブサイトらくらく作成軽量マークアップ言語markgaab/Wini）に譲り、ここでは深入りしません。

テンプレート＋パラメータ＝完成版HTMLファイル

少しだけ、コマンドラインで作業します。

Wini.pm --template template.html < sample.par > sample.html

これで新しいファイルsample.htmlが出来ているはず。プレビューしてみます。

実務への応用に向けて

このように、雛形HTMLテキストにデータを流し込んで「定型的ウェブページ」を簡単に作ることができます。

Wini.pmにはディレクトリを指定してそこにある全ページデータをまとめて変換処理するオプションも用意されています。この機能を利用すれば、サイト丸ごとのコンテンツを一括生成できます。つまりWini.pmは静的サイトジェネレーターとして利用できます。