「Adobe Dreamweaver CS3 10周年記念イベント ～夢を紡ぐ者たちへ～」というイベントに行ってきました。レポートというか自分用のメモに近いです。優秀なレポート3名には出演者が着ていた緑の法被（ハッピ）がもらえるということだったのですが、ちょっと欲しいなぁ思ってます。

基調講演：Dreamweaver 誕生秘話、歴史、現在

• イントロダクション的な感じでDreamweaverなどの歴史などの話
• 歴代のDreamweaverの紹介
• Dreamweaverの生みの親であるKevin氏が開発当初に掲げた"19 dreams"というシナリオは、まだ達成できたいないものもいくつかあるらしい
• "19 dreams"の内容がどういうものだったかはメモが追いつかなくて把握しきれなかった
• 林 岳里がDreamweaver CS3の新機能をざっくりと紹介
  • Spryの紹介
  • 新規HTMLを作るときカラムレイアウトのテンプレートを選ぶことができる
  • CSSコードフォーマットの話

歴代のDreamweaverのパッケージが並べられていた。

大喜利前半

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

• Dreamweaver + Spry + MT4.1でテーブルをつくる
• Spry。読み方はスプライ。ライライライラララライ・・・で藤崎マーケット
• Spryを使ってXMLデータを読み込みテーブルを作成する（SpryメニューのXMLデータセット）
• Spryでテーブルを作成（Spryメニューのテーブル）
• テーブルはソートが可能
• XMLを更新すればページも更新される
• XMLを作成するのにMT4.1のカスタムフィールドを使う
• javascriptが無効の環境だとテーブルが表示されない。このあたりはSpryも改善箇所として認識している

javascriptが無効なときの挙動については僕が質問したんですが、javascriptが無効のとき全くデータが表示されないので、現状では使いどころは限られてくるかもしれません。しかしMTをXMLの更新に使うのは僕にとって斬新なアイデアでした。

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

XSLTの話

• DreamweaverでXSLTを作成する
• DreamweaverからXMLを読み込んで、要素を選ぶと挿入される
• XSLファイルはブラウザで見れないのでPHPなどで表示する？

そもそもXSLTがよくわかっていないし、超スピードで進まれたので、ちょっとついていけませんでした。残念。

TSVからページを大量作成する拡張の話

TSVを読み込んで、作成しておいたテンプレートにデータを流し込むことで、大量のページをバッチ処理的に大量に作ることができることができる拡張機能の紹介でした。これってどっかで公開されてるんだろうか？

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

• サッポロビールのサイトを作ったときの話
• エビスビールはサッポロビールらしい
• Dreamweaverのテンプレート機能を使って作成している
• テンプレート機能を使うことにより、作成後にクライアントで更新したり、新規ページを作成するときに非常に便利
• 条件分岐や繰り返しなど多様な機能がある
• テンプレート化するときはデザインをもらったときに、デザインを印刷して色ペンなどでコンテンツを分析していく

テンプレート機能は使ったことないので一度使ってみようかなっていうくらい便利そうでした。テンプレートに関することを勉強するにはDreamweaver プロフェッショナル・スタイルという書籍がおすすめということでした。

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

• アクセシビリティチェックの使い方
  • [ファイル]-[ページのチェック]-[アクセシビリティ]
  • [サイト]-[レポート]-[HTMLレポート]-[アクセシビリティJIS X 8341-3 日本工業規格]-[実行]ボタン
  • [結果]パネルの[レポート]ボタン-[実行]ボタン
• 問題箇所を「×（要修正）」と「？（要確認）」に分類
• リファレンスパネルで詳細な解説を参照可能
• 全部のエラー（警告）に対処するのでなく、サイト毎に準拠レベルを決めてそれに従うことが大切

確かに、アクセシビリティは追求すれば終わりはほとんどないようなものなので、案件ごとに準拠する基準を決めるのは重要ですよね。

• CSS属性フォーマットという拡張機能の話
• 拡張機能は基本的にjavascriptで書かれてる
• Dreamweaverで作られたCSSは順番がバラバラになる。それを順番に並び替えるための拡張機能
• 将来的にはショートハンドにも対応したい

拡張機能ってjavascriptで書かれてたのか！っていうのに驚きました。自分で拡張機能作れるようになったら便利だろうなぁ

左から鷹野さん、神森さん、伊原さん

大喜利後半

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

• デザイナとプログラマが仲良くなるためにDreamweaverを使おう
• 問題点
  1. プログラマが触るとデザインが壊れる
  2. 更新したファイルが上書きされて古いものになることがある
  3. プログラムが入ったHTMLを開くと、わけわからない
• 解決案
  1. HTMLの警告機能を使う
  2. チェックイン・チェックアウト機能を使う
  3. ライブビュー機能を使う
