2010-01-12
コーディングの効率化を図るZen codingをDreamweaver cs4に入れる方法
開始タグを書いて、クラスを書いて、閉じタグを書いて…。
もっと効率化出来ないものかと思いますよね。
まだあまり記事を見かけない気がしますが、
劇的に私の作業効率を上げてくれたのでご紹介。
（ダウンロード等は、各自の責任でお願いしますねー。）
■Zen codingとは
↓公式（おそらく）
http://code.google.com/p/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が起動し、
プラグインとして読み込まれる。
Application Support/Adobe/Dreamweaver CS4
を削除すると復旧出来る。
以上で最低限の準備は完了。
【3】
div#main
control+,（カンマ）
をおすとコードが展開する。
http://code.google.com/p/zen-coding/wiki/ZenHTMLElementsEn
http://code.google.com/p/zen-coding/wiki/ZenHTMLSelectorsEn
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',
を編集するとデフォルト値を変更可能。
（再起動不要）
- 26 http://twitter.com/
- 21 http://www.google.co.jp/search?hl=ja&client=firefox-a&rls=org.mozilla:ja-JP-mac:official&hs=pIw&q=IE+チェック+mac&btnG=検索&lr=lang_ja&aq=f&oq=
- 20 http://twitter.com/makincho
- 14 http://b.hatena.ne.jp/entry/d.hatena.ne.jp/makiko9680/20100112/1263295560
- 11 http://reader.livedoor.com/reader/
- 7 http://longurl.org
- 6 http://ow.ly/12Osm
- 6 http://www.google.com/search?num=100&hl=ja&ie=UTF-8&oe=UTF-8&q=dreameweaver+cs4&filter=0
- 5 http://d.hatena.ne.jp
- 5 http://www.google.co.jp/search?hl=ja&safe=off&client=firefox-a&rlz=1R1GGGL_ja___JP325&hs=D7&tbo=p&num=30&newwindow=1&tbs=qdr:y15&q=Zen-Coding+Dreamweaver&btnG=検索&lr=lang_ja&aq=f&oq=
対応って書いてあったのに。。orz
コメントありがとうございます。
Windows対応なのにおかしいですねー。
自宅がwindows環境なので、暇を見つけて試してみます。
何か分かったらまた報告しますね。
こちらで記事を見てzen-conding入れました。
windowsでもインストールできましたよ！
http://forums.adobe.com/thread/417467
こちらのように、エラーがでるようですので、ファイルの削除等が必要になる場合があるようですね。
有意義な情報ありがとうございます！
実はまだwinには入れられてないので
解決のコメント頂いて大変助かりましたｗ
zen-coding熱上がってきてる感じがしますねー。
MovableType用のプラグインまで開発されちゃってるみたいです。
http://twitter.com/tinybeans/status/9177136053
キーボードショートカットをカスタマイズして
おりましたの、Menus.xml を削除したらインストールできました！
再びコメントありがとうございます。
キーボードショートカットとかち合っちゃうとややこしそうですね。
今日もリファレンスを見ながらzen codingを楽しみました。
bd+
↓
border:1px solid #000;
とか便利ですねー。