HTMLプリプロセッサ(Another HTMLPP)
はじめに
BlogなどのCMSでは複数のページのデザインを統一したり、一度に変換したりできます。 静的なHTMLであってもCSSを利用すればデザインの統一ができます。
ここでは静的なHTMLで、デザインの統一をするツールを紹介します。 やりたいことは例えば「どのページにも同じメニューバーをつけたい」とか、 「どのページにも同じ著作権表示を入れたい」とかです。
解のひとつはWiki記法のようなものです。 テキストファイルを読み込んで、HTMLに変換します。 確かにこれは便利ですが、どうせHTMLに変換するのだから、 最初からHTMLで書けばいい、という気もします。
そこでこの文書では、もっと単純に、 (不完全な)HTMLにテンプレートを組み込んでHTMLを合成してしまいます。
ついでにHTMLの文法チェックもしますが、 Another HTML-lint のような高機能なものではありません。 PythonのXMLパーザにかけてエラーが出るかどうかだけで判定しています。 つまり文法チェックができるのはXHTMLのみで、 タグの閉じ忘れや綴り間違いが検出できる程度です。
経緯
僕は結城浩さんのサイトのデザインが好きです。 たまたま、このサイトはMakeWebという ソフトで生成しているということを知りました。 同じようなことを、もっと簡単な実装でやることを考えました。
ちなみにiMatix版Htmlppとは別物です。 こちらはかなり大掛かりな実装です。
ダウンロード
このスクリプトを使うにはPython (2.3+日本語コーデック または 2.4以降)が必要です。
実行方法
次のようにして実行します。
htmlpp [-f] [-v] [-I path] foo.txt
foo.txtが解釈され、foo.htmlが生成されます。
foo.htmlがfoo.txtよりも新しいときには生成されません。
foo.htmlの更新時刻はfoo.txtの1秒後に設定されます。
- -f
- 新旧に関わらず、foo.htmlを生成します。
- -v
- HTMLの文法チェックを行います。
- -I path
- 合成するときのテンプレートやCSVなどの場所を指定します。 複数指定できます。
- foo.txt
- 解釈される(不完全な)HTMLです。 複数指定できます。
記法
ほとんどCPPと同じです。 「#」の代わりに「>」を使います。 「>」は「>>>」のように複数個書いても構いません。
| >include "filename" [localvars] | 別のファイルを取り込む |
| >define var value | 変数に値を設定する |
| >undef var | 変数を削除する |
| >if exp | if文 |
| >ifdef var | 変数が設定されているかどうか |
| >ifndef var | 変数が設定されているかどうか |
| >else [//comment] | if文の切り替え |
| >endif [//comment] | if文の終わり |
| >csvtable "filename" [範囲] [escape] | CVSをHTMLのテーブルにする |
| >textpre "filename" | テキストをpreタグの中に読み込む |
| ># コメント文 | コメント |
- >includeで読み込むファイルは それを呼び出した(不完全な)HTMLのディレクトリ、 -Iで指定したディレクトリ、 スクリプト中で設定されているディレクトリの順に検索されます。 第2引数として localvars を書くと 呼び出されたファイル内で定義した変数は 呼び出したファイルには影響しません。
- 設定した変数は >if 文などで使うこともできますし、 HTML中で <$varname> のようにして参照することもできます。
- >csvtable の第2引数は取り込む範囲です。 4(4行目)、3..5(3〜5行目)、..2(2行目まで)、 5..(5行目以降)などが指定できます。
- >csvtable の第3引数は<>などをエスケープするかどうかです。 escapeと書けばエスケープされます。
- >csvtable ではtableタグは生成されません。
- >textpre ではテキストはエスケープされます。 preタグも生成されます。
テンプレートと(不完全な)HTML
例えばこんなファイルを作って、適当なところに保存しておきます。
head.h:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<title><$TITLE></title>
<link rev="made" href="mailto:[email protected]" />
<link rel="contents" href="/" />
<link rel="stylesheet" type="text/css" href="/common.css" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="/index.rdf" />
<script type="text/javascript" src="/gwselect.js"></script>
</head>
<body>
foot.h: <address>Copyright(c) 1998-2007 <a href="/fuktommy.txt">Fuktommy</a> All Rights Reserved.<br /> <a href="mailto:[email protected]">mailto:[email protected]</a></address> </body> </html>
処理されるファイルは次のように書きます。
test.html: >>>define TITLE テストページ >>>include "head.h" <p>これはテストページです</p> >>>include "foot.h"
連携
RSS生成ツールと組み合わせると、 ますますCMSっぽくなっていい感じです。
くっつきブログと組み合わせると 簡単にコメントやトラックバックを受け取ることができます。
TrackbackPingやUpdatePingを送ることもできます。
GoogleのSitemapのためのテキスト形式のファイルを生成するツールもあります
小さなHTTPDと組み合わせると、ローカルで絶対パスのテストができます。
RSS 1.0