ADOBE DREAMWEAVER CS3 10周年記念イベント ～夢を紡ぐ者たちへ～
に彼女と二人で行ってきました。

夢を紡ぐ者、てなんだ、と思いましたが、DreamWeaverを訳すと、「夢を紡ぐ者」になるわけですね。
大きく3つのセッションに分けて、平日の13時から18時までの長丁場で無料とは大したものですね。

まずは基調講演、DreamWeaver誕生秘話、歴史、現在と言うことで、
今はAdobeのCTOになったKevin Lynch氏をはじめ、
当時の開発メンバーが開発が始まった1997年当時を振り返っていました。

htmlの書き方を知らなかったけれど、多くの人にアドバイスを求めて製品ができあがったこと、
開発当時、Lynch氏が19 dreamsと銘打って
dreamweaverで実現したいことを書き出して、それによってチームが結束したこと、
当時のWYSIWYGエディターが手書きのタグをぐちゃぐちゃにしてしまうことが不満になっていて、
それを技術的な方法で解決できたこと、

ユーザーのインデントを尊重してDreamweaverがタグを埋める時にもそれに似せたこと、
コードのラウンドトリップのために、ネット上にクローラーを回して、
標準から逸脱しているhtmlのうち、よくあるパターンを抽出し、そのようなパターンを崩さないような対応を行ったこと、
例として、cssのなかった当時、中黒を表現したいけれどインデントを避けたいとき、
ul/olタグを使わずliを使うハックが多く使われていたため、それに対応した、と言っていました。

Lynch氏もCTOだからか、そろそろ新しい世代が次世代のWebオーサリングツールを、と言っていたのが気になりました。
製品も成熟期、次世代の機能もadobeから生み出せると良いですね。
この手のセッションは、実用的というよりはお祭りのネタに過ぎないのですが、技術者として聞いて、なかなか面白いなと思いました。

続いて、過去のバージョンを振り返ったり、
バージョン3.0、MX2004、そしてCS3のデモがありました。これも楽しめました。
3.0は起動が速かったです。通路に昔のDreamweaverのパッケージが置いてありました。

最後にCS3の機能紹介。
Photoshopのレイヤー単位でコピペで挿入できること、PSDファイルをドラッグアンドドロップで挿入できること、
Spryサンプルページを見せながら、Spryにより、フォトギャラリーや製品テーブルの機能が可能になることの説明がありました。

休憩を挟んで大喜利コーナーの前半。
技術系のイベントで近頃流行の、ライトニングトークのような形で、各メンバーが自己紹介一分、デモ十分で行っていきました。
何人か「続きはWebで」の方がいらっしゃいましたので、資料が揃うのを待つとしましょう。
メンバーは、名前を知っている方がちらほらいらっしゃいましたし、かなりプレゼン慣れしている方が多かったです。

トップバッターはCSS Niteでも有名な鷹野さん。しっかりイベントの宣伝をしていらっしゃいました。
画面の拡大やカーソル位置へのスポットライト機能などを手慣れた感じで使っていました。
内容は、表の内容がちょくちょく変更になるようなサイトを管理するのに
XMLのデータソースから読み込ませることができ、
そのXMLを作るのに、Movable Typeに適当なフィールドを追加することで実現する、と言うものでした。

お客様が更新するとして、Movable Typeで更新できればこれ以上のことはない、と言う感じですが、
この環境のセットアップはかなりやっかいではないかな、と思いました。
もしタブ区切りテキストで同じようなことができるのであれば、その方が良さそうかなー。

続いてはアンカーテクノロジーの神森さん。
amazonのxmlにxsltを通してhtmlを作る、と言う作業を「ライブコーディング」で行っていました。
あらかじめアフィリエイト付きのxmlを取得できるamazonのURLが分かっているとして、
それをアプリケーションのバインディングに指定し、xslを通すことで、htmlが作れる、と言うものです。
ページはphpでしたが、サーバービヘイビアを設定してDreamweaver上で見映えがチェックできるよ、と言うものでした。
最後にもう一つのネタとして、タブ区切りテキストをhtmlに変換する拡張機能を作り、数百ページのhtmlを生成した、と言う
デモを見せてくれました。

今回のデモでは、すでにできあがったxslを使用していましたが、
このxslを作るのが大変なんじゃないかな、と思いましたが、T-STUDIOの2月14日のお知らせにて既に公開されていました。
とは言ってもxslはとっつきにくいので、ちょっと複雑な書き換えをしたくなった時には、泣きを見るんじゃないか心配なところではあります。

次は、ビジネス・アーキテクツの伊原さん。
サッポロビールのサイトをDreamweaverのテンプレート機能を使って作ったと言うことで、
実際のページと、そのテンプレートをDreamweaverのデザインビューで見た表示を比べて紹介してくれました。
テンプレートでは、リピート領域、条件設定を設定して、お客さんが更新することが可能になったとのことです。
どこを編集可能領域に設定するか、などに関しては、まずはアナログに、色ペンで記載して、
それからテンプレート化の作業を行ったようです。

