PSGML Install

mobio で HTML を編集するために PSGML package をインストールしてみる。
PSGML package は emacs で SGML 文書を編集するためのモード(sgml-mode) を提供するものだが、HTML 用の DTD(Document Type Definition: 文書の仕様書) があれば、HTML の仕様に添った記入可能な HTML タグのみをリストアップしてくれるので、タグを忘れたりしたときにも便利。また、構文チェック機能もある(with SP)。

本当は Dreamweaver を使いたいんだけど、それだけのために再起動して Windows を動かすのもどうもねぇ。っていうか、mobio の画面(640x480)で Dreamweaver 使う方が無理があると思う……。まぁ、HTML 4.0 のお勉強のつもりで頑張ってみましょ。

PSGML のインストール

面倒だから ports で install。

# cd /usr/ports/editors/psgml-xemacs-mule
# make
# make install

docbook(DTD) のインストール

# cd /usr/ports/textproc/docbook
# make
# make install

SP のインストール

# cd /usr/ports/textproc/sp
# make
# make install

.emacs の編集

;;;
;;; psgml - Major mode to edit SGML files
;;;
(require 'psgml-startup)
;(setq load-path (cons "/usr/local/lib/xemacs/site-lisp/psgml" load-path))
(autoload 'sgml-mode "psgml" "Major mode to edit SGML files" t)

;; File 名が *.html なら sgml-mode にする
(setq auto-mode-alist (append '(("\\.html$" . sgml-mode)) auto-mode-alist))

;; sgml-mode の設定
(add-hook 'sgml-mode-hook
          (lambda ()
             (if (or (string-match "\\.html$" (buffer-name))
                     (string-match "\\.htm$" (buffer-name)))
                 (setq sgml-omittag t ;; タグの省略は有効
                       sgml-shorttag nil ;; タグの短縮は無効
                       sgml-omittag-transparent t 
                       sgml-indent-step nil 
                       sgml-indent-data nil ;; 自動インデント無し
                       ))))
;DOCTYPE宣言の設定
(setq sgml-custom-dtd
      '(("HTML 3.2" "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 3.2//EN\">")
      '(("HTML 4.0" "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0//EN\">")
	))

編集が終わったら、.emacs を再読み込みしておく。

M-x load-file
Load file: ~/.emacs

使い方

ファイル名が .html で終わるファイルを読み込むと自動的に sgml-mode になる。 C-x C-f index.html として、モードラインが (SGML [HTML]) と表示されていれば sgml-mode になっている。

DOCTYPE 宣言の挿入

sgml-mode で HTML を書き始めるためには、DOCTYPE宣言が必要なので

C-c C-u C-d
Insert DTD: HTML 4.0

とすると、文頭に DOCTYPE宣言が挿入される。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

#利用する DOCTYPE は便宜変更すること。

HTML のバージョンによる違いについては、書籍などを参照してください。※1

HTML タグの挿入

次にタグを挿入していく。DOCTYPE宣言があれば、タグを挿入する際ミニバッファに Element: 等と表示されているところで [Tab] を押すと、HTML の文法上その場所に挿入できるタグが一覧表示される。

まず最初は、html タグを挿入する。

C-c C-e
Element: html

とすると、

<html>
<head>
<title></title>
</head>
<body>
<!-- one of (SCRIPT ADDRESS FIELDSET TABLE HR FORM BLOCKQUOTE NOSCRIPT DIV DL PRE OL UL H6 H5 H4 H3 H2 H1 P) -->
</body>
</html>

と、とりあえず必要なタグが挿入され、TITLE タグにカーソルが置かれるので、そのままタイトルを入力する。

この C-c C-e では開始タグと終了タグが両方挿入されます。

要素の開始タグのみを挿入したいときは C-c < を使います。C-c / で開始タグに対応した終了タグが挿入できます。

C-[Space] で付けたマークから現在のカーソル位置までの範囲をタグで囲みたいときは、C-c C-r を使います。

属性の挿入

まずは C-c C-e で meta タグを挿入する。

C-c C-e
Element: meta
Value for CONTENT (CDATA): text/html; charset=euc-jp

C-c + でカーソル位置の要素の属性を設定する。既に設定済みの属性値を再指定すると、上書きされる。

C-c C-+
Attribute name: htt-equiv
Value for HTTP-EQUIV (NAME): content-type

として、http-equiv アトリビュートを挿入する

<meta http-equiv=$quot;content-type$quot; content=$quot;text/html; charset=euc-jp$quot;>

C-c C-a で属性編集ウィンドウが開き、複数の属性をまとめて指定することができる。[Tab] で順番に移動。初期状態の#DEFAULT 値は Readonly なためそのままでは編集できない。 C-c C-k で消去・編集が可能となる。#DEFAULT に戻すには C-c C-dC-c C-c で編集終了。

構文チェック

C-c C-o で誤りのある場所へカーソルが移動し、ミニバッファに説明が出ます。修正がすべて済んだなら、M-< でファイルの先頭に移動してもう一度 C-c C-o を実行します。カーソルがファイルの途中で止まらず、 </html> タグの後ろに移動し、ミニバッファに OK と出れば検査終了です。

どう間違っているか分からない場合は、 C-c C-t で、その位置に置くことのできるタグ一覧を表示すると原因がわかりやすいかもしれません。

コマンド一覧

sgml-mode
キー操作 機能
C-c C-u C-d DOCTYPE 宣言の挿入
C-c C-e 要素の挿入
C-c < 開始タグの挿入
C-c / 終了タグの挿入
C-c = 要素の名前変更
C-c - 要素の開始・終了タグをなくす
C-c + 属性の挿入
C-c C-a 属性編集ウィンドウを開く
C-c C-o 次の文法誤りのある場所へ移動
C-c C-t 現在のカーソル位置に挿入可能(valid)なタグ一覧を表示
C-c C-v 構文エラーチェック
C-c C-p Parse DTD
属性変更ウィンドウ
キー操作 機能
[Tab] 次の属性値へ移動
C-c C-k 属性値を消去
C-c C-d 属性値を #DEFAULT に戻す
C-c C-c 属性値を全て適用する

参考文献

注釈

※1 Academic HTML
HTML 2.0, 3.2 4.0 や CSS に付いて詳しく解説されています。