xyzzy
Top Page > html+-mode Tips


install

 作者であるYMTZさんのサイト「YMTZ@web」に行けばすぐ分かるかと。「ENTER」→「xyzzyのページ」→「html+-mode」と移動してください。

各種設定

キーバインド

 html+-modeにはたくさんの関数が用意されています。デフォルトの設定を変更するには、Keybind Customizeで解説したようにsite-init.lに設定を追加すればいいのですが、html+-modeはxyzzy起動時にはロードされていない(HTMLファイルを読み込んだ時点でロードされる)ため、少々書き方が変わります。

site-init.l(追加)
(add-hook
 '*html+-mode-hook*
 #'(lambda ()
     (define-key *html+-mode-map* #\[キー] ' [関数名])
     ))

 各関数の意味は以下の通り。右側はデフォルトのキーバインドです。

html+-do-completion Tab

 現在の行をインデントします。タグなどの入力途中で実行した場合は、それを補完した上でインデントします。

html+-slash /

「</」と入力されていれば直前のタグを参照して終了タグを自動補完します。

html+-newline-and-indent Enter

 現在の行をインデントして、改行します。

html+-guess-tag C-,

 html+-guess-listの設定に従い、親タグを参照してタグ候補を順に表示します。目的のタグが見つかったらそのまま編集作業を続行すればよく、特に確定作業は必要ありません。

html+-copy-tag C-M-,

 以前に出現したタグをコピーします。使い方はhtml+-guess-tagと同じです。

html+-close-match-tag C-.

 終了タグや引用符を状況に応じて補完します。タグの中で「"」が出ていれば「"」を、タグが終了していなければ(「<DT」などと入力されている場合)は「>」を、タグが閉じられていなければその終了タグを入力します。

html+-check-match-tag C-:

 タグがきちんと対応しているか、その整合関係をチェックします。

html+-insert-break C-j

「<br>」を入力します。入力される文字は変えることができます。

html+-insert-image C-x C-i

 実行するとモード行で画像ファイルの指定を要求されます(そのままEnterを押せば一画面ファイラが起動します)。指定したファイルが画像ファイルであれば、そのピクセル数を自動的に取得して、「<img src="ファイル名" width="横幅" height="縦幅" alt="">」の形でタグを挿入します。ここの書式も変更可能です。

html+-insert-internet-shortcut C-x C-@

 実行するとモード行でインターネットショートカット(拡張子urlのファイル)の指定を要求されます(そのままEnterを押せば一画面ファイラが起動します)。指定したファイルが.urlであれば、そのアドレスとタイトルを自動的に取得して、「<a href="URI">タイトル<a>」の形でタグを挿入します。ここの書式も変更可能です。

html+-insert-path C-x C-j

 実行するとモード行でファイルの指定を要求されます(そのままEnterを押せば一画面ファイラが起動します)。ファイルを指定すると、その相対パスをカーソル位置に挿入します。タグの中であれば「"」で、「""」の中では「'」で括り、タグの外の場合は括らずに挿入されます。この設定も変更可能です。

html+-select-link-dialog C-x C-m

 実行するとダイアログが開き、現在のバッファのファイルのカーソル位置以降の、各タグの属性「Name」「ID」「Href」で指定した名前のリストを表示します。リストから選択すると、その位置にカーソルが移動します。「Name」「ID」の値については「【】」で括って表示されます。
 ダイアログ下部のチェック項目の意味は以下の通りです。

開く
リンク先がファイルであれば新規バッファでそのファイルを開きます。
次から全部
次回からはカーソル位置以降ではなくバッファ内のすべての名前のリストを表示します。
browser
当該リンク位置をbrowser.dllで開きます。
html+-select-buffer-dialog C-M-m or Esc Enter

 実行するとダイアログが開き、現在xyzzyで開いている全バッファのうちhtmlファイルから、html+-select-link-dialogと同じように名前のリストを取得し、そのリストを表示します。リストから選択すると、その位置にカーソルが移動します(バッファ移動含む)。
 ダイアログ下部のチェック項目の意味もhtml+-select-link-dialogと同じです。

