Zen Coding for DreamWeaverをちょっと改造して便利にする方法
公開日 2012年02月18日
今回はWeb、コーディングの記事を書きたいと思います。
時にコーディング速度を飛躍的にアップさせるであろう「Zen Coding」ですが、
インストールの方法と、これを少しカスタムし、より使いやすくした方法をご紹介します。
参考サイト (参考というより流用です、地頭力のある人に感謝。)
実際に行なった環境
- Zen Coding v.0.7.2.mxp および Zen Coding v.0.7.5.mxp
- DreamWeaver CS5 および CS5.5
- Windows XP および Windows 7
完全に最初から最後まで自分一人で行なう場合には良いですが、
複数の人が制作や開発に携わる案件では、自分の作ったデザインやソースコードファイルを、
次に引き継いだ(見た)人が スムースに理解できるようにしておく必要があります。
そのため、今回はzen coding for Dreamweaver で、xhtmlのdivのclosedタグに、展開と同時にコメントをつけ、Dreamweaver でタグ内の選択も容易にするための方法を紹介します。
Zen Coding for DreamWeaverをダウンロード
こちらのサイトからダウンロードできます。GPL LICENSEです。
DreamWeaver CS5(CS5.5)にインストール
mxpファイルをダブルクリックするだけです。
Adobeエクステンションマネージャーが起動し、簡単にDreamWeaver CS5(CS5.5)にインストール
できます。※画面はCS5、version 0.7.2になっています。
html.jsファイルを編集するため、ファイルを探す
インストールしたら、編集するhtml.jsファイルを探します。
Windows XPの場合(CS5)
C:\Documents and Settings\ユーザー名\Application Data\Adobe\Dreamweaver CS5\ja_JP\Configuration\commands\ZenCoding\filters
Windows 7の場合(CS5.5)
C:¥Users\ユーザー名¥AppData¥Roaming¥Adobe¥Dreamweaver CS5.5¥ja_JP¥Configuration¥Commands¥ZenCoding¥filters
それぞれ、上記の場所にファイルがあるハズです。
念のため、修正前にバックアップをとっておいた方が良いでしょう。
html.jsを編集する
version 0.7.5 であれば 122行目あたりを下記画像のように編集します。
divタグの時のみ、closed(閉じる)タグの直前にコメントを入れ、何のClass or IDが付いたタグの
閉じタグなのかがわかりやすくなります。
デフォルトではhtml.jsは下記の状態
下記のように編集します。
上記のように変更して保存します。DreamWeaverが起動済みであれば再起動します。
下記のように、divタグがコメント付きで展開できるようになりました！
Zen Codingによるhtmlやcssの高速コーディングに関する詳しい情報は他に譲るとしまして...
なぜclosed(閉じ)タグの前側にコメントをいれる？
「なぜclosed(閉じ)タグの前にコメントをいれるの？」という点ですが、
DreamWeaverには下記のように「親タグを選択」という機能があります。
もしこのタグのclosed(閉じ)タグがすぐに見つからなくても。。。
これを使うと当該タグの内包している部分をすべて選択してくれるのですが、
コメントが外側にあると、そこは選択されませんので、そのままコピペや折りたたみができません。
このひと手間の軽減のために、閉じタグの内側に設置しました。
GPL LICENSEなので公開
変更した部分は見た通りの、そこまで難しくはないjavascriptで、if文が解ればdivに限らず自分好みに自由にカスタマイズできますのでチームや会社のやり方にあったカスタマイズをすれば
よいかと思います。
※Version違い等にご注意下さい！
いかなる不具合が発生したとしても自己責任でお願い致します。
下記サイトを参考にさせて頂きました！ というか流用です、地頭力のある人に感謝。
Skywordデザイン- Zen Coding for Dreamweaverでdiv要素の終了タグにコメントを自動追加
やっていることはほぼ同じですが、上記はコメントがclosedタグの直後に入ります。
Web制作に限らず開発の生産性アップ・効率化は、このような現場での小さな改善の積み重ねと
小さな無駄の削減、そしてメンバーへの気遣い(関わる人・相手の立場で考えてみる)で
実現されていくケースもあるのだと思います。
...と、何故か最後に大きなテーマで締めくくってみました。
(2)
- ハカセさん ━ 2013年06月14日 10:56
ありがとうございます。非常に便利になりました。
＞小さな無駄の削減、そしてメンバーへの気遣い(関わる人・相手の立場で考えてみる)で
＞実現されていくケースもあるのだと思います。
自分も提供出来る側になれるように頑張ります。- Jun'ya Hiranoさん ━ 2013年06月15日 9:48
>ハカセさん
コメントありがとうございます！
ぜひぜひリーディングパーソンへの道を邁進して下さい。
この記事を論及・引用、関連記事にして頂けたらありがたき幸せ。
- トラックバック用URL(承認制：nofollow無し)
【次の記事】無料メルマガacmailerのさくらサーバへの設置方法 慣れれば15分!
【前の記事】ポーターの3つの基本戦略
