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に変換機能付けてくれないかな^^;

Adobe Creative Suite 4

とうとうCS4が正式に発表になりましたね~~~
この日のために売らずにとってあったGolive5.0。恐る恐るDreamweaverCS4のアップグレード対象を確認してみると、載っていました!CreativeSuiteの統合環境はとても手が出ないけど、DWくらいなら何とかなる!さて、いつ買うか~何処で買うか~

リンク先はフルフラッシュで音が鳴ります。
Adobe 最高傑作へのショートカット