WebDesign MemoとあるWebDesignerの気になるあれこれ。

twitterで「知らない人は損してる？コーディングが3倍速くなるZen-Codingを導入してみた」という記事のつぶやきがあったので試してみた。

記事では、Apatana Studioを使用していたのですが、Dreamweaver版もあるようなので、それを試しにインストールしてみた。
そのメモです。

Zen-Codingのダウンロード

まず、Zen-Codingをダウンロードします。
http://code.google.com/p/zen-coding/downloads/list

ちなみに、Zen-Codingは、スタンドアローンのソフトではなく、プラグインという形で提供さています。
Apatana Studio、DreamWeaverの他に、数種類のエディターに対応しているようです。

現時点で、Zen Coding for Dreamweaver v0.6が最新版のようですが、CS3では動かないようなので、Zen Coding for Dreamweaver v0.5をインストールしてみました。
Zen Coding for Dreamweaver v0.5のダウンロードは、下記のページから検索でプルダウンをAll downloadsにして、キーワードを入力せず検索すれば、すべてのバージョンが一覧で表示されるので、ここから、Zen Coding for Dreamweaver v0.5を選んで、ダウンロードします。
http://code.google.com/p/zen-coding/downloads/list

Zen Coding for Dreamweaver v0.5をダウンロードします。
Zen Coding.mxpというファイルがダウンロードされます。

Zen-Codingのインストール

次に、Adobe Extension Managerの中にある「Extension Manager.app」を起動します。
アプリケーションの中に「Adobe Extension Manager」というフォルダの中に「Extension Manager.app」があるので、これを起動します。

プルダウンメニューから使用製品の「DreamweaverCS3」を選択してます。

そして、インストールボタンをクリックし、先ほど解凍した「Zen.Coding-Dreamweaver.v0.5」フォルダの中の「Zen Coding v.0.5.mxp」を選択してインストルします。

インストールは、これで完了です。

Zen-Codingの使い方

Zen.Codingの簡単な使い方を説明します。

Dreamweaverを起動します。

新規ページを作ります。

bodyタグの中に、下記のように入力します。

div#container

そして、カーソルをcontainerの語尾に置いて、「control」+「,(コンマ)」すれば、下記のようなタグが展開されます。
<div id=”container”></div>

また、
div#header>ul#menu>li*10>a
と入力して、「control」+「,(コロン)」すれば、
<div id=”header”>
<ul id=”menu”>
<li><a href=”"></a></li>
<li><a href=”"></a></li>
<li><a href=”"></a></li>
<li><a href=”"></a></li>
<li><a href=”"></a></li>
<li><a href=”"></a></li>
<li><a href=”"></a></li>
<li><a href=”"></a></li>
<li><a href=”"></a></li>
<li><a href=”"></a></li>
</ul>
</div>
このように展開してくれます。

おお！これは便利！

基本的な入力形式は、展開されたタグを見れば分かるように、>でつないで行きます。
idがheaderというdivタグの中に、idがmenuというulタグがあり、その中に10個のliタグがある。また10個のliタグには、それぞれaタグが入っている。
という感じです。

その他にも、便利な入力形式があるようです。
下記のページにいろいろ載っています。
http://code.google.com/p/zen-coding/wiki/ZenHTMLSelectorsEn

これは、マジで便利かも。

ホントに便利なのですが、これは自宅のCS3の環境では、ちゃんと動くのですが、職場のCS3の環境だと動いてくれない。。。
なんでだろう？？？

便利なので、ぜひ、職場でZen-Codingを使いたいんですけどぉぉぉぉぉ。。。。

Adobe Dreamweaver CS4 (V10.0) 日本語版 Macintosh版

速習Webデザイン Dreamweaver CS4 (速習デザイン)

Dreamweaverレッスンブック―Dreamweaver CS4/CS3/8対応

Dreamweaver逆引きデザイン事典[CS4/CS3/8対応]

こちらのエントリもあわせてどうぞ。

• DreamweaverCS3でZen-Coding!!
• TextWranglerにZen-Codingを入れてみた。
• ブログパーツ「popIn Rainbow」を入れてみた。
• 人気記事ランキングを表示するWordPressのプラグイン「WP-PostViews」を入れてみた。
• wibiya toolbarを入れてみた。
• Facebookの「いいね！」ボタンを設置してみました。
• 今日のつぶやき【2010-04-04】
• Google版いいねボタンの +1 ボタンを設置してみました。
• 複数の記事のカテゴリをまとめて変更できるプラグイン「Batch Categories」
• HootSuiteで公式RTとコメント付きRTを切り替えれる便利なGreaceMonkeyのスクリプトを入れてみた。