HTMLテンプレートにMayaa用のspanタグを入れるelisp

emacs seasar

HTMLテンプレート(UIモック)を作成する際にはspanタグを入れる単純作業が多いので、emacs用の関数を書いてみました。elisp書くのは久しぶりです。

(defun mayaa-span (id)
  "enclose region in span tag"
  (interactive "sInput Mayaa Id: ")
  (let ((start (copy-marker (region-beginning)))
        (end (copy-marker (region-end))))
    (save-excursion
      (goto-char (marker-position start))
      (insert-string (format "<span m:id=\"%s\">" id))
      (goto-char (marker-position end))
      (insert-string "</span>"))))

ご覧のとおり単純な関数です。この関数をロードしてお好みのキーマップに設定すれば、emacsでのUIモック作成作業がちょっと楽になります。キーバインドはご自由にどうぞ。

使い方

私たちのチームでは、HTMLテンプレートにする前にまず素のHTMLでレビューを行います。レビューの後には、まだspanタグやdivタグなどが入っていない、画面遷移だけができるHTMLファイルが残ります。このHTMLファイルにspanタグなど、動的に表示するためのテンプレート要素を入れていくという作業を行います。


たとえば以下の「太郎」の部分を動的な表示項目にしたい場合があったとします

おなまえ: 太郎

「太郎」の部分をリージョンに入れ、割り当てたキーを押す、もしくは「M-x mayaa-span」で、ミニバッファにMayaa用のidを入れることを促されます。

Input Mayaa Id:

たとえば「customerName」と入れてEnterを押すと、以下のようにリージョンがspanタグで囲まれます。

おなまえ: <span m:id="customerName">太郎</span>

これでちょっと作業が楽になりました。
divタグとかもこの要領で行けそうですね。ユニットテストを書きたいな…