この記事は1年以上前の古い記事です。現状に即していない記述の場合があります。あらかじめご了承ください。

Windows上で無料のツールを使って楽にHTMLとCSSを書ける環境を考えてみる。

nogajun
2002/05/13

後輩にタグを打つタイプのエディタでいいものない?と相談されたので、Windowsでemacs+psgmlのようなタグ補完のできるエディタを探してみた。

もちろん、後輩は金が無いので無料なもので。 _ Windowsの無料HTMLエディタって、タグをボタンで入力するタイプが多いなぁ。

ボタン入力って、何をするにもキーボードから手を離さないといけないから効率悪いのに。それとも入力補完って考えがない?

それはさておき、Atelier D.はなかなか良さそう。でも、後輩向けにはシェアウェアなので却下。

構造化エディタは、Windows的に言うと直感的なのかな?

個人的には面白そうだけど、後輩的には?な感じなのでパス。

_ xyzzyとhtml+-mode, Topstyle-liteで楽にHTMLとCSSを書ける環境を作る。

結局、回りまわってこういうことになりましたとさ。

xyzzyとはWindows用のemacsライクなエディタ。html+-modeはxyzzy用のhtml編集モード。

Topstyle-liteというのは、Bradbury Softwareというところが発売しているスタイルシートエディタ、Topsyleの機能限定無料版。

どちらのエディタも、タグやプロパティの入力補完機能を備えてるので、HTMLなどを手で打っている人は、かなり楽になるのではないでしょうか。

_ xyzzyのインストールと設定

やる気のころころ変わるxyzzyのページからxyzzyをダウンロードして展開する。

展開してできたxyzzyディレクトリを適当なところに移動。(自分は、c:\Program Filesの下に置きました。) _ 環境変数 XYZZYHOMEの設定。

xyzzyの設定ファイル .xyzzyを置くディレクトリを環境変数XYZZYHOMEに設定します。 _ Windows 2000/XPの場合。

どこに置いてもいいのですが、自分の場合、アプリケーションの設定なので、c:\Documents and Settings\(ユーザー名)\Application Dataにxyzzyディレクトリを作り、そこに.xyzzyに置く事にします。

方法は、コントロールパネルのシステムから、[詳細]→[環境変数]→ユーザー環境変数の[新規]を選び、変数名をXYZZYHOME、変数値を%USERPROFILE%\Application Data\xyzzyにします。 _ Windows 98の場合。

c:\My Documentsにxyzzyディレクトリを作り、autoexec.batにset XYZZYHOME="c:\My Documents\xyzzy"と追加してリブート。

Windows 98はマシンがないのでよくわかんないっす。 _ あとはxyzzy.exeのショートカットを作ってデスクトップに置くなりスタートメニューに入れるなりすれば終わり。

_ html+-modeのインストールと設定

とりあえず、html+-modeのページからダウンロード。あと、broser.dllとbrowserex、最新バージョンではTreeView.dllも必要なので、それぞれのページからダウンロードしておきます。 _ インストール

html+-modeのアーカイブを展開して、html+-mode.lをxyzzy\site-lispディレクトリに移します。

browser.dllはアーカイブを展開すると、ソースのほかに、browser.l、browsers.dll、browserd.dllの三つのファイルがあるので、browser.lはxyzzy\site-lispディレクトリに移動。browsers.dllとbrowserd.dllは、MFCがスタティックリンクされているか(s)されていないか(d)の違いなので、意味がわかる人はどちらか選んで、わからない人はbrowsers.dllをbrowser.dllにリネームしてxyzzy.exeと同じディレクトリに入れておきます。

browserexはアーカイブを展開すると、browserex.lとtoolbar-browserex.bmpの二つのファイルがあるので、browserex.lはxyzzy\site-lispに、toolbar-browserex.bmpはxyzzy\etcに移動させてください。

TreeView.dllはアーカイブの中に、TreeView.dll、dTreeView.dll、TreeView.lの三つのファイルがあるので、dllはxyzzy.exeと同じディレクトリ、TreeView.lはxyzzy\site-lispディレクトリに移してください。 _ 設定

~/.xyzzyに以下の設定を書き加えます。

これは最低限の設定なので、必要ならアーカイブをダウンロードしたそれぞれのページを参照してください。

