address Logo

HTML 文書の簡単な作り方 (第3.1版)

目次

2007/09/29 改訂(ver.3.1)
2007/09/23 改訂(ver.3)
2006/07/01 追加(rit)
2006/05/10 更新
ptt とは tt 形式のテキストファイルを基に HTML 文書を作成するツールです。

新版への変更点

ver.3.0 から ver.3.1 への変更

ver.2 から ver.3 への変更

新版の文法は

tt 文書の文法 ( tt ver.3.1 )

を見て下さい。

ver.1 から ver.2 への変更

tt 形式の初版は awk で処理していましたが、第2版は Python で処理しています。処理プロセッサの名称も t2h から ptt に変更しました。Python に変更したのでプロセッサのソースコードの可読性が大きく向上し、それに伴って機能が向上しています。
第 2 版の文法は

tt 文書の文法 ( tt ver.2.0 )

旧版の内容は

HTML文書の簡単な作り方 (第1版)

互換性については

compat.html

をご覧下さい。

tt形式

どのような人に推奨できるか?

HTML 形式の文書を直接作成するのは面倒です。日常的に見られる簡単な文書を作成するには、HTML の文法はオーバースペックだからです。tt 形式(注)は私たちがメモ的にテキストファイルに書き込むようなシンプルな文書を、あまり視覚デザインに凝らない HTML 形式に変換することを目標に設計されました。
tt 形式は次のような人(私のような人)に最適です。

つまり、面倒なことをしないで、それでいて、上品な HTML 文書を公開したいと言う人は試してみてください。きっと気に入ると思います。

注釈: 「tt 形式」と言うのは筆者が勝手につけた名前です。

tt 形式の簡単な文例

tt 形式の最も簡単な文例は 

H1: tt 形式について
tt 形式の文書はメモ書きを Web ページに公開するのに最適です。

のように、表題と本文から構成される文書です。ここに現れる "H1:" は tt 形式の文書のタグです。("H1:" は必須です。)
HTML 形式のタグとは異なり、tt 形式のタグは行に付けます。タグは行の先頭から書き始めます。ptt はこれを基に次の HTML ファイルを作成してくれます。 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja"><head>
<!-- automatically generated by Ptt 3.1 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>tt 形式について</title>
<link rel="stylesheet" type="text/css" href="/style.css">
</head>
<body>
<table style="border:0" width="100%">
<tbody><tr>
<td style="border:0"><img src="/image/addr.png" alt="address"></td>
<td style="border:0"><img src="/image/logo.png" alt="Logo" align="right"></td>
</tr></tbody>
</table>
<h1>tt 形式について</h1>

<p>tt 形式の文書はメモ書きを Web ページに公開するのに最適です。
</p>

</body></html>

HTML 形式を直接手で書くのに比べて生産性の違いは歴然としています。

HTML のテーブルは面倒だね

でも tt 形式では自然な感覚でテーブルを作成できます。 

Ta: 
名前 年齢 性別
alice 18  女
bob   20  男

(テーブルの記述は必ず空行で終えて下さい。)
これは次のようになります。

名前 年齢 性別
alice 18 女
bob 20 男

ここでは項目は空白切りですが、セバレータを与える事もできます。また簡単にフィールド幅や書式(右寄せ、左寄せ)を指定する事もできます。

画像の扱いは?

一枚の画像であれば 

I: cat.jpg
C: ぼくんちのかわいいネコ

のようにして取り込みます。結果は

cat

ぼくんちのかわいいネコ

のようになります。

複数の画像を並べるには、例えば 

II:!
リリー lily.jpg
アイリス irise.jpg
ポーチェラカ portyeraka.jpg
!

で次のようになります。

lily.jpg irise.jpg portyeraka.jpg
リリー アイリス ポーチェラカ

IE はいろいろ問題が多く、例えば画像の大きさをウィンドウに合わせて調整してくれません*。従って大きな画像を使うと見づらくなります。

注* この問題は Vista になった現在も改善されていません!

もっといろいろな文例は?

殆どの人のニーズは、ヘッダを入れ、文章を書いて、あとは画像とテープルぐらいです。そのレベルであれば、以上の解説で十分です。それ以上の凝ったページを作りたい場合には文法を調べて下さい。

tt 形式のサンプルは筆者のホームページに多数あります。
例えば

index.tt このページの原型
compat.tt compat.html の原型
grammer.tt grammer.html の原型。高度な使い方の例
注意: 他のサンプルもありますが、古い tt 形式が使用されている可能性があります。

tt 形式の文法詳解

tt 形式では頻繁に使用される文章構造が簡単に作成されるようにできています。
また、HTML で可能な事は全て可能になっています。
文法についての詳しい解説は次を見てください。

