レポート「Adobe Dreamweaer CS3 10周年記念イベント」

まず基調講演では、生みの親 Kevin Lynch による開発秘話の映像が流れた。
彼らが開発にあたって貫いた志は「ユーザーのコードを尊重する」こと。
ソフトウェアが勝手に書き換えたりせず、ユーザーの意図を120%反映するようなソフトにするべきだと。
どうしたらそれが実現できるかを「19 Dreamds」という目標に集約し、いまでもその目標の実現に情熱を注いでいる。
開発メンバーが10年前を振りかえながら、熱い想いを話しているのを聞いていると
自然と胸に込み上げてくるものがありました。


次に、大喜利と題して１０人１０分づつのTips紹介。
簡単に内容と感想を書いておきます。


「MT連携でソート可能なテーブルを自動更新」鷹野雅弘 さん

　MT4.1＋spry＋XMLで使いやすい表を実現させようというTips。
　手順としては
　１：適当なxmlを用意
　２：DWCS3で空htmlを一個つくり、spryのデータセットをまず作る。
　　（htmlとxmlの関連付け）
　３：spryテーブルで、xmlの該当ノードを表示させる設定をする。
　　　ここまででソート可能なテーブルを作ったことになる。
　４：１のxmlをMTから書き出すために、MTのカスタムフィールドを
　　　使って幾つか項目を追加。
　５：MTでXML書き出し用テンプレートを作る。

　以上。spryとかjs利用するものは、ブラウザでjsを動かなくしていると
　テーブルも表示されないけど、まあ、大半のユーザーはOKでしょう。
　CMSツールとしてのMT4.1は個人的にも納得、大賛成です。


「デザインビューでいきましょう！」神森勉 さん

　神森さんの著書リストをamazonから取得してhtml作っちゃおうTips。
　ちょっと変わっているのは、XSLTとバインディング機能を使うところ。
　手順は、
　１：ベースとなるHTMLを　ファイルメニューの変換を使ってXSLTにする。
　２：バインディング→リモートXML（amazon API）でxml取って来る。
　３：変換したXSLTのタイトルなどをXML項目と置き換える。
　４：クリックしたときのリンクの部分もパネルのデータソースを選び、
　　　XML項目を選択する。
　５：リピートしたい部分を選択して、XSLTバーのリピート領域を設定
　６：ごにょごにょやってPHPに変換

　以上。XSLTがブラウザで表示できないのでPHPにするしかないけど
　今後、そのままXSLTが使えるのであれば、作業は楽かもね。
　バインディング機能を使ったことなかったので、今度何かで挑戦してみよう。


「量産・運用・効率アップ！テンプレート活用事例」伊原力也 さん

　サッポロビールのサイト構築の事例紹介
　DWのテンプレート機能をうまく作成して、クライアントが
　新規ページや更新をしやすくする仕組みをつくる。
　リピート領域や、テンプレートオプションで細かく条件分岐や
　編集行為の制限もできる。
　そこら辺の詳細はこの本を読むといいってさ↓
　Dreamweaver プロフェッショナル・スタイル
　http://www.amazon.co.jp/dp/4839924341/


「DWがあれば、アクセシビリティチェックもできる！」植木真 さん

　アクセシビリティチェックの仕方や気をつける点。
　DWでのチェックの仕方は
　サイト→レポート→HTMLレポートでJISチェックすればOK
　バリデートと違ってすべてのエラーを消さないといけないワケではない。
　独自ルールに則ってアクセシビリティのチェックをしましょう。


「Dreamweaverに機能を追加して、より作業効率を上げよう！」酒井克幸 さん

　機能追加でCSS属性のフォーマット変換をするTips。
　CSSを思いつくまま書いていくと、属性の順番がバラバラで
　後々管理するのが大変になる。なので
　DWの機能拡張に独自プラグインを追加しちゃおう。
　これ→http://www.resolutions.jp/go/dw_10th
　まだCSSショートハンドには対応してないけど、
　自分で書くなら基本的に書式は一緒だから問題ないと思う。

　機能拡張はHTMLとJSで出来てるから、プログラムできれば作れるんだって。
　（あまり作る気ないけど…）


「プログラム開発にも活用できちゃうDreamweaver」たにぐちまこと さん

　題名かわって「デザイナーとエンジニアが仲良くなるために」
　意固地で頑固なエンジニアにすこしでもDWを使ってもらうために
　デザイナーがちょっぴり啓蒙しましょうっていう話。
　
　・ファイルの先祖がえりをしないように、チェックイン･アウトを使おうとか
　・ライブデータ表示を使うといいよ。
　・関数のジャンプも、右クリックのメニューにあるよ。
　・スニペットも便利じゃない？
　・外部エディターの登録もできるよ。などなど

