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 のお勉強のつもりで頑張ってみましょ。
面倒だから ports で install。
# cd /usr/ports/editors/psgml-xemacs-mule # make # make install
# cd /usr/ports/textproc/docbook # make # make install
# cd /usr/ports/textproc/sp # make # make install
;;; ;;; 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 になっている。
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
次にタグを挿入していく。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-d 。C-c C-c で編集終了。
C-c C-o で誤りのある場所へカーソルが移動し、ミニバッファに説明が出ます。修正がすべて済んだなら、M-< でファイルの先頭に移動してもう一度 C-c C-o を実行します。カーソルがファイルの途中で止まらず、 </html> タグの後ろに移動し、ミニバッファに OK と出れば検査終了です。
どう間違っているか分からない場合は、 C-c C-t で、その位置に置くことのできるタグ一覧を表示すると原因がわかりやすいかもしれません。
キー操作 | 機能 |
---|---|
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 | 属性値を全て適用する |