« iPod の未来形?! | トップページ | CSS Nite LP, Disk 1 レポート(その1) »

2006-10-07

HTML エディタとしての Carbon Emacs

Screenshot_2

Dreamweaver などがまだ Intel Mac に対応していないこともあって、目下、色々なエディタを試用しながら、自分に合ったモノを探しています。ポイントは以下の通り。

  1. Intel Mac + Tiger でも動作すること
  2. UTF-8 の読み書きに対応
  3. GREP(正規表現検索や置換)ができること
  4. シンプルな UI
  5. 軽量・軽快なこと
  6. 要素・属性・属性値・コメントなどの色分け機能
  7. 要素名・属性名・属性値などのコンプリーション(補完)機能
  8. 閉じタグのコンプリーション(補完)機能
  9. DTD, RelaxNG, XML Schema などからのパーシングができること
  10. もしくは文法チェック(validation)がエディタ内でできること

最後の2点は欲を言えば..といったレベルの希望なんですけど、それでもいくつか候補は上がってます。そのうちの一つが今回 取り上げる Carbon Emacs(+ PSGML)です。

入手先

Carbon Emacs パッケージ

(後述の PSGML は同梱されています。別途入手する必要はありません。)

Carbon Emacs を使う利点

  1. 上掲の条件は ほとんど満たしている
  2. ほとんど統合環境(シェル・ファイラー・メーラー・テキストブラウザ・エディタを兼ねられる)!
  3. 拡張性が非常に高い。eLisp が書ける人なら、驚くほど色んなことができちゃう(ちなみに僕は eLisp は(も)書けません。あの山のような括弧を見ているだけで目眩が...(^.^;;) )
  4. 慣れると Windows アプリでは通常お目に掛かれない、便利なコマンドも利用できる
  5. ダイアログの代わりにミニバッファを使うので、警告メッセージや検索欄で画面を無駄に占有されずにすむ
  6. fink や apt, コンパイルの知識がない人でも簡単にインストールできる
  7. 依存関係に余計な時間を取られずにすぐ使える
  8. FEP に ATOK や EGBridge などがそのまま使え、Canna などの変換効率に泣かずに済む
  9. [2006-10-08 追加]Dreamweaver や Eclipse, oXygen などに比べてよほど動作が軽い

Carbon Emacs の欠点

  1. 一応、ツールバーやコマンドボタンといった GUI は用意されているが、基本操作は Ctrl キーと Meta キーを軸としたキーボードショートカットで行うのが普通
  2. ところがこのキーバインドが独特。初心者には取っつきにくい上、特に Windows ネイティブのキーバインドとの相性が悪い(たとえば C-w など、誤操作の原因になりうる)。Mac と Windows をハシゴしている人間にはもはや悪夢
    • 逆にほかのアプリケーションのキーバインドを Emacs 風に変えるという発想もあります。たとえば、以前にも紹介した "Firefox で Emacs キーバインド" とか。あまりオススメはしたくないけど..。(^ ^;)
  3. 正規表現の記法も独特。特にどこでエスケープしたらいいかでよく手が止まる
  4. [2006-10-08 追加]PSGML などで使える機能が一部制限されている?(Carbon Emacs 固有の問題?)

[2006-10-08 追加](Validation 機能...というか nsgmls が手元の環境だとなぜか効かない?要原因究明。)

HTML の編集には PSGML がオススメ!

Carbon Emacs には、HTML のタグ挿入を支援してくれる html-helper-mode というパッケージも同梱されていますが、この上、HTML モードのために、タグの種類ごとに新たなキーバインドをいくつも覚えるのは悪夢です。個人的には、覚えるキーバインドがずっと少なくて、XML にも利用できる柔軟な PSGML の利用をオススメします。(XML については、スキーマに RelaxNG を使う nxml-mode というパッケージも同梱されています。)

多くの方はすでにご存知のように、ここで取り上げている Emacs や PSGML 自体は Mac OS X 用の Carbon Emacs でなくとも、各種 Unix や Windows でも利用できます。また、PSGML モードに加え、さらに CSSモードや PHPモード、MMMモードをコラボレートした HtmlModeDeluxe という上級モードに発展させることもできます。

PSGML とは?

PSGML とは、(X)HTML や XML の親規格である SGML の編集を支援するためのパッケージです。

当然、(X)HTML や XML の編集にもそのまま利用できますし、DTD と関連づければ、スキーマで独自に定義した文法に合わせた補完も行えるようになるので、入力の手間を大幅に軽減し、誤入力のリスクやストレスもかなり減らすことができます。

PSGML の使い方

これより、主に Emacs 初心者や未経験者を念頭に置いて話を進めます。(といいながら、僕も初心者とそれほど変わるもんじゃありませんけど。(^ ^;) )PSGML って大体こんな感じです、というイメージをつかんでいただければ充分です。

PSGML には色々便利な機能がありますが、キーバインドとしては最初は以下の2つを覚えておけば充分でしょう。(2006-11-15: ほんのしおりさんのご指摘をいただいて一部修正。)これ以外のものは上記サイトをご覧ください。

