コーディングの効率化を図る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',

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

(再起動不要)

Comments: 5

  1. ピット says:

    Windowsでは拡張機能がインスールできませんでした。
    対応って書いてあったのに。。orz

  2. こんにちは。
    こちらで記事を見てzen-conding入れました。
    windowsでもインストールできましたよ!

    http://forums.adobe.com/thread/417467

    こちらのように、エラーがでるようですので、ファイルの削除等が必要になる場合があるようですね。

  3. ピット says:

    情報のご提供ありがとうざいます!
    キーボードショートカットをカスタマイズして
    おりましたの、Menus.xml を削除したらインストールできました!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です