kzms2 – html,css,javascript

Dreamweaver Town Meeting in Tokyoって？

2010年5月29日、ベルサール新宿で行われたDreamweaverのパワーユーザー向けのイベントです。
Dreamweaverをこう使うと便利ですよ！とか基本的なところから応用まで色々とお話がありました。

自分はこのイベントの7分間セッションの大喜利に出演してきました。

当日の様子はTogetter – まとめ「Dreamweaver Town Meeting in Tokyo」にまとめてあるようです。

詳細は続きから。

自分のセッションについて

自分は「Dreamweaver x Zen-coding」というセッションを行いました。
7分間に収めるというのが本当に大変でした。。。

有料イベントということでスライドや動画はまだ公開されていません。

概要とか

Zen-codingはDreamweaverの拡張機能としてインストールする事ができます。（厳密に言うとZen-coding自体は色んなエディターに対応しています）
少ない記述でたくさんの量のコードを書くことができ、コードタイピングを早くしてくれます。

導入手順

基本的にはCS4から動かすことができます。が手順3以降をこなすことでDreamweaver8でも動かせます（一部動きませんがだいたい動きます）。

1. 公式のダウンロードページからZen.Coding-Dreamweaver.v0.6.zipをダウンロード、解凍します。
2. Zen Coding v.0.6.mxpをダブルクリックして拡張機能としてインストールします。
3. 「Issue 121 – zen-coding – Not working in Dreamweaver CS3 – Project Hosting on Google Code」からzen_editor.jsをダウンロードしてきます。
4. zen_editor.jsを上書きします。場所はOSやDreamweaverのバージョンによって異なるので注意してください。
   

   Windows	C:\Users\<username>\AppData\Roaming\Adobe\Dreamweaver 9\Configuration\Commands\ZenCoding
   Mac	/Users/<username>/Library/Application Support/Adobe/Dreamweaver 9/ja_JP/Configuration/Commands/ZenCoding

Zen-codingの使い方の詳細

別のエントリーで「マークアップ効率化 – zen-codingでコーディングを倍速に (Yahoo! JAPAN Tech Blog)」を書いていますのでそちらを見ればだいたい分かるかと思います。

セッションで言えなかったこと

いっぱいありすぎて困るので別途エントリーを書きたいと思います。
取り急ぎ気になったのが、以下の様なTweetです。

#dwtokyo izuizuさんがいい事言った。「Zen-codingは、箱から作る。デザインビューは原稿ありき。物により使い分けるとよい。」 (via @crema)

確かにZen-codingは箱から作ることに一番秀でています。
が実務でも使うのですが原稿ありきの書き方があります。これ簡単には伝えられないのですが動画を撮ってみたのでそれを見てもらうのが早いと思います。

Ctrl+hを使って書く方法です。
値に連番を振りながら原稿ありきの書き方をできるという寸法です。
書き方はアスタリスクの書き方の応用で、数値抜きのアスタリスクを記述することで実現できます。

詳しくはまた別の機会に何かで説明できたらうれしいですね。

まとめとか

基本的に入れておいて損はない拡張機能だと思います。
ショートカットキーだけでも使う価値があるのではないでしょうか。
足らない部分はDreamweaverの機能を使えばどうとでもできてしまいます。

難しそうだとか怖がらずに入れてみて、とにかく触ってみてください！
うまいこと扱えると本当に早くマークアップできるようになると思います！

何か気になることなどあればTwitterとかで聞いてみてください。

会場にいらっしゃった皆様、また出演された皆様、運営陣の方々
本当にありがとうございました。

また是非こういった機会を頂けたら嬉しいです！