C-c C-e
C-c C-t
現在位置に新しく要素を追加する
現在位置に新しくタグを追加する
C-c /現在位置に適切な閉じタグを補完する

PSGML は必要に応じて DTD を読み込んで、適切な要素名や属性名、属性値の候補を一覧表示したり、補完したりすることができます。

新しい要素の挿入

  1. C-c C-e
  2. 要素名を入力(タブ補完可)
  3. return

基本は上記の通りです。Emacs 初心者向けにちょっとだけ詳しい説明を加えると、まずC-c C-e(Ctrl キーを押しながら c の後、Ctrl を押しながら e )を叩きます。

ウィンドウ最下部のミニバッファにカーソルが移るので、ここで要素名を入力を入力します。

Emacs mini buffer

<blockquote> のように長い要素名は、途中まで入力して Tab キーを叩くと、妥当な要素名を補完してくれます。この Tab 補完機能は Emacs では非常によく使う便利な機能なので、今後も Emacs を使ってみようという方は、是非、覚えておきましょう。

Emacs mini buffer

補完されない時は、Tab キーを2回連続で叩いてください。候補がないと知らせてくれるか、該当するすべての候補を一覧表示してくれるはずです。以下は "bl" まで入力して Tab 補完しようとしたケースです。"blockquote" のほかに "blink" という候補が表示されました。このようにミニバッファ内で候補に何があるか分からなくなったら、とりあえず Tab を叩いてみると良いでしょう。

Emacs mini buffer

"blo" まで入力して Tab 補完後、return を叩くとタグが挿入されます。カーソルが開始タグと終了タグの間に来るのが何気にうれしいです。なお先ほど表示された補完候補一覧は自動的に消えます。もちろん "blockquote" と手打ちで入力しても構いません。

Emacs mini buffer

属性の挿入

<a>(アンカー)や <img>(イメージ)要素のように、属性やその値の指定が必要な要素については、属性の入力も支援してくれます。

  1. C-c C-e
  2. 要素名を入力(タブ補完可)
  3. return(ここまでは上記手順と同じ)
  4. 属性名を入力(タブ補完可)
  5. return
  6. (必要に応じて値の入力を求められる)

まず要素名を入力するところまでは上の手順と同じです。ここでは <img> タグを挿入してみましょう。

Emacs mini buffer

属性の入力が必須になっている要素の場合、要素名の入力後に属性(attribute)の入力を求められます。ここでは srcと入力してみましょう。画像ファイルの参照先を指定する属性です。

Emacs mini buffer

return を叩くと再び属性(attribute)の入力を求められます。複数の属性を挿入するケースに対応するためです。今度は alt と入力してみましょう。画像の代替テキスト用の属性ですね。

Emacs mini buffer

再び return を叩くとまた属性(attribute)の入力を求められます。もし、これ以上、属性を挿入する必要がない場合は、何も入力せずにそのまま return を叩くと終了できます。編集している文書が XHTML や XML の場合、<img> のような空要素は、ここでちゃんとタグの末尾に "/" が挿入されます。

Emacs mini buffer

閉じタグ補完

  1. C-c /

閉じタグ補完は、妥当な閉じタグを、編集中の SGML(この場合は (X)HTML )文書の構造を解析して適切に補完してくれます。たとえば、<foo>, <bar>, <baz> という3つの要素を用意してみました。

Emacs mini buffer

ここで C-c / を3回入力してみましょう。

順に </baz>, </bar>, </foo> が補完されるはずです。これで対応する閉じタグが何であるかわからなくなっても、いちいち長いソースコードを遡って見直す必要はなくなります

Emacs mini buffer

Emacs mini buffer

|

« iPod の未来形?! | トップページ | CSS Nite LP, Disk 1 レポート(その1) »

[Web]XHTML」カテゴリの記事

コメント

