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とかで聞いてみてください。

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

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

css3を触ってみて思った利点の3個目

この記事は、前回の記事（セレクタについて(2/4)その2 – css3を触ってみて思った4個の利点）の続きです。

1. レイアウト組むのが楽ちん
2. セレクタが便利
3. 画像に頼らず色々出来る
4. アニメーションが素敵

今回はCSS3を用いて、画像を使わないでリッチな表現にしてみます。
ちなみにこのページ自体も、デザインに大しては画像を使っていません。
アイコンはさすがに画像ですが…
※表示確認は、Firefox3.6、Chrome4、Safari4、Opera10で行っています。
このエントリーでは画像を使わないリッチな表現を表現する方法を紹介していきます。

詳細は続きから。

まずはじめに

これから記述する書き方は、有名どころのブラウザに適用する書き方をしています。
本来なら1行ですが、CSS3はまだ正式には勧告されていないので、各ブラウザでの独自実装という形になっているため、サンプルでは複数行記述されています。

• 「-moz-」が含まれるものはMozilla(Firefox)に対しての記述
• 「-webkit-」が含まれるものはWebkit(Safari,Chrome)に対しての記述
• 「filter」が含まれるものはIEに対しての記述
  →他のものと記述方法がかなり異なるので注意

これらを踏まえて見てもらえると良いかと思います。

説明は次ページから。