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/

全角カタカナ→半角カタカナ変換(DreamweaverCS4)

ケータイサイトの制作で、半角カタカナを使う機会が増えてきたので、変換できるエディターを調べてみたのですが、Dreamweaverでも出来るんですね。

Adobe Dreamweaver 10周年セミナー:全角・半角変換拡張機能
このページのzipファイルを解凍すると拡張子がmxpと言うファイルがあります。実行するとAdobe Extension Managerが立ち上がるのでウィザードに従ってインストールすればOKです。ただCS3用のようなので、CS4ではコマンド→その他の中に「機種依存・全角半角の変換」メニューが追加されます。
DreamweaverCS4-変換メニューSS

フリーソフトで出来ないかなと調べてみたんですが、使う機会が無く知らなかっただけで幾つもありますね。いくらでも出てくるので途中でやめてしまったのですが、メジャーどころ?などなどを載せておきます。

Terapad
シンプルでよいです。
TeraPad-変換メニューSS

MKEditor
全角・半角指定変換で細かくどれを変換するのか指定可能です。
MKEditor-変換メニューSS

UnEditor
とても多機能です。
UnEditor-変換メニューSS

TepaEditor
半角を選ぶと平仮名も半角カタカナになりますが、文字種別整形で細かく設定できます。
このソフトLUNARRの方が作ってるようです。LUNARRは6月いっぱいで解散するようですね。倒産とかそうゆう事じゃないみたいだけど、チョト気になりました。
TepaEditor-変換メニューSS

Crescent Eveに変換機能付けてくれないかな^^;

Dreamweaver CS4へのアップグレード

アップグレードの対象商品の詳細には、GoLive5.0と6.0は†のマークが付いてて注意書きがある。手持ちのソフトはGoLive5.0なので、ストアコールセンターに問い合わせてみました。

Adobe GoLive 9、CS2、CS、6.0、5.0からDreamweaver CS4へのアップグレードは、アップグレード版ではなく特別提供版を購入してください。インストール時にお手持ちの製品を選択するのですが、5.0と6.0は選択肢が無いので、電話して頂き他の方法でインストール出来ます。

こんな感じの説明でした。他の方法とは言ってなかったのですが、とりあえず問題ないってことですね。

CS4明日発売です。CS3をご希望の方は本日までですよ~と言ってました。

Dreamweaver CS4へのアップグレード詳細ページ

Dreamweaver CS4

Dreamweaver CS4の30日間無償体験版をインストールしてみた。

よい!!

とりあえず軽くなった事と、CSSがHTMLファイルとリンクされている場合、あえてCSSファイルを開かなくても直接編集出来るようになったので、タグ打ち支援を使って手打ちする分にはかなり画面を広く使える!そうでなくても広く使えるように配慮されてる感じです。

少し触った感じでは、デザイナー2で必要十分かなって感じです。

Adobe Dreamweaver CS4