攻略! ツール・ド・プログラミング(20) Zen-Codingをカスタマイズしてさらにコーディング効率を上げる

Zen-Codingのその他の機能

前回はHTMLやCSSのコーディングを助ける「Zen-Coding」について、そのコード展開の機能を中心に紹介した。しかしZen-Codingに用意されて機能はそれだけではない。Notepad++の場合、コード展開以外に次のような機能がサポートされている。

ショートカットキー	機能
Ctrl + Shift + A	選択範囲を指定のタグで囲む
Ctrl + Shift + D	カーソルのある位置を囲む開始タグから終了タグまでを選択する
Ctrl + Alt + ]	次の編集位置(属性の値など)にカーソルを移動する
Ctrl + Alt + [	前の編集位置にカーソルを移動する
Ctrl + Alt + L	カーソルのある位置のタグと対になっているタグに移動する(開始タグ< - 終了タグ>)
Ctrl + Alt + M	複数行にまたがっているタグ(ネストされたタグ)を1行にまとめる
Alt + /	カーソルのある行をコメントアウトする
Ctrl + '	終了タグの省略/非省略を切り替える(<img/>を<img></img>にするなど)
Ctrl + Al + t'	カーソルのある位置のタグを、要素や子タグごと削除する

たとえば「Ctrl + Shift + A」の例だが、図1のように任意の範囲を選択した状態でキーボードから[Ctrl]+[Shift]+Aを入力すると、図2のようなダイアログが表示される。ここで任意のタグ名(この例では「div」)を入力して[Enter]キーを押せば、図3のように入力されたタグで選択範囲が囲まれるという具合である。

図1 任意の範囲を選択してから[Ctrl]+[Shift]+Aを入力すると...

図2 ダイアログが表示されるので、任意のタグを入力すると...

図3 図1で選択した範囲が図2で指定したタグで囲まれる

ただし、環境によってはショートカットキーが他の機能に割り当てられているなどの理由で動作しないこともある。その場合は[Zen Coding]メニューから選択することで同じ機能を利用できる。

Notepad++のZen-Codingをカスタマイズする

Zen-Codingはエディタのプラグイン機能やマクロ機能を利用して作られているため、スクリプトを書き換えることで自分なりのカスタマイズを行うことができる。たとえば展開されるコードの内容を動作を変更したり、新しい略語やスニペットを追加したりといったことが可能だ。

カスタマイズのために変更するファイルはエディタごとに異なるものの、JavaScriptなどが使われているケースが多いため、基本的なプログラムのコードを読める人であれば大筋は感覚的に理解できるだろう。ここではNotepad++を例に挙げる。Notepad++の場合、プラグインはインストールフォルダ(デフォルトではC:\Program Files\Notepad++)にあるpluginsフォルダ以下に納められている。Zen-Codingに関連するのはNppScripting.dllとNppScriptingフォルダであり、この後者の方にスクリプトを含む各種ファイルが含まれている。

このうち、カスタマイズのために変更するのは「start.js」というファイル。拡張子からもわかるようにこれはJavaScriptのコードであり、Zen-Codingの機能を実装している。このうち、245行目付近にある「var zen-settings = {」あたりから先が、タグの展開などの動作を決めている部分である。

Zen-Codingのデフォルトの動作はhtmlタグのlang属性などが英語を想定したものになっているので、まずはこれを日本語用に変更してみよう。この設定はすぐ下の「'variables': {」の部分であたりで行われている。たとえば言語属性を日本語に、ロケールを「ja_JP」にするのは、この部分を以下のように変更すればよい。

リスト1

'variables': {
    'lang': 'ja',
    'locale': 'ja_JP',
    'charset': 'UTF-8',
    'profile': 'xhtml',

    /** Inner element indentation */
    'indentation': '\t'     // TODO take from Aptana settings
},

変更したら、Notepad++を再起動する。これで「html:4t」などを展開した場合に、次のようにhtmlタグのlang属性が「ja」になるように変わっているはずだ。同様に、charsetを変更すれば文字コードの指定も変えられる。

リスト2

<html lang="ja">

スニペットの展開結果そのものを変更したい場合には、740行目付近にある「'snipets': {」から先のあたりのコードを修正する。ここには、スニペットのための略語と、その展開結果がセットで記述されているのがわかると思う。たとえば「html:4t」の場合は次のようになっている。

リスト3

'html:4t': '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">\n' +
        '<html lang="${lang}">\n' +
        '<head>\n' +
        '   <meta http-equiv="Content-Type" content="text/html;charset=${charset}">\n' +
        '   <title></title>\n' +
        '</head>\n' +
        '<body>\n\t${child}|\n</body>\n' +
        '</html>',

これを修正するか、または同じような略語と展開結果のセットを追加すれば、独自のスニペットを使うことができるようになる。

個々のタグの展開については800行目付近にある「'abbreviations': {」以降の部分で設定されている。これもタグの略語と展開結果のセットである。たとえばここに次のように「a:target」という略語を追加してみる。

リスト4

'a:mail': '<a href="mailto:|"></a>',
'a:target': '<a href="" target=""></a>',
'abbr': '<abbr title=""></abbr>',

すると、「a:target」は「<a href="" target=""><>」というタグに展開されるようになる。

少し応用的な使い方としては、展開結果として略語を指定する方法もある。これは910行目あたりのコードを見るとよくわかるだろう。

リスト5

'ul+': 'ul>li',

となっているのは、『「ul+」の展開結果として「ul>li」を展開した結果を適用する』という意味なので、結果は次のようになるわけだ。

リスト6

<ul>
    <li></li>
</ul>

CSSについても同様に、略語と展開結果のセットを考えればよい。CSSの設定は260行目付近の「'css': {」から先の部分に記載されている。

このようにしてZen-Codingを自分の用途に合った形にカスタマイズしてしまえば、コーディングの効率をさらに向上させることができるだろう。デフォルトではHTMLのタグが登録されているが、自分でカスタマイズすることでXML文書の作成にも利用することができる。実際、筆者はこの原稿の元ファイルをXML形式で記述しているのだが、その際にZen-Codingを活用してタグ入力の手間をできるだけ省いている。次回はAptana StudioやEclipseでZen-Codingを利用する方法を紹介する。