これは超便利！ Emmet/ZenCoding - サクラエディタ用HTML作成補助ツール

前回指定したサクラエディタを超便利にするツール(マクロ)を発見しました。

サクラエディタ用HTML作成補助ツールで HTML/CSS タグ入力の省力化ができる Emmet(旧: Zen Coding )を実現できるマクロです。

サクラエディタへの組み込み方法

マクロコード(Zen.Coding-SakuraEditor.v0.1.1.zip)の入手

Zen.Coding-SakuraEditor.v0.1.1.zip は MoonWing さんによってZen Codingをサクラエディタで行えるように一部機能をマクロ移植したものです。

以下のサイトで入手できます。

Zen.Coding-SakuraEditor.v0.1.1.zip をダウンロードしてください。

そしてダウンロードしたファイルを任意のフォルダに解凍して ZenCoding.js をサクラエディタのマクロフォルダにコピーしてください。

あとは、「マクロの登録」と「キー割り当て」をすれば組み込みはお終い。

「マクロの登録」はツールバーから

「設定(O)」→「共通設定」→「マクロ」タブにて設定します。

実際の詳細はサクラエディタのヘルプを参照してください。

「キー割り当て」はツールバーから

「設定(O)」→「共通設定」→「キー割り当て」タブにて設定します。

実際の詳細はサクラエディタのヘルプを参照してください。

実際のキー割り当ては Alt+z とかお好きなキーでいいと思います。

使い方

Emmet語を入力し、直後に割り当てキーを押します。

するとEmmet語から HTML, CSS に変換されます。

デフォルト動作はHTMLモードです。

CSSファイルで実行するとCSSモードになります。

とても簡単に効率化が図れます。

使用例

<div class="class_test"></div>

<div id="id_test"></div>

<table>
    <tr>
        <td></td>
    </tr>
</table>

<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

<ol>
    <li></li>
    <li></li>
    <li></li>
</ol>

HTML特殊文字変換もできます！

<br />

<style type="text/css"></style>

<script type="text/javascript"></script>

とても便利ですよね。

他にもいろいろできるようですが、私にもよくわかっておりません。＼(_ _)

ZEN-CODINGのカスタマイズ

ZEN-CODING標準でも省力化は図れるのですが、特に良く入力する文字などは、自分用の設定を追加した方が効率的です。

「ZenCoding.js」ファイルを開きます。

CSS の場合、CSSモード記載場所('css'の'snippets'の箇所：70行目付近)

HTML の場合、HTMLモード記載場所('html'の'snippets'の箇所：550行目付近)

その他の場合、('abbreviations'[略語]の箇所：600行目付近)

に下記構文で追加します。

'入力文字' : '変換文字',

※ 最後の","を忘れないようにしてください。

上記の'変換文字'の部分には特殊な変数も指定できます。

'|' : 文字列変換後にカーソルを移動する位置を指定

'+' : ''で囲まれた文字列を結合する

'${newline}' : 改行文字を挿入する

'${indentation}' : タブ文字を挿入する

'${child}' : 子要素を挿入する