exoego.net » archives

秀丸マクロでZen-Coding

公開日時
2010/02/23
最終更新
2010/05/22

概要

ダウンロード

サイトー企画内の秀丸マクロライブラリでも公開しています。

利用方法

インストール

  1. 秀丸エディタ（ver 7.00 以降のみで確認）を入れてください。
  2. マクロフォルダのパスを確認します。秀丸エディタの [その他] - [動作環境] - [パス] - [環境] - [マクロファイル用のフォルダ] で指定されているフォルダです。無指定なら Hidemaru.exe と同じフォルダです。
  3. ダウンロードした zencoding-for-hidemaru.zip を展開し、中に含まれる zencoding.mac と zencoding.ini の2ファイルをマクロフォルダに移動してください。
  4. 秀丸エディタの [マクロ] - [マクロ登録] で、zencoding.mac を任意の番号に、別々に2つ登録してください（Wrapモードを使わない場合は1つで大丈夫です）。
  5. [その他] - [キー割り当て] で、上述の登録した２つのマクロにそれぞれ別のショートカットキーをマクロに割り当ててください。Wrapモードの起動に割り当てたい方にはShiftキーを必ず含めてください。例としては、
    • Ctrl+E: 通常モード（セレクタの変換）
    • Shift+Ctrl+E: Wrapモード（ダイアログにセレクタを入力し、生成したHTMLで選択範囲を囲む）

マクロの動作設定

  • zencoding.ini ファイルに変更を加えてください。

セレクタをHTMLソースに変換する

通常モード

  1. 記法に従ってセレクタを記述し、範囲選択します。
    • 選択しない場合、キャレットが存在する行が自動で選択されます。
    • 複数行選択した場合、各行がそれぞれ個別に変換されます。
  2. マクロに割り当てたショートカットキー（例：Ctrl+E）を押して、マクロを実行します。
  3. セレクタを元に生成されたHTMLソースが挿入されます。

Wrapモード

  1. Wrapしたい領域を範囲選択します。
    • 選択しない場合、キャレットが存在する行が自動で選択されます。
  2. マクロに割り当てたショートカットキー（例：Shift+Ctrl+E）を押して、マクロを実行します。Wrapモードを起動するためにはショートカットキーにShiftキーを必ず含めてください。
  3. 出現するダイアログにセレクタを記述します。
  4. セレクタを元にHTMLソースが生成され、さきほど選択した部分を子要素として適宜埋め込まれたも上で挿入されます。

アンストール

  1. 秀丸エディタの [その他] - [キー割り当て] から、本マクロに割り当てたショートカットキーを解除してください。
  2. [マクロ] - [マクロ登録] で、本マクロの登録を解除してください。
  3. マクロフォルダから本マクロを削除すれば、以上でアンインストールは完了です。

記法