文法を見る

ptt のデモ

試してみる

インストール

ptt

2006/05/10 更新

ptt には Python が必要です。tt 形式のファイルの文字コードが UTF-8 であれば Python 1.5 で動きますが、それ以外の文字コードの場合には Python 2.2 以降を使ってください。

ptt ダウンロード

この ptt は筆者の Plan 9 環境で動いているものです。先頭の行が
#!/bin/env python
になっていますが、利用環境に応じて調整してください*。

注* UNIX であれば "/usr/bin/env python"、Plan9 であれば "/bin/python" が普通です。僕の "/bin/env" は僕の独自の環境を前提にしています。

UNIX 環境では foo.tt を html に変換するには 

	ptt foo.tt >foo.html

Windows 環境では「コマンドプロンプト」から 

	python ptt foo.tt >foo.html

文字コードの調整

筆者は UTF-8 を使っていますが、他の文字コードを使う場合には ptt の先頭の 

#!/bin/env python
# encoding: utf-8

および 

# our preference
encoding="utf-8"   # encoding in tt text

の utf-8 を変更してください。

文字コード名 encoding OS
Unicode utf-8 MacOSX
Shift JIS shift-jis Windows, MacOSX
JIS EUC euc-jp UNIX, MacOSX
JIS iso-2022-jp  

好みの調整

ptt のソースコードの中には 

# our preference
encoding="utf-8"   # encoding in tt text
style="/style.css"
decoy="otori@ar.aichi-u.ac.jp" # decoy mail address to trap spam

と書かれている所がありますが、各自の環境と好みに従って調整してください。なお decoy は 

	decoy=None

としておけば良いと思われます。この部分はスパマーが隠された囮のメールアドレスを捉えるか否かの実験のためのものです。

またページの先頭に表示されるロゴなども各自の好みのものを準備して下さい。

スタイルシートは筆者のものは http://ar.aichi-u.ac.jp/style.css でタウンロードできます。これは筆者の好みによってチューニングされています。

mkh

mkh は便利なツールですが、この利用には Plan 9 から輸出されたツールを使う必要があるので、パワーユーザ以外には推奨できません。

tt 形式の文書の集まりから html 形式の文書を纏めて作成する make file によるスクリプトです。mkh が無いと、foo.tt から foo.html を生成する場合に、
UNIX の場合にはシェルから 

	ptt foo.tt >foo.html

Windows の場合には「コマンドプロンプト」から 

	python ptt foo.tt >foo.html

としなくてはなりません。

ファイルが多い場合には煩わしく、また間違う可能性があります。mkh を使えば単に tt ファイルが置かれているディレクトリで 

	mkh

すれば、後は自動的に必要な html ファイルを生成してくれます。

また mkh には使用すると画像をクリックした時に開かれる html ファイルを自動作成し、さらに複数の tt 形式のファイルとから HTML ファイルを簡単に作成できます。

ダウンロード mkh

mkh の利用には Plan 9 の mk と rc がインストールされている必要があります。

rit

2006/07/01 追加

Plan 9 の環境では rit と組み合わせる事によって tt 形式の文書に任意の Plan 9 のコマンドを埋め込む事ができます。また Plan 9 の環境変数やシェル変数が自然な形で HTML のドキュメントに取り込めます。

rit で処理させる tt 形式は次のようになります。 

#!/bin/rit -s
....
....
${
....
....
}$
....
....

この中の $ と $ で囲まれた部分に Plan 9 のコマンドを Rc 形式で書きます。$ と $ の組はいくつあっても構いません。

ここに書いた事は tt の文法で言えば 

!:終了文字列
#!/bin/rit -s
終了文字列
....
....
!:終了文字列
${
....
....
}$
終了文字列
....
....

と同じ事なのですが、筆者の経験では ptt の処理対象から外す記号 

	!: 終了文字列
	終了文字列

の部分を付け忘れる事が多く、そのため rit で後処理をさせる場合には、この部分を付けないことにしただけです。

なお rit に関しては http://plan9.aichi-u.ac.jp/pegasus/man-2.1/rit-1.2.html をご覧下さい。

他のホームページ作成ツール

Netscape 7.0
Netscape には web 頁を作成する機能があります。ワープロ感覚で作成できます。僕には煩わしい限りですが…
Zope
僕は Zope は試用していません。はっきり言える事は大袈裟なツールは嫌いです。理由は、その利用には特別の環境が必要であり、手軽にと言う訳にはいかないからです。

以上の他にワープロの中に HTML 文書への保存機能を持っているものもあります。

ホームページ作成ガイドライン

ptt を使用すると以下のホームページ作成のガイドラインは自動的に満たされるはずです。