html+-insert-path-dialog C-M-j or Esc C-j

 実行するとダイアログが開き、html+-select-buffer-dialogと同じように名前のリストを表示します。リストから選択すると、そのリンク先の相対パスを挿入します。タグの中では「"」で括られます。

html+-delete-char-or-selection C-d

 カーソルがタグの先頭(「<」)にある場合にはカーソル位置のタグを全消去、そうでなければカーソル位置の文字を消去します。

html+-backward-delete-char-untabify-or-selection C-h

 カーソルがタグの末尾(「>」)にある場合にはカーソル前のタグを全消去、そうでなければカーソル前の文字を消去します。

html+-kill-following-tag C-M-d

 カーソルがタグの先頭にあればカーソル位置のタグを全削除、そうでなければカーソル位置から単語の終わりまでを削除します。削除なので削除バッファにコピーされます。

html+-kill-preceding-tag C-M-h

 カーソルがタグの末尾にあればカーソル前のタグを全削除、そうでなければ単語の初めからカーソル前までを削除します。

html+-forward-tag C-M-f

 次のタグの先頭へ移動します。

html+-backward-tag C-M-b

 前のタグの先頭へ移動します。

状況に依存したタグ候補 - html+-guess-list

site-init.l(追加)
(defvar *html+-guess-list*
  '(("[親タグ1]"
     . ("[候補タグ1]" "[候補タグ2]" ……)
    ("[親タグ2]"
     . ("[候補タグ1]" "[候補タグ2]" ……)
)
for example...
  ("TR"
   . ("TH" "TD"))

commentary

 変数を設定するだけなら、キーバインドのときのようにフック変数に引っかけなくも、「見つかりません」などとエラーになったりしないようです。
「親タグ」(<TR>)の中(「<TR>」から「</TR>」までの間)でhtml+-guess-tagを実行した場合、「候補タグ」を順に表示させます。この場合、「<TH>」「<TD>」が順に表示されます。
「"」は「\"」と記すことと、一番最後の行だけ「)」が3つ続くことにだけ気を付ければ、後はいくつ設定しても構いません。しかし、あまり多くても使いづらいので、最低限のものだけ設定するといいでしょう。

タブでインデント - html+-indent-column

site-init.l(追加)
(defvar *html+-indent-column* 4)

 *html+-indent-column*の値を、「ツール」→「共通設定」→「表示」タブ→「タブの幅」で設定した数値以上に設定すれば、インデントがタブで行われるようになります。

スペースでインデント

site-init.l(追加)
(add-hook '*html+-mode-hook*
          #'(lambda ()
              (ed::set-buffer-local 'indent-tabs-mode nil)))

 逆に、「タブの幅」を超えてもすべて半角スペースでインデントさせたい場合には、このようにします。「そのバッファでは、タブでインデントしない」というlispを、html+-mode実行時のフックに引っかけています。

Insert Image Tagの文字を変更 - html+-insert-image

html+-mode.l(1012行目、幅の関係で途中改行)
(and w h (insert (format nil
    "<img src=\"~A\" width=\"~D\" height=\"~D\" alt=\"\">"
    (adjust-path f) w h))))
for example...
(and w h (insert (format nil
    "<IMG Src=\"~A\" Width=\"~D\" Height=\"~D\" Alt=\"\">"
	(adjust-path f) w h))))

commentary

 これ以降は、さすがにhtml+-mode.l本体を書き換えなければなりません。書き換えなくてもうまくやる方法があるのかもしれませんが、とりあえず今のところその方法を知らないので。
「"」は「\"」で表されています。上の例での2行目(実際のファイル中では3行合わせて1行なんですが)の、最初の「"」の次から最後の「"」の前までが、実際に挿入されるパスの書式です。ファイル名は「~A」、サイズは「~D」です。

html+-mode.l(1015行目)
(insert (format nil "<img src=\"~A\" alt=\"\">" (adjust-path f))))))

 ここも同様に。