;; TreeView.dll
(load-library "treeview")
;; browser.dll
(load-library "browser")
;; browserex
(load-library "browserex")
;;
;; キーバインドを変えるなら
;;
;; (global-set-key #\M-F9 'bx:navigate-current-buffer)
;; (global-set-key #\M-F10 'bx:navigate-current-buffer-directory)
;; (global-set-key #\M-F11 'bx:rotate-browser)
;; (global-set-key #\M-F12 'bx:close-browser)
;; (global-set-key #\RBtnUp 'bx:browserex-mouse-menu-popup)
;; (global-set-key #\Apps 'bx:browserex-apps-popup)
;; html+-mode
(export 'ed::html+-mode "ed")
(autoload 'html+-mode "html+-mode" t)
(pushnew '("\\.html?$" . html+-mode) *auto-mode-alist* :test 'equal)

_ 使い方

詳しい使い方は、browserexのOhkuboさんが書いておられるxyzzy 関連の覚え書きを見てもらうとして、とりあえず拡張子がhtmlのファイルを開くか、M-x html+-modeとしてみましょう。 _ Emcasを知らない人へ:

これからM-xや、C-x C-fみたいな表記が出ますが、MはMetaキー(EscもしくはAltキー)、CはCtrlキーを表しています。そして、-(ハイフン)でつないである場合、MetaやCtrlキーとハイフンの次に続く文字のキーを同時押しすることを表しています。

たとえばM-xと書いてあれば、Metaキーとxキーを同時に押すことを表しています。

もうひとつ覚えておいてほしいのは、「困ったときは、C-gを押せ!」 _ ファイルを開いたなら

おもむろに、C-,(カンマ)をおしてみましょう。それらしいタグが出ると思います。というわけで、ぺちぺち中身を書いていきましょう。

もしC-,でタグなどが出ないければ自分で書くわけですが、その場合、途中まで打ち込んでTabキーを押してみましょう。候補が一つだけなら、そのまま補完されます。

候補が二つ以上ある場合、一覧が表示されるので候補が一つになるまで文字を打ってからTabを押して補完させましょう。Tab補完は、属性にも使えます。

C-.(ピリオド)を押すと、前後の文脈からタグや括弧などを補完してくれます。

C-:(コロン)を押すとタグの対応をチェックしてくれるので、時々チェックしてみたり、作り終わってからファイルの最後でチェックしてみるのも良いかも。 _ しかし

DOCTYPEの指定やテンプレートを使うには、どうしたらいいんだろう?

検討課題ではあるけど、Windowsを使わないのでわからないままカモ。

_ Topstyle-lite

xyzzyにも標準でcss-modeがあるのですが、個人的にはそっちよりTopstyle-liteのほうがいいような気がしたので、スタイルシートを書くのにはこっちを使います。 _ インストールとセッティング

Topstyleのダウンロードページからダウンロード。通常のWindowsアプリなので、ダブルクリックでセットアップ。 _ 使い方

デスクトップとスタートメニューにショートカットが作られているのでダブルクリックで起動。

最初に起動したら、ツールバーのOptions→[Options]→EditorのFontを、SystemかＭＳゴシックに変更しておきましょう。コメントに日本語が使えるようになります。(といっても、Shift JISのみですが)

それでは、3ペインで表示されてる右側の部分、Style InspectorからCSS Level 2を選んで、エディタ部にセレクタ名と{を入力してみましょう。

すると、}が補完され、プロパティを入力できるようになります。

プロパティの選択はカーソルキーの上下で、プロパティのメニューを呼び出すには、Ctrl+スペースキーで呼び出します。 _ 使い勝手

うーん。キーバインドが良くわからないなぁ。

キーバインドがわかれば、もっとサクサク打てるような気がする。

_ 読みにくい

自分で書いてなんだけど、ちょっと読みにくいなぁ。ゴメンね。

_ LinuxとWindowsのMozilla

設定もいじってないし同じMS Pゴシックなのに、Windowsのほうは字がすごく読みにくいのはなぜだろう。

埋め込みビットマップフォントのせい? 不思議。

それにしても、Mozilla 1.0RC2ってまた表示が早くなってるんですけど(汗

_ 大佐からコードネームで呼んでもらおう (連邦)

ちなみにオイラのコードネームは

Campbell: "Your code name for this mission will be... Gundam Lynx "

だと。イカす!(笑)

_ サーバー移行プラン

5/18(sat)にVine→Debianの入れ替えを決行します。

_ 皆さん知ってました?

Radio SupersonicでMP3のストリーミングをしていたのを。

まだ、Winampなどで聞けますけが、こいつの扱いをどうするか思案中。

IRCのサーバーも立てたいし。うーん。

_ nofuture.tv

も、days of speed(と書いてへっぽこ日記と読む(うそ))を読みやすくしたり、今まで日記に書いたLinuxの事とかをまとめたいなとも思ってるんだけどなんともはや。

_ 反省

ちょっと意固地になってたのかなと。

今さらながらオトナ気ないな。ヲレ。

_ tdiary-mode.el

キタ━━(゜∀゜)━━( ゜∀)━━━( ゜)━━( )━━(゜ )━━(∀゜ )━━━(゜∀゜)━━!!!!

……。

DebianのEmacs 21.2.1じゃ「Can not open load file: psgml-html」と言われて使えなかったよ。

なんでだろ。(´・ω・`)ショボーン

_ 後輩

すごいやる気を出している。

上のエディタの説明が少し分かりにくいようなので、また書き直します。

_ ん?

nofuture.tvできてる人がいる。あわてんぼさんね(笑)(でも実は見れたりする。)

あと、Radio Supersonicはブラウザじゃなく、Winamp、RealPlayer、Windows Media Playerで開かないと聞けないですよ♪