• Dreamweaverはコード補間やコードカラーリングもできる
• 関数を指定してジャンプできる
• スニペットでプログラムを保存して使いまわせる

時間切れで全部聞けなかったのが残念でした。僕はプログラム書くときは基本的にテキストエディタなので今度一回Dreamweaverで書いてみようかな。

「ラクラクかんたん！Flash Video 組み込み手法」金像 瑞穂 氏

• Flash VideoのファイルをDreamweaverにドラッグアンドドロップするだけで、ページに組み込むことができる
• Express Installとは、必要なバージョンのFlash Playerがインストールされていない場合に、ダウンロードページに遷移せずにバージョンを更新できるもの。詳細は以下からどうぞ。 Adobe - デベロッパーセンター : Express Install 適用ガイド
• SWFobjectもExpress Installに対応してるみたい

Flash Player更新のデモが終わる直前で時間切れという神がかり的な時間の使い方だった。ちょうど今Flash Videoを使う機会があるので早速試してみよう。

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

• Spryのテキストフィールド検査を用いてフォームのバリデーションを行う
• Dreamweaver CS3に組み込まれているSpryのバージョンは1.4。最新のバージョンは1.6
• 1.4ではラジオボタンのチェックなどができないので、自前で組み込む必要がある
• 結構カスタムしないと実用的じゃなそうな気がする

CS3に組み込まれてる1.4では少し厳しいかもという印象。デモのHTMLを見ていて思ったけど、javascript切ったときにエラーメッセージが最初から出ると思う。その辺りの対応も次バージョンに期待という感じなのだろうか？

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

主にキーボードショートカットの説明でした。「これだけは覚えておきたいコードビューで使えるショートカット」という表があって、写真に収めたので書き残しておきます。

機能	Windows	mac
親タグを選択	ctrl + [	Cmd + [
インデント解除	ctrl + shift + < ctrl + alt + [	Cmd + shift + < Cmd + option + [
インデント挿入	ctrl + shift + > ctrl + alt + ]	Cmd + shift + > Cmd + option + ]
行を指定して移動	ctrl + g	Cmd + ‘
タグをたたむ	ctrl + shift + j	Cmd + shift + j
タグを展開	ctrl + shift + e	Cmd + shift + e
選択範囲をたたむ	ctrl + shift + c	Cmd + shift + c
見出しの挿入	ctrl + 1～6	Cmd + 1～6
改行の挿入	shift + enter	shift + enter
画像の挿入	ctrl + alt + i	Cmd + option + i
折り返しタグの挿入	ctrl + t	Cmd + t

後の林さんのお話でありましたが、キーボードショートカットは[編集]-[キーボードショートカット]で追加、編集することができるので、足りないものは追加していけばさらに使いやすくなりそうですね。

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

• 環境設定のコードフォーマットで一括してタグの大文字/小文字を変換
• デザインビューで一度全部切り取ってペーストするとソースフォーマットが適用される
• [ファイル]-[復帰]でファイルを開いたときの状態に戻す
• 選択範囲のみを検索、置換できる
• 正規表現で置換するデモ

選択範囲のみ検索、置換できるのは知らなかった。これは使えそう。

使いこなすと 10 倍仕事が楽になる！Dreamweaver 関連機能

• imode拡張機能
  • 絵文字が表示、編集できる
  • アクセスキーの設定が容易になる
  • 画像の一括サイズ変更機能
  • 不必要なタグを消去する機能
• 全角・半角変換機能
• DreamWeaverCS3拡張機能 for Movable Type 4.1
• Adobe AIR extension for DW
• GL2DW

これらの拡張はAdobe Developer Connectionされる予定らしい。

CS4 SneakPeak

• javascript、CSS、flashの動作を再現できるライブプレビュー機能。コードも動的にプレビューできる
• CSSを保存しなくてもプレビューに反映される機能
• スプリットコードビュー機能。HTMLとCSSを分割して見ることができる。3分割で一緒にデザインビューも見れればすごくいいなと思った。

CS4の機能を少しだけ紹介してもらったのですが、ここで聞いた機能だけでも、すごく使いたい！と思いました。Spryの機能も大幅にパワーアップすることが期待できるし、ホントに楽しみです。

スプリットコードビューのデモ。上がCSSで下がHTMLのコードビュー

終わり

大喜利では豪華出演陣がたった10分のスピーチでとても急ぎ足の説明だったのが残念でした。もっと聞きたかったです！そしてCS4。これはすごく期待でそうな予感がしました。

最後にDreamweaver扇子とサッポロビールから新発売のBEER FINEという糖質50%OFFのビールをいただきました。Dreamweaverで作業量も50%OFF！と司会の方が言っていましたw

このエントリー書きながらおいしくいただきました