カビパン男と私

HOME/横書き縦書き

html 変換用のテキスト表書式を考える

最近 html の表を作ることが多くて、効率のいい表入力について考えた。ただし、表計算ソフトではなく、エディタで入力する方法についてである。

プレーンテキストで書いた表から html のテーブルを作ることは、そう難しいことではない。最初に考えた「楽をする方法」は、sed で処理することだった。1 分もあれば書けるような簡単なスクリプトだ。

このやり方は、しかし、すぐに壁にぶつかった。表の多くが rowspan や colspan を設定しなくてはならず、sed でrowspan を処理するのは、かなり難しい。

そこで、awk の出番となった。はっきりしてきたことは、colspan や rowspan をプレーンテキストでどう表現するかという問題のほうが、それをどうスクリプトで処理するかよりも、ずっと大きな問題だということだった。

大きなセルを表現するには、2 種類の方針がある。ひとつは、それを罫線の問題と考えることであり、もう一つはセルの拡大と考えることである。html の table 要素は、後者の考え方を採用している。したがって、私の考えるテキスト表の書式も、それに従うほうがよい。

あれこれ考えた末に得た結論は、拡大するセルにサイズを書き込むのではなく、そのセルが拡大されたことにより覆われてしまう位置にあるセルに、「上に接するセルによって覆われよ」とか「左に接するセルによって覆われよ」とかいう呪文を書き込んでおくというものだった。たとえば、

という表の入力は、

動物  哺乳類
↓    爬虫類

のようになる。下向きの矢印だけからなるセルは、「動物」と書かれたセルが拡大することによって覆われるのである。

同様に、右向きの矢印によって、左のセルの横幅を拡張することにする。2x2 以上の大きさを持つセルは、二種類の矢印を使えば表現できる。

このやり方を、試してみると、かなり効率がいいということがわかってきた。何より、見た目がスッキリしていてわかりやすい。実装も驚くほど簡単で、下の行から上に向かって、行末から行頭に向かって、矢印をカウントしながら読んでいけばよい。awk で実装してみたところたった 22 行で済んでしまった(最終行から読んでいくために tac コマンドを利用した)。

ウェブページ上で試すことができるように、Javascript による実装を貼っておくと、こんな感じ。いったん全入力を読み込んでから処理するが、そもそもたいしたデータ量ではないから、さくっと処理してくれる。

これを一歩進めて、表のデータを html ファイルにコメントとして書き込んでおき、これをクライアント側で td 要素や tr 要素に展開することもやってみた。ユーザーエージェントに依存する部分がある可能性があり、業務に使えるわけではないが、個人で使うぶんには申し分なく簡単に表が作れ、表中のデータを差し替えるのも楽である。

@kabipanotoko