Dreamweaverでzen codingを使ってみた。

dreamweaver + zen coding

先日、@seltzerさんのUSTREAMを見てからすっかり zen coding に取り憑かれたボク。あ、もちろんPHP入門も素晴らしかったです(次回も楽しみにしています)

残念ながらMacユーザーじゃないので、Codaとか使えないわけですが、Windows環境でもDreamweaver CS4で使えるって事で入れてみました(他にも幾つか対応しているエディタはあります)

このページからZen Coding for Dreamweaver v0.5というバージョンのZen Coding.mxpを拾ってきて実行。そうするとEXTENSION MANAGER CS4が立ち上がるので、画面に従いインストールするだけで完了です。

早速幾つか入力。
DWは新規でhtmlやphpを作ると、設定されているドキュメントタイプのタグが入った状態になりますが、HTML5は設定が無い(どこかでEXTENSIONがあった気もする)ので

html:5

と入力してCtrl+カンマで展開するとさっと以下のようなタグが!!

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<title></title>
	<meta charset="UTF-8">
</head>
<body>
	
</body>
</html>

さらにこんな感じで入力して展開すると

div#header>ul.menu>li.name$*3
<div id="header">
  <ul class="menu">
    <li class="name1"></li>
    <li class="name2"></li>
    <li class="name3"></li>
  </ul>
</div>

どーん!素晴らしー!

独自の書き方は覚えなければいけないものの、直感的に分かる気がするのでなんとかなりそう。ただCSSに関しては標準の入力補完で十分かなって思いますね。

wikiっていうタブの中にタグの書き方が載ってます。
HTMLセレクタはこれ

あとlang属性がen-USが標準になっているので、以下のjsファイルの設定値を修正すればOKです。このファイルの中身を眺めてみると、展開する内容の修正も出来そうなので、head内でよく使うタグなんかは追加しておいてもいいかも。

Documents and Settings/ユーザー名/Application Data/Adobe/Dreamweaver CS4/ja_JP/Configuration/Commands/ZenCoding/zen_settings.js

WordPressであればプラグインもこちらにあります。
WP Zen-Coding

やっぱりMacを買おうかな~

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