コーディングの効率化を図るZen codingをDreamweaver cs4に入れる方法

開始タグを書いて、クラスを書いて、閉じタグを書いて…。

毎度毎度htmlコードやcssを書いていると、

もっと効率化出来ないものかと思いますよね。

まだあまり記事を見かけない気がしますが、

ロシアからやってきたZen codingが、

劇的に私の作業効率を上げてくれたのでご紹介。

（ダウンロード等は、各自の責任でお願いしますねー。）

■Zen codingとは

↓公式（おそらく）

http://code.google.com/p/zen-coding/

Zen codingはテキストエディタの拡張機能。

適用すると、少ない文字入力で面倒なコーディングを自動で行ってくれます。

デモ映像を見てちょっと感動しました。

Zen Coding v0.5 from Sergey Chikuyonok on Vimeo.

サポートされているエディタは、

• Full support：Coda、Espresso、TextMateなど
• artial support (“Expand Abbreviation” only)：Dreamweaver CS4, Windows, Macなど

（詳細は公式サイトで。）

■Zen codingをDreamweaver cs4で使う場合

※今回はmac（snow leopard）に入れています。

【1】

http://code.google.com/p/zen-coding/downloads/detail?name=Zen%20Coding.mxp&can=2&q=dreamweaver

からdreamweaver用のプラグインをダウンロード。

【2】

ダウンロードしたファイルを実行する。

ADOBE EXTENSION MANAGER CS4が起動し、

プラグインとして読み込まれる。

※このときにDWのメニューが文字化けした場合、

Application Support/Adobe/Dreamweaver CS4

を削除すると復旧出来る。

以上で最低限の準備は完了。

【3】

試しに入力してみましょう。DWでhtmlファイルを開き、

div#main

など、Zen-coding独自の記法にて記述する。その後

control+,（カンマ）

をおすとコードが展開する。

Zen codingの記法は下記をご参照下さい。

• Zen HTML Elements

http://code.google.com/p/zen-coding/wiki/ZenHTMLElementsEn

• Zen HTML Selectors

http://code.google.com/p/zen-coding/wiki/ZenHTMLSelectorsEn

• Zen CSS properties

http://code.google.com/p/zen-coding/wiki/ZenCSSPropertiesEn

■☆より便利に使う為に。

doctype宣言のデフォルト設定がenなどになっているため、

自分好みに変更しておくと便利です。

ユーザ名／ライブラリ／Application

Support／Adobe／DreamweaverCS4／ja_JP／Configuration／Commands／ZenCoding／zen_settings.js

11行目～の

'variables': {
'lang': 'en',
'locale': 'en-US',
'charset': 'UTF-8',
'profile': 'xhtml',

を編集するとデフォルト値を変更可能。

（再起動不要）