Fuktommy.com

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タグの中に読み込む
># コメント文 コメント

テンプレートと(不完全な)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:webmaster@fuktommy.com" />
  <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:webmaster@fuktommy.com">mailto:webmaster@fuktommy.com</a></address>
</body>
</html>

処理されるファイルは次のように書きます。

test.html:
>>>define TITLE テストページ
>>>include "head.h"
<p>これはテストページです</p>
>>>include "foot.h"

連携

RSS生成ツールと組み合わせると、 ますますCMSっぽくなっていい感じです。

くっつきブログと組み合わせると 簡単にコメントやトラックバックを受け取ることができます。

TrackbackPingやUpdatePingを送ることもできます。

GoogleSitemapのためのテキスト形式のファイルを生成するツールもあります

小さなHTTPDと組み合わせると、ローカルで絶対パスのテストができます。

Copyright© 1998-2016 Fuktommy. All Rights Reserved.
webmaster@fuktommy.com (Legal Notices)