インフォアクシアの植木さん。
アクセシビリティー規格のJIS X 8341-3についてと、
それをDreamweaverでチェックする方法を説明していました。
validationと違って、必須準拠が求められる部分のほかに、ツールではチェックできず目で確認しないとならない部分があり大変そうでした。
チェックツールの設定は保存が可能なのでサイトによって使い分けると良いでしょう、とのことでした。
アクセシビリティー対応に関しては、先にサイトの準拠レベルを設定しておくことが大事である、と言う点が印象的でした。
なかなか実践的な人なんですね。

続いて合同会社レゾリューションズの酒井さん。
大喜利に立候補したとのことで、CSS属性フォーマット拡張機能の説明をしてくれました。
今後の予定として、複数の属性をひとつにまとめるものを予定しているとのことでした。
拡張機能はJavaScriptで書けるとのことで、作ってみたくなりました。
css、js、htmlの圧縮なんかもできたら使う人が居るかもしれないな、と思いました。

質問タイムでは、主に伊原さんと酒井さん宛てのものが多かったです。

• テンプレート機能の勉強法は？→「Dreamweaver プロフェッショナル・スタイル [CS3対応]」で学びました。
  
• cssではなく、htmlやその中の (CodeFusionの) SQLを整形するには？→タグについてはメニューからできるが、SQLはできない
• 属性フォーマットの拡張機能はどのように作ってる？→中身はJavaScriptが146行。Dreamweaver上で作った
• アクセシビリティーに関して、小学三年生までに習う漢字、などのチェックはできないか→機能として入るかはAdobe次第
• お客が更新に使うツールの選定方法は？→Dreamweaverがあれば良いが、高いのでContributeを使うことになる場合もある。
  更新内容が複雑な時や説明の時間が取れない場合はDreamweaverやContribute、単純な更新が大量な時はCMSを使う。
  説明の引継ぎができるよう、Captivateで更新の動画を取っておく方法もある。
  →Windowsの方は、当サイトで配布しているフリーソフトのCamStudioも試してみてください。
• Spryを使った表だが、JavaScriptがオフの場合はどういう表示になるか→残念な結果に。今後のバージョンに期待。

大喜利後半戦は、
H2O Space.のたにぐちさんからです。
デザイナーとプログラマーが仲良くしましょう、と言うことで、プログラマーもDreamweaverを使うと良いことあるよ、と言う耳の痛いお話でした。
「ライブデータの表示」機能を使えばプログラムもDreamweaver上で見られるし、
チェックインとチェックアウトをGETとPUTの代わりに使うことで、ひとつのファイルを両方がいじってしまうこともないし、
EmacsやEclipse好きの方も、カラーリングや関数ジャンプ機能、外部エディタ使用機能もありますよ、とのことでした。
よく使うコード断片をクリックだけで設定できるコードスニペット機能は便利そうでした。
しかし、EmacsもEclipseも無料なわけで、あえて5万出してDreamweaverを使うメリットとしては、どうなんでしょうかね。
仲良くできるためならば、使うべきなんでしょうか。

アドビ認定インストラクターの金像さんは、FlashVideoの組み込み方法についての話でした。
ドラッグアンドドロップを始め、何種類かの組み込み方法があるけれど、
Dreamweaverの基本の組み込みよりも、ExpressInstall機能を使うと、
ユーザーにとっての使い勝手が良くなりますよ、と言う説明でした。
Express Install自体はDreamweaverがなくてもSWFObject JavaScriptライブラリー等を利用して実現可能なので、
検討の価値がありそうです。
逆に、Dreamweaverを利用して組み込む場合は、少々トリッキーな手順を踏んでいたように見えました。

続いてpaperboy&co.の藤川さん。
カラメルの構築にSpryを利用したとのことで、
フォーム必須入力の検証サンプルと、Spryの1.6に入っている新機能を今のDreamweaverで使う方法の例として、
ラジオボタンの必須検証を行うサンプルを説明していました。
1.6ではパスワード等の再入力の検証やツールチップなど、使いたい機能満載とのことでしたが、手作業が入ってしまうのは残念です。
Adobeの方は、これをDreamweaverのUIに組み込むと、法律上課金しなければならなくなる、と仰っていましたが、これはどういうことなんでしょうかね？

1pac.incの近藤さんは、コードビューの便利な使い方、を紹介してくださいました。
ctrl-shift-C (option-shift-C) で選択範囲を畳む、ctrl-alt-C で選択範囲以外を畳む、などは便利そうでした。
プレゼンが途中で終わってしまい、続きはwebで、となりました。

アドビの林さんは小ネタをどんどん紹介していくスタイルでした。
タグの大文字小文字の統一、インデントの統一、復帰 (変更を破棄してファイルを開きなおす)、選択範囲の検索、など。
検索に正規表現を使うと便利な部分がある、とのことで、すべてのimgにaltを追加する、
改行の除去、Copyright表記を統一、年月日の書式を一括変更、等を検索機能を使って操作していましたが、続きはwebで、となりました。
検索条件は保存したり読み込んだりできるようなので、一度正規表現がわかる人が作ってしまえば、
詳しくない人にも使いこなすことができそうでした。