パス挿入のスタイルを変更 - html+-insert-path

html+-mode.l(1055行目)
(:string (insert #\' e #\'))    ; 文字列中の場合は引用符
(:tag (insert #\" e #\")))      ; タグの場合は二重引用符
(insert e))))                   ; 通常空間ならなし
for example...
(:string (insert e))            ; 文字列中の場合

commentary

「e」はパス自身、「#\'」や「#\"」はそれぞれ「'」「"」を表しています。引用符の有無はここで設定します。

インターネットショートカット挿入のスタイルを変更 - html+-insert-internet-shortcut

html+-mode.l(1043行目)
(insert (format nil "<a href=\"~A\">~A</a>" (si:unpack-string url 0) ttl))))
for example...
(insert (format nil "<A Href=\"~A\">~A</a>" (si:unpack-string url 0) ttl))))

commentary

 最初の「~A」はURIを、次の「~A」はタイトルを表しています。最初の「"」の次から最後の「"」の前までが挿入される文字列の書式になります。

html+-modeでブラウザの「ソース表示」
 →witten by sugi

 タブブラウザやIEの「ソース表示」コマンドでソースを表示すると、通常はメモ帳が起動します。しかし、メモ帳は非常に見づらいので、ここでxyzzyを起動するように設定します。
 これには窓の手を使いますが、その前に下準備が必要です。
 まず、xyzzycli.exeを「notepad.exe」という名前でコピーします(別の名前でも構いません)。
 次に、次の内容のテキストファイルを作って、「notepad.ini」という名前で保存します。ファイル名は先ほどコピーしたxyzzycli.exeの名前と同じにします。

notepad.ini(新規作成)
[xyzzy]
compatNotepad=1
precedingOptions="-m html+-mode"

 最後に、窓の手の「ie(1)」タブの中にある「ソースを表示するエディタ」に、先ほどコピーした実行ファイルを指定します。Program Files以下にxyzzyをインストールしているなら、「C:\\Program Files\\xyzzy\\notepad.exe」です。\が2つ重なることに注意してください。

 実際には、xyzzycli.exeをコピーしなくても、xyzzycli.iniを作って同じ内容を書けば、html+-modeでソース表示自体はしてくれます。ただ、これをやると他のファイルもhtml+-modeで開かれてしまうので、別の実行ファイルを指定する訳です。そして、その実行ファイル(notepad.exe)が開かれる際、同フォルダにあるiniファイル(notepad.ini)が読み込まれます。

ローカルで文法チェック
 →Written by Ohkubo

siteinit.l(追加)
(defvar *htmllint-file* "[htmllintのあるパス]")
(defun htmllint-exec ()
  (interactive)
  (let ((file (get-buffer-file-name)))
    (when file
      (pipe-command
       (format nil "perl \"~A\" \"~A\""
               (map-slash-to-backslash *htmllint-file*)
               (map-slash-to-backslash file))))))
(global-set-key #\[キー] 'htmllint-exec)

 Another HTML-lintがローカルにインストールされていれば、それを使って現在のバッファを文法チェックします。結果は*Shell Output*バッファに表示され、そこからタグジャンプでエラーの出た場所に飛ぶことができます。
 使用するには、HTML-lint本体の他に、Perlなどもインストールしておく必要があります。詳しいことはHTML-lintの「ダウンロード」のところを見てください。
 [htmllintのあるパス]は、「htmllint」(拡張子なし)がある場所をフルパスで指定します。「"C:/www/htmllint/htmllint"」など。

▲トップページに戻る▲

インストール

各種設定

キーバインド

タグ候補

タブでインデント

スペースでインデント

<IMG>形式

パス挿入形式

URI挿入形式

ソース表示時にhtml+

文法チェック