はじめまして。
最近xhtmlの編集作業をemacsでおこなう為にいろいろ調べ始めたばかりの初心者なのですが、なんだか2種類のモードがこの分野において有名みたいですね。(psgml-Mode,Nxhtml-Mode)webを検索してみるとドキュメントの量がpsgml-Modeの方が多いように感じましたのでこちらをインストールしようとしていますがなかなかうまくいきません。
私の環境と、これをインストールするためにとった行動は以下の通りです。
ハード=MacBookPro 17
OS=10.4.10
Emacs=ここで入手(http://homepage.mac.com/zenitani/emacs-j.html)バージョン・種類等見方が判りませんでした・・・スミマセン。
設定=このサイトと以下のサイトを参考にさせて頂きました。
(http://sickhack.homelinux.org/linux/emacs/psgml/)

メモ:
設定につきましてはこちらのサイトでコメントを寄せられている「ゆう」さんを参考にさせて頂きました。(というか同じです。少しだけ私の環境に合わせて書き換えました。)
設定が終了したので、sourceコマンドで.emacs.elを更新します。
すると、
/bin/bash: /.emacs.el: line 1 : syntax error near unexpected token ';;'
/bin/bash: /.emacs.el: line 1 :';; PSGML 関連'
と出力されます。
このままではうまく行かないことを知りつつ .htmlの拡張子がついていて、そのファイル内に正確な宣言が書き込まれていて、タグ付けに間違いが無いと思われるファイルを開いてもバッファウィンドウの上の帯には「-u(DOS)-- index.html Top l1 (XHTML--------------)」と表示されるだけで「PSGML」とか「XML」など、期待通りのモードに切り替わりません。当然動作もただのhtmlモードみたいです。
また、バッファウィンドウには「File mode specification error:(void-variable xml-font-lock-keywords-2)」と出力されます。

いろいろ調べ回っているのですが、自己解決できておりません。
場違いで初歩的すぎる質問かと思いますがどなたかご教授頂けないでしょうか?
よろしくお願い致します。

投稿: airmacs | 2007-07-02 18:00

反応、遅くなってスミマセン。
フォロー、ありがとうございました!

さきほど、ようやく確認しました。仰るとおり、C-c, C-t ですね。早速、修正しました。

投稿: ゆう | 2006-11-15 04:01

私もこのページを参考にさせて頂いたのですが、hiroki_kanaさんと同じ現象でした。
C-c, C-e (Insert Element)ではなくて、
C-C, C-t (Insert Tag)になっているようです。
ちゃんとインストールできていれば、メニューにSGMLという項目ができていると思います。そのなかに使えるコマンドとショートカット(キーバインディング)があると思います。

投稿: ほんのしおり | 2006-11-12 03:09

こちらこそ、はじめまして。

すみません。書いておけば良かったですね。本文中でもリンクしている「PSGML モードを使う」を参考にしながら、.emacs は以下のように設定しました。

--------------------------------------------

;; PSGML 関連
;;-------------------------------------;;
(autoload 'xml-mode "psgml" "Major mode to edit XML files." t)

;; .xml, .htm, .html, .rlx, .rng も xml-modeで開く
(setq auto-mode-alist
(append
'(("\\.\\(xml\\|htm\\|html\\|rlx\\|rng\\)$" . xml-mode))
auto-mode-alist))

(add-hook 'xml-mode-hook
(function
(lambda ()
;; カタログのある場所を指定
(setq sgml-catalog-files
(append '("catalog" "~/scheme/catalog")
sgml-catalog-files)))))

--------------------------------------------

なお、カタログファイル(ここでは ~/scheme/catalog を新規に作成しました)の中身は以下の通りです。

--------------------------------------------

PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" xhtml1-strict.dtd
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" xhtml1-transitional.dtd
PUBLIC "-//W3C//DTD XHTML 1.1//EN" xhtml11.dtd

--------------------------------------------

なお、上の設定だと、編集する文書の拡張子が、新規文書であっても .xml, .htm, .html, .rlx, .rng などになっている必要がありますので、これ以外の拡張子のプレーンテキストファイルやスクラッチバッファなどでは、手動で PSGML を起動しない限りは動かないことに注意してください。

今度はいかがでしょうか?動くと良いのですけど。

投稿: ゆう@管理人 | 2006-10-22 03:30

はじめまして。

私も使ってみようと思い、carbon-emacsをインストールし.emacsに以下の文を追加しました。
 (autoload 'sgml-mode "psgml" "Major mode to edit SGML files." t )

起動しM-x sgml-modeでPSGMLモードを起動させたのですがC-c C-eを打つと"No document type defined by prolog"とエラーが出てしまいます。

恐れ入りますが、.emacsにPSGMLモードを使うにあたって追加した部分を教えていただけませんか?

投稿: hiroki_kana | 2006-10-22 02:33

okuryu さん、はじめまして。

恥ずかしながら、NxmlMode は知ってましたけど、NxhtmlMode は okuryu さんのご指摘で初めて知りました。これまた面白そうですね。ありがとうございました!後で早速、試してみようと思います。

投稿: ゆう@管理人 | 2006-10-11 20:22

はじめまして。
http://www.emacswiki.org/cgi-bin/emacs/NxhtmlMode
ご存知かもしれませんが NxmlMode がベースになっている NxhtmlMode という lisp を使うと自動的に簡単な文法チェックもしてくれます。
参考までに。

投稿: okuryu | 2006-10-11 15:19

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/15394/3726201

この記事へのトラックバック一覧です: HTML エディタとしての Carbon Emacs:

» =?utf-8?B?ZGVsLmljaW8udXMvcG9wdWxhcg==?= [The.RSS.Reporter]
Gmailのアカウント消失に備える [続きを読む]

受信: 2006-10-11 18:15

» emacsでpsgmlモードを使う [Wiki Number8 (PukiWiki/TrackBack 0.4)]
必要なパッケージ w3c-dtd-xhtml sgml-data リンク HTML エディタとしての Carbon Emacs psgmlを使ってみる PSGMLモードを使う PSGMLのススメ PSGMLでSmartDoc文書を書く ゴミ箱の中の技術メモ [続きを読む]

受信: 2007-02-12 00:01

« iPod の未来形?! | トップページ | CSS Nite LP, Disk 1 レポート(その1) »