質問タイム。

• Spryのチェックで、エラーメッセージを表示する位置を送信ボタンの側にすることは可能か→カスタマイズしないと無理。
  ブログにサンプルがあるので良かったら見てね→ここ？
• Express Installの使い方は？→Downloadする必要あり。カスタマイズ版をWebに紹介するかも
• サイトごとに環境設定を変えられないか？→今は無理。要望あるのでもしかしたらCS4で入るかも
• Express Installのライセンス、改変可否は？→可能。ただし、セキュリティー上変更できないダイアログもある
• 正規表現でorを使うには？→(aaa)|(bbb)の様にすれば良い
• 一括置換後にどのファイルをアップロードするべきか確認するには→検索レポートから、全体を同期する、更新日で検索するなどの方法がある

次に「使いこなすと10倍仕事が楽になる！Dreamweaver関連機能」でしたが、拡張機能とAdobe Developer Connectionをあげていました。
拡張機能を使っている方は、と言う質問がありましたが、会場の四割くらいの人は使っている様子で、意外に多かったです。
拡張機能の使い方として、Extension Managerからmxpファイルをインストールする手順を説明していました。
また、iMode用、全角半角変換、sixapartと作ったMT4.1用等の拡張機能の説明がありました。
iMode用拡張機能はインフォアクシアさんが作っているとのことで説明をしてくださいましたが、
機能は色々ありましたが、まるでWindowsのツールのような、若干使いづらそうな感じで、
標準の状態よりはだいぶ良いのでしょうが、iMode用はやはり拡張機能で行うのは無理があるのかな、と言う印象を受けました。

Adobe Developer Connecitonは、リニューアルしたばかりのようで、動画や今日のセッションの人たちの記事もあるので
ぜひ見てみてくださいね、とのことでした。今日の資料もそちらに上がるのでしょうか。
リニューアルしたばかりだけのことはあって、まだサーバーにつながらないところや、機能しない部分も見られるようですが、
徐々に直っていくものと思います。

最後に、マーケティング担当のDoug Winnie氏が、Dreamweaver CS4をいち早くデモしてくれました。
効率性を重視したと言う新しいバージョンは、
JavaScriptを含むページもWYSIWYGで確認できるLivePreviewボタンや、
JavaScriptによるDOMの変更をリアルタイムで確認したり変更を一時停止したりできるLiveCodeボタン、
htmlとcssを画面の上下に同時に開く分割コードビュー機能など、かなりプログラマーには嬉しい機能が増えているようでした。
Safariに使われているWebKitエンジンを組み込んだそうです。
まだスケジュールも確定していないようで、これからもまだまだ新機能は入るようです。

さて、イベントの全体的な感想ですが、彼女と帰り道話したのですが、結構技術的な内容が多かったですね。
一見便利なことができそうだけど、家に帰ってからやり方を調べたら難しいものが多かったかも。

今回に関してはAdobeの方のプレゼンはおまけみたいなところで、他社の方々のプレゼンがメインだったので
コントロールしづらい部分もあったのかもしれませんが、例えばSpryなんかは今使っている人も少なかったようなので、
デザイナーだけでも間違いなく使えるだろう、と言う部分だけでもみっちり説明したら、
その後の日本のサイトのユーザビリティーが上がって行ったんじゃないかな、と思いました。

あるいは、より良いデザインをする方法、的な部分に触れられていたものはなく、そこはツールと言うよりも、
感性や知恵に頼ってがんばってね、と言うところなのでしょうか。
例えばこんなレイアウトを実現するには、Dreamweaverのこんな機能を使うと楽に行けますよ、であるとか、
デザインビューとコードビューを行ったり来たりすることで、コードビューだけよりも効率的に作れますよ、とか
そんなセッションもあっても良かったように思いました。

客層は、私服が八割五分ほど、女性は三四割、年齢は二三十代が多そうですが、一割ほどは年配の方、
と言ったところでした。さすがにプログラマー向けのイベントとは違いますね。

アドビの扇子とサッポロビールをもらってきました。アドビのみなさまおつかれさまでした。乾杯。

2/22追記 他の方のレポートを幾つか見かけたのでリンクしておきます。

• Clear Sky Source - Dreamweaver 10 周年記念イベント - 夢を紡ぐ者たちへ
• Adobe Dreamweaver CS3 10周年記念イベントに参加／IT独立開業ほとほと日記
• Dreamweaver CS3 10周年記念イベントレポート - Webtech Walker
• F's Garage：Dreamweaver　10周年記念イベントに参加しました。

3/4追記
Adobe公式イベントレポートなんてのあったんですね。Developer Connectionにも少しずつ資料が出始めました。
スペシャルノベルティ当たりました！

◎ブログ掲載について
本イベントにご参加後、2月27日(水) までにご自身のブログに記事をアップいた
だき事務局宛に対象ページのアドレスをお送りください。アドレスをお送りいた
だいた方のうち、優れたイベント情報レポートについては、厳選なる審査のうえ
「スペシャル・ノベルティ」をプレゼントいたします。