　僕もそうだけど、DWでPHPとか書いてないんだよねー。
　無料のエディターでシコシコ書いてるってのがプログラマーぽいと言うか…。
　でもまぁ、今回のイベントでDWのデータ接続系が強いの分かったので
　徐々に切り替えていくことにする。


「ラクラクかんたん！FlashVideo組み込み手法」金像瑞穂 さん

　Express Install の説明と実演。
　
　DWでFlashVideoを表示させるHTMLを書くのは簡単。
　（flvをドラッグ＆ドロップするだけ）
　ただ、コーデックによってflashplayerのバージョンが違っていたり
　もし、アップデートすることになっても、ブラウザを再起動させないと
　実際のムービーが見れない。
　そんなとき、Express Installという手法を使うと、
　flashplayerアップデートでも再起動なしに、コンテンツが表示できる。
　
　詳しいやり方はこちらを参照↓
　http://www.adobe.com/jp/devnet/flashplayer/articles/expressinstall.html


「Dreamweaverで使いやすい入力フォームをつくりましょう！」藤川真一 さん

　spryの入力フォームチェックを活用しましょう。
　ついでにspry1.6も試してみようという話。
　
　spryの機能を利用するときの注意点として
　・外部のJSとCSSをリンクしましょう
　・spanタグは極力そのままコピー
　・html最後のJSは消さないように
　の３点。
　
　CS3に入っているspryはバージョン1.4で、1.6がネットで公開されている。
　ただ、使うときは上記３点を気をつけつつ、サンプルをみて
　自分でコピペして使いましょう、と。

　詳しい解説はこちら↓
　http://www.adobe.com/jp/devnet/dreamweaver/articles/calamel.html


「もうテキストエディタには戻れない！」近藤将範 さん

　DWのコードビューを活用する話。
　いろいろなショートカットコマンドを活用すると
　コードが見やすく、作業しやすくなりますよ、っと。
　
　親タグ選択　　　Ctrl＋[
　タグをたたむ　　Ctrl＋Shift＋j
　選択範囲たたむ　Ctrl＋Shift＋c
　選択以外たたむ　Ctrl＋Alt＋c

　など


「生活に役立つ小ネタ集」林岳里 さん

　DWの小ネタ。
　
　・タグの大文字、小文字が混じってたら、環境設定→コードフォーマット
　　常に無視する「タグ大文字、小文字」をチェックして、開きなおす。
　・コードのインデントがぐちゃぐちゃだったら、全体コピペすると治る。
　・キーボードショートカットを活用しましょう
　・機種依存文字などの変換は機能拡張で出来るようになったよ。
　・正規表現での検索置換を使いこなしましょう

　など


以上が大喜利でした。


最後の１時間は
「使いこなすと10倍仕事が楽になる！Dreamweaver関連機能」
ということで、新しく追加された機能拡張の紹介

・iMode用絵文字など
・AIR
・MT4.1タグリファレンス
・全角半角変換

まだどこにも落ちてないんだけど、多分そのうち
http://www.adobe.com/jp/devnet/dreamweaver/
に掲載されるでしょう。


いよいよ大ラス「CS4 SneakPeak」
開発中のDWCS4の画面と機能をちら見。

デモでやっていたのは、
・LivePreview機能はsafariのエンジンを使い
　ブラウザを立ち上げないでDWだけで動作検証できる。
・LiveCodeは、LivePreview時のajax挙動とかに応じて変化するHTMLを表示できる。
・そのとき、Pause機能でCodeを一時停止させて、その箇所を修正できる。
・Codeナビゲーターはspryで作られていて、修正しているHTMLタグのCSS一覧がでる。
・SplitCodeは、そのものずばりcode部分の分割プレビュー

文字で読むとあまりイメージできないかもしれないけど、
ようするに、ajaxなど動的変化するページもDWで実際の表示を見ながらデザインできますよってこと。

来春ぐらいには発売になるのかなぁ？もっと先かな？
いずれにせよ、楽しみです。

??????

思った以上に盛りだくさんなイベントでとっても満足です。
技術を消化・吸収するにはもう少し時間が掛かりそうですが…。

今回のTipsなどはゆくゆく↓このページにUPされる予定。
http://www.adobe.com/jp/devnet/

以上、気づいたら長くなっちゃったDW10周年のレポートでした。