本家との違い

  • 本マクロのバージョン番号と、本家Zen-Codingのバージョン番号は対応していません。
  • タグ名なしで .class や #id を使うと、それらのclassやidを持つdiv要素として変換します。本家（ver0.6）にもありました。
  • 子要素の指定には E>E に加え、 E E も使えます（>を打つより速いので）。
  • a[href=http://www.google.co.jp]のように属性を指定できます。これも本家（ver0.6）にもありました。
  • insやdelに、そのときの時間を datetime属性 として指定します。
  • まだ対応してない記法（ul+やdl+などの展開）があります。ver 0.4で対応しました。
  • dl>(dt+dd)*3 のようにグループの繰り返しが出来ます。
  • E! で、ブロック要素の末尾や直後にコメントを自動挿入します。
  • E& で、ソースを実体参照にして出力します。

E

要素名はそのタグに変換されます。一部の要素では、必須の属性やよく使われる属性があらかじめ付与されて出力されます。基本は XHTML（空要素の末尾が「 />」となる）ですが、設定を変えることで HTML モードにもできます。

h1
<h1></h1>
a
<a href=""></a>
img
<img src="" alt="" width="" height="" />

E#id, E.some.class

CSSセレクタと同様、「#」や「.」をそれぞれid属性, clss属性として付与したタグを出力します。

  • 複数の「.」で区切ることで複数のclass属性が指定できます。
  • 「#」と「.」を同時に使えます（その場合、順序は関係ありません）。
  • 要素名を省略すると、自動的にdiv要素とみなして補完します。
#zen-coding
div#zen-coding 
<div id="zen-coding"></div>
.zen_coding
div.zen_coding
<div class="zen_coding"></div>
p.one.two.three
<p class="one two three"></p>
div#id.one.two.three
div.one.two.three#id
<div id="id" class="one two three"></div>

E>E, E E

タグを親子関係（入れ子構造）にして出力します。

  • 本家Zen-Codingでは区切りに使えるのは「>」でしたが、本マクロでは利便性を考慮して半角スペース「 」も利用できます。
  • 入れ子構造の深さを考慮して、インデントが行なわれます（インデントの挙動は設定により変更できます）。
table tr td
table>tr>td
<table>
    <tr>
        <td></td>
    </tr>
</table>
ul.navigation li.item
ul.navigation>li.item

<ul class="navigation">
    <li class="item"></li>
</ul>

E+E

タグを兄弟関係に並べたものを出力します。

  • E+E+E+...といくつも続けることが可能です。
  • 兄弟関係にある最後の要素のみが子要素を持つことが出来ます。
h1+div h2+p+div h3+p.one+div.two
<h1></h1>
<div>
    <h2></h2>
    <p></p>
    <div>
        <h3></h3>
        <p class="one"></p>
        <div class="two"></div>
    </div>
</div>

E*N

「*」の直後に置かれた数字（1～99まで対応）のぶんだけ、それ以降のセレクタから生成されるタグを繰り返します。

  • 属性名に含まれる「$」を、現在の繰り返しの回数に書き換えます。
  • 「$$」と書けば、「$」に変換されます。ただし、より左側に「E*N」があれば、そのときに数値に変換されます。
p*2
<p></p>
<p></p>
ul#hoge li.item-$*3
<ul id="hoge">
    <li class="item-1"></li>
    <li class="item-2"></li>
    <li class="item-3"></li>
</ul>
div#section-$*3 div#subsection$$-$*2
<div id="section-1">
    <div id="subsection1-1"></div>
    <div id="subsection1-2"></div>
</div>
<div id="section-2">
    <div id="subsection2-1"></div>
    <div id="subsection2-2"></div>
</div>
<div id="section-3">
    <div id="subsection3-1"></div>
    <div id="subsection3-2"></div>
</div>

E:alias

一部のタグでは「:」のあとに特定の語句をつけることで、よく使われる属性やその値があらかじめ指定された状態で出力されます。

  • その語句が変換辞書に存在しない場合は、語句を無視して通常の変換のみを行います。
  • 詳しくは、本家にある利用可能な :alias の一覧か、マクロフォルダにある zencoding.ini ファイルをご覧ください。
a:mail
<a href="mailto:"></a>
meta:js
<meta http-equiv="Content-Script-Type" content="text/javascript" />
html:xs
<!DOCTYPE html PUBLIC "-W3CDTD XHTML 1.0 StrictEN" "http:www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    </head>
    <body></body>
</html>

E+

一部のタグでは末尾に「+」をつけることで、いくつかの子要素を持ったものが出力されます。

  • 変換前のセレクタの末尾が「+」で終わる場合、または( )でグループ化けしたときの( )内の末尾が「+」で終わる場合のみに有効です。
  • 「E+ E」は、「E+E」の兄弟関係として解釈されます。
ul+
<ul>
    <li></li>
</ul>
dl+
<dl>
    <dt></dt>
    <dd></dd>
</dl>

(groupA) + (groupB)

( )で囲った範囲をグループ化し、そのグループの後に「+」で兄弟要素を書くことで、グループの後に兄弟要素を続けることが出来ます。

  • ( )の内で( )を使うこともできます。
(#header h1 a)+(#content #main h2+p*3)+(#footer address)
<div id="header">
    <h1><a href=""></a></h1>
</div>
<div id="content">
    <div id="main">
        <h2></h2>
        <p></p>
        <p></p>
        <p></p>
    </div>
</div>
<div id="footer">
    <address></address>
</div>
p+(dl dt+dd)+p
<p></p>
<dl>
    <dt></dt>
    <dd></dd>
</dl>
<p></p>

(group)*N

( )で囲った直後に「*」と1～9の数字を書くことで、その数字の分だけグループを複製します。

dl>(dt+dd)*3
<dl>
    <dt></dt>
    <dd></dd>
    <dt></dt>
    <dd></dd>
    <dt></dt>
    <dd></dd>
</dl>

E[attr=value]

attr で指定した名前の属性に、value を値として持つ要素を生成します。

  • 属性は""で囲う必要がありません（囲んでも動きます）。
  • 複数の異なる属性を指定する場合は、E[attr1=value1][attr2=value2]などとします。
a[title=日本語も使えます]
<a href="" title="日本語も使えます"></a>
input:radio[checked]
<input type="radio" name="" value="" checked="checked" />
a[href=/image/$.jpg]*3 img.thumb[src=/image/thumb$$-$.jpg][width=80][height=80]*2
<a href="/image/1.jpg">
    <img src="/image/thumb1-1.jpg" alt="" width="80" height="80" class="thumb" />
    <img src="/image/thumb1-2.jpg" alt="" width="80" height="80" class="thumb" />
</a>
<a href="/image/2.jpg">
    <img src="/image/thumb2-1.jpg" alt="" width="80" height="80" class="thumb" />
    <img src="/image/thumb2-2.jpg" alt="" width="80" height="80" class="thumb" />
</a>
<a href="/image/3.jpg">
    <img src="/image/thumb3-1.jpg" alt="" width="80" height="80" class="thumb" />
    <img src="/image/thumb3-2.jpg" alt="" width="80" height="80" class="thumb" />
</a>

E!

要素の末尾または直後に、その要素が何であるかを示すコメントを自動で挿入します。行数が長くなりそうな要素に指定しておくと、見やすくなるかもしれません。

  • 設定ファイルを変更することで挿入先を末尾か、直後か、その両方を指定することができます。
div#example.section! ul li*3で直後に挿入する設定の場合
<div id="example" class="section">
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<!-- div#example.section END -->

E&

ソースに含まれる &、<、>、" の4文字を実態参照に変更した上で出力します。

div#hoge>p.class&
&lt;div id=&quot;hoge&quot;&gt;
    &lt;p class=&quot;class&quot;&gt;&lt;/p&gt;
&lt;/div&gt;

Wrapモード

Wrapモードでは、ダイアログに入力したセレクタから生成したHTMLによって、本文の範囲選択した部分を包みこみます。この際、次に示すようなセレクタの書き方で、包み方が変化します。

末尾が「*」で終わる場合

red(改行)green(改行)blueを選択中に、ダイアログul li a*と入力することで、
<ul>
    <li><a href="">red</a><a href="">green</a><a href="">blue</a></li>
</ul>

数字が続かない「*」を途中に含む場合

red(改行)green(改行)blueを選択中に、ダイアログにul li* aと入力することで、
<ul>
    <li><a href="">red</a></li>
    <li><a href="">green</a></li>
    <li><a href="">blue</a></li>
</ul>

それ以外の場合

red(改行)green(改行)blueを選択中に、ダイアログにul li aと入力することで、
<ul>
    <li>
        <a href="">
red
green
blue
</a>
    </li>
</ul>

HTML生成・Wrap以外の機能

本家 Zen-Coding にあって本マクロにない機能のいくつかは、以下に紹介する秀丸マクロを導入することで実現できると思います。

タグ間の移動やタグの範囲選択

タグの削除

補足事項

動作環境

  • 秀丸エディタの ver 7.00 以降で動作すると思います(ver 7.11 で動作確認しました)。

ライセンス

オリジナル版のライセンスである GPL ver3 (日本語訳) を継承しています。本マクロの利用者は以下のことが許可されています。

  1. プログラムの実行
  2. プログラムの動作を調べ、それを改変すること
  3. 複製物の再頒布
  4. プログラムを改良し、改良を公衆にリリースする権利

改変したバージョンを公に再配布するときには、上に示すGPL ver3の条項を明記してください。

mogami@exoego.net