2008-07-10

Dreamweaver の作業効率を上げるためのメモ

Dreamweaver の機能の1つとして、コードヒントいうものがあります。
これはコードの編集画面で「<」を打ったら、次に続くタグの候補を出してくれるもの。
タグを全部打つ必要がなくなるので、メモ帳などのソフトに比べ格段に作業スピードが上がります。

ただ、デフォルトの設定じゃ物足りない

こんなこと書いたら怒られるかもしれませんが、今まで1回も使ったことないようなセレクタやプロパティが出てきても意味ないので、使わないものは表示して欲しくないんです。

この機能の設定を変更するのが、「CodeHints.xml」。
プログラムファイルから Dreamweaver があるディレクトリにいくと、/Configuration/CodeHints というディレクトリがあり、その中に CodeHints.xml があります。

参考にさせてもらったのは、widowsプロパティの誤入力を防ぐCodeHints.xml|カラクリエイト。

記事の中にある「windows」プロパティもさることながら、僕としては「direction」や「inherit」もイライラさせられるものです。
そういったイライラから解放してくれて、作業スピードをより早くするためのすばらしい改造です!感謝!

カラクリエイトさんの記事のコメント欄で akira さんという方が、CodeHints.xml をさらに改造してました。
この方は、CSS の編集中に半角スペースを入れると「!important」が、数値を入れたときには「px」、「em」、「%」が候補に出るようにしてあるそうです。

自分の好みの形に改造するのは結構大変な作業ですが、思った以上に作業効率が上がるので間違いなくお勧めです!
ただ、「うっかり」に備えて、オリジナルのバックアップはとっておきましょう

さらにスピードアップするには

コードヒントをカスタマイズすることで作業スピードは結構速くなると思います。
それでももっと作業スピードを速くしたいときに活用したいのが、スニペットとショートカットキーの登録。

元同僚の方に教えてもらうまで、スニペットがある必要性を全く感じていませんでしたが、1回使うとすごく便利!

例えば、clearfix みたいにいちいち全部覚えていられないようなものを、新規スニペットの追加からスニペットに登録します。

:after {
  height: 0;
  visibility: hidden;
  content: ".";
  display: block;
  clear: both;
}

次に登録したコードを右クリックして「キーボードショートカットの編集」を選ぶと、ショートカットキーを登録できます。
あとは実際に clearfix を使いたい場所で割り当てたショートカットを押せば、clearfix が挿入されるわけです。

僕が登録しているショートカットは、「clearfix」と「span」の2つくらいです。span が何気に便利だったりします。
ちなみに、clearfix には「Ctrl+Shift+F」、spanには「Ctrl+Shift+Alt+S」をショートカットとして割り当ててます。

他にも効率をあげる方法があれば教えてください!