開発の背景
マニュアルページを作成しようとした際に、サイドメニュー部など同じ要素を毎ページ記述するのが無駄だなと。(最近はフレーム分割などせずに単一ページにメニュー部をもつデザインが多い)
プログラム込みのWebページ開発であれば、フレームワーク(例えばPythonのDjangoなど)にテンプレートエンジンが大抵用意されていますので、共通部の部品化など効率的な開発が可能です。
このテンプレートエンジンを利用した開発を純粋なHTMLの作成でもできないかなと思ったのが発端です。
ひとまず既存のツールを探してみたところ、HUGOというツールがヒットしたのですが、コンテンツ部分はMarkdownで記述するタイプらしくちょっと自分のニーズとは違いました。
というわけで自作しよう！と(笑)
テンプレートエンジンを利用できる静的HTML作成環境(ツール)
そしてひとまず必要最低限の機能を実装し、まだまだ趣味の範囲ではありますが動くものになったので、下記GitHubで公開してみました。
HTML Works
最近はもっぱらPythonを好んで使っていますが、ツールとして配布を考えると実行形式にビルドできるほうが良いかと思いGo言語を採用しました。
テンプレートエンジンや簡易サーバー機能を標準で備えているのもGo言語を採用したポイントです。
ソースも一緒に公開していますので、興味のある方はどうぞ。
ただしGo言語熟練者というわけではないので、おかしいソースがあるかもしれませんが、そのへんはご容赦ください。
HTML Works の主な特徴
- HTMLのテンプレートエンジンを使用できる
テンプレートエンジンには、Go言語のhtml/templateを採用しています。(というかそのままですｗ)
テンプレート記述のみで完結できるよう、テンプレートエンジンを多少拡張しています。 - WEBサイト公開用の静的HTMLを生成できる
テンプレートエンジンを使用した記述方法で作成したコンテンツから、公開用の静的HTMLを作成します。
本ツールの主機能になります。 - 開発用の簡易サーバーを使用して静的HTML生成前にコンテンツを確認できる
開発用の簡易サーバー機能を用意していますので、編集中のコンテンツをリアルタイムで確認できます。 - Windows/Mac/Linuxの各種環境で使用可能
Go言語で作成していますので、ビルドさえ行えば各種環境で使用可能です。
バイナリ(実行形式)での提供は徐々に増やす予定です。
使い方
基本的な使い方はREADMEを参照ください。
下記に開発の一例を紹介します。
<!--params
{
"title":"HTML Works",
"str1":"abc",
"int1":123,
"bool1":true,
"array1":["a1","a2","a3"]
}
-->
{{extends "_parts/base.html"}}
{{define "content"}}
<p>str1:{{.str1}}</p>
<p>int1:{{.int1}}</p>
<p>
bool1:{{.bool1}}
{{if .bool1}}
<p>if TRUE</p>
{{end}}
</p>
<p>
array1:
<ul>
{{range $i, $val := .array1}}
<li>{{$i}} : {{$val}}</li>
{{end}}
</ul>
</p>
{{end}}
<html>
<head>
<title>{{.title}}</title>
<link rel="stylesheet" href="/resources/css/kuroutokit.css" />
</head>
<body>
{{template "content" .}}
</body>
</html>
上記２ファイルを用意してHTML Worksで生成を実行すると、下記ファイルが生成される流れになります。
生成を実行しなくても、開発用サーバーを実行することでブラウザから生成後の内容をリアルタイムで確認もできます。
<html>
<head>
<title>HTML Works</title>
<link rel="stylesheet" href="/resources/css/kuroutokit.css" />
</head>
<body>
<p>str1:abc</p>
<p>int1:123</p>
<p>
bool1:true
<p>if TRUE</p>
</p>
<p>
array1:
<ul>
<li>0 : a1</li>
<li>1 : a2</li>
<li>2 : a3</li>
</ul>
</p>
</body>
</html>
このようにbase.htmlに共通の内容を記載(他にもサイドメニューを記載したり)することで、共通部の編集が１ファイルで済むような開発が可能となります。