続・Dreamweaver10周年記念イベントへ行ってきました

お待たせしました、続き（いや、一番メインのところだ）です。
前回も書きましたがもう一度。今回のイベントはDreamweaver（以下DW）の歴史を知るセクション、10名の勇士によるDWネタ大喜利、そして関連機能と開発中のCS4についてのセクションの3部構成でした。
会場へは12：20頃着き、席は前から3列目という~~首が疲れる~~ベストポジション。前の座席から引き出すテーブルにはちょっと出入り苦労しましたが…。

基調講演：Dreamweaver 誕生秘話、歴史、現在
Dreamweaver大喜利 – 前半：10名の勇士による華麗な実践Tips紹介
Dreamweaver大喜利 – 後半：10名の勇士による華麗な実践Tips紹介
使いこなすと10倍仕事が楽になる！Dreamweaver関連機能+CS4 Sneak Peak
自己的まとめとか、どうでもいいこととか

Update

08年2月28日: 「大喜利3：量産・運用・効率アップ！テンプレート活用事例」のTips完全版URLを追加
Sneak Peakに関連してIT ProのインタビューURLを追加
08年3月3日: 「全角・半角変換拡張機能」のURLを追加
08年3月6日: 「大喜利4：DWがあれば、アクセシビリティチェックもできる！」
「大喜利6：Dreamweaverでデザイナとエンジニアが仲良くなる方法」
「大喜利7：ラクラクかんたん！Flash Video組み込み手法」のURLを追加

開始前

開始の前には、DW開発チームの面々が10周年にあたってのコメントを寄せたムービーが流れています。DWの生みの親、Kevin Lynch氏はDWを作るに当たって“19 Dreams”と言う「実現したいこと」をまず書いたそう。
誕生秘話でも触れられましたが、まだ実現されていない“Dream”もあり、これからもDWは夢を紡いでいくんだよというお話しをされていました。

それから、開発当時は現場のデザイナーの声をもっとも重要視したとも。ValidでないHTMLのテクニックがオーサリングツールによって書き換えられてしまわないようにするのに苦労したそうです。今となっては考えられませんが…。（そんな手法、数年前までは平気で使っていた自分…懐かしい。）

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

気がつくと、緑色の法被を着た男性が前に2人。右側の方はDWの扇子を持っています。純粋に欲しい。

ちょっと静まった会場に、
「今日はお祭りですからね！盛り上がってくださいよ！」
とAdobeの阿部さん、西山さん。

まずは前述の“19 Dreams”についてのお話し。
19 Dreamsはさらに細かい内容があり、19のうちいくつかの内容の日本語訳をスライドで見せていただきました。「11.ブラウザのターゲティング：選択したブラウザプロファイルに応じたプレビューを可能にすべし」などは早く実現されるといいですね。

続いてAdobeの歴史とDWの発売を重ねた年表を見ながら、歴代DWを振り返っていきます。一番最初に発売されたのは1997年だったんですね、世界で初めてDWを買った人の笑顔がある意味ステキすぎますｗ。それぞれの商品が発売された年の出来事も一緒に見せていただきましたが、10年って短いようで長いですね…。
私が初めてさわった「DW Ultra Developer」の英語名はDW UltraDevだそうで、日本名を考えるときにこの名では出せないだろ？ってのがあったとかなかったとかという裏話も。

ホワイエにも展示（未開封）されていましたが、パッケージも時代を感じます。段々シンプル・スタイリッシュになって、この辺はWebデザインそのものとも重なるところもあるなー。

このセッション最後は、ビジネスデベロップメントマネージャの林さんからDW CS3の主な機能紹介。
Photoshop（以下PS）からコピーして直接DWにペーストすると、保存ダイアログが出てそのまま画像挿入できちゃいます！っていうくだりでは、驚きを通り越してただただ笑うしかありませんでした。まだDW8使っているのでこの機能を初めて見たのです。PSとの連携を強めたというその辺まとめると以下の通り。

PSの該当レイヤーをコピーしてDWにペーストするとスライス・書き出しせずに画像挿入できる
バナーなどの単オブジェクトのPSDファイルはDWのファイルツリーからドラッグ＆ドロップでJPEGやGIFに変換して挿入してくれる
上記の方法で挿入した画像は元ソース（PSD）がプロパティパネルから参照できるので再編集が楽ちん

40分でしたが、濃密なセッションでした。

Dreamweaver大喜利 – 前半：10名の勇士による華麗な実践Tips紹介

今回のイベントの目玉と言っても過言ではないセクションです。
最初から出演の予告があった8名と参加募集時に名乗りを上げた2名による大喜利、持ち時間がひとりわずか10分と3分クッキングも真っ青。なんせタイトルを見る限りでも一ネタで1講義できそうな内容なんですから。10分過ぎると陣太鼓が鳴り渡ります。勇士のみなさんはいつにも増して真剣な面持ちです。

ちなみに、これらの大喜利Tipsは後日Adobeのサイトに掲載されるとのこと。

大喜利1：MT連携でソート可能なテーブルを自動更新

勇士：（株）スイッチ鷹野雅弘氏

Spryの概略紹介
Spryを使ってXMLファイルを読み込みソート可能なテーブルを作成
CSSで奇数・偶数行、選択行などのカラーリングをして見やすく
XMLファイルを更新するのにMovableType4.1（以下MT4.1）のカスタムフィールドを利用すると便利だね

最近よく耳にする「Spry」、Ajaxのフレームワークだと言うことは知っていましたが、具体的にどう使うかと言うことまでは知りませんでした。DW CS3にはSpryの挿入バーがあり、そこをクリックして挿入すればほぼコードを書かずに実装することが可能とのことでした。ここでは、外部XMLファイルをSpryで読み込み、データテーブルを作成しました。

質疑応答で「Javascriptがオフになっている環境ではデータは読み込まれるのですか？」という質問がありました。私もここは気になったところ。SpryはJavascriptなので、ブラウザの設定がオフになっていたらもちろん機能しません。鷹野さんが実際にオフにしてみせてくださいましたが、XMLファイルは読み込まれず、テンプレートとなるテーブルだけが表示されました。（Spryのアップデートに期待とのこと。）

データの更新はXMLファイルをアップデートすることで実現できます。次のステップではそのXMLファイルの更新をどうやって行うかというお話。テキストエディタでも作成可能ですが、ここではMT4.1を使って更新をしようという内容でした。MT4.1のカスタムフィールドと、XMLファイル用に作ったテンプレートで実装するんですね。これはXMLファイルだけでなく、他のファイルの生成にも使えそう。

Adobe – デベロッパーセンター : Movable Type連携でソート可能なテーブルを自動更新: http://www.adobe.com/jp/devnet/dreamweaver/articles/dw10seminar_takano_table.html

大喜利2：デザインビューでいきましょう！

勇士：アンカーテクノロジー（株）　神森勉氏

XSLT作成機能紹介
Templateを活用した自動ページ制作

既存の(X)HTMLをXSLTに変換してAmazonから抽出したXMLファイルを読み込み、デザインビューで確認しながら要素を埋め込んでいく…早い話、その一連の作業がデザインビューだけでできちゃうよ！というお話。XSLTだけではブラウザで表示ができないため、最後はPHPをかましてブラウザに表示させるという手段になるそうです。XSLTはまだ勉強不足でよく分かっていないのですが、手順はFlickrのほうに…。XSLT興味あるので今後の課題だな。

大喜利3：量産・運用・効率アップ！テンプレート活用事例

勇士：(株)ビジネス・アーキテクツ　伊原力也氏

事例をみながらテンプレートがどのような場所に使われているか解説
なぜテンプレート化するのか→「どうしたいか」を共有・「何をしていいか・行けないか」を可視化
Dreamweaverテンプレートがナイスな点→見たまま編集、編集箇所を限定・明示・編集の仕方をコントロールできる
テンプレートの設計ってどうやってるのか？

ビジネス・アーキテクツで実際に制作したサッポロ生ビールのサイトを事例に、DWのテンプレート機能を活用したサイト作成のお話。
事例のサイトは、全体で200?300ページあり、クライアントが運用することを前提に製品情報などのページがDWテンプレート化されています。テンプレート化する理由をいくつか挙げられていましたが、どれもこれも思い当たることばかり。ちょっと気が楽になりました。

事例サイトのブラウザ表示・DW表示を切り替えてみせてくださいましたが、パーツそれぞれが細かく編集可能領域やリピート領域に指定されていて、これならXHTMLに長けていないクライアントでもマニュアルがあれば更新ができそうだなと言う印象を受けました。
こんな複雑なテンプレートの設計はどうやっているのかと思ったら、デザインカンプをプリントアウトしたものにマーカーで記入しているそうです。やっぱり最初は手で整理するのが大切ですね。そんな伊原さんのスライドは構成がとても分かりやすくて、別の意味でも参考になりました。

また、質疑応答で「テンプレート機能を勉強するには？」という質問では『Dreamweaver プロフェッショナル・スタイル』が役に立ちますよということも挙がっていました。自分もこの本でテンプレートを何とか使えるようになった口です。

Adobe – デベロッパーセンター : サッポロビールにおけるテンプレート活用事例: http://www.adobe.com/jp/devnet/dreamweaver/articles/dw10seminar_sapporobeer.html

大喜利の内容には関係ありませんが、テンプレートについては、以下のページも参考になります。

Dreamweaver Templateの使い方: http://www.eclp.net/maeda/dwt/

自分メモ：

テンプレート領域名の頭文字に数字を付けると、テンプレートプロパティで数字順に表示される
条件分岐のテンプレートは2つの項目で設定することも可能（要確認）

大喜利4：DWがあれば、アクセシビリティチェックもできる！

勇士：（株）インフォアクシア　植木真氏

JIS X　8341-3（日本工業規格）の簡単な説明→2009年には『WCAG 2.0』を踏まえてJISの改訂も
DW8から標準搭載のアクセシビリティチェック機能の紹介
チェック機能の使い方→3通りの実行方法
問題箇所の表示、リファレンスパネルについて
チェック全部クリアする必要なし。サイト独自のルールにカスタマイズ。→「レポート→レポート設定」
カスタマイズした設定を共有できないので、CS4では共有できる機能を搭載して欲しい！

タイトルが某猪木氏の名言に聞こえてしまったのですが…（笑）。
それはおいといて。植木さんのTipsはJIS X 8341-3（9カテゴリ39項目）に対応したアクセシビリティチェックをDWでやろうというお話。DW8から標準搭載されたこの機能では、JIS X 8341-3全項目に対応したチェックが可能とのこと。『富士通ウェブ・アクセシビリティ指針』から解説文を引用したリファレンスパネルでは詳細な解説が参照できるため、チェックしながら勉強ができますね。（結構この方法いいです。＞実践者。）

問題箇所は「×（要修正）」と「？（要確認）」で表示されますが、要修正は機械的に判定できるもの、要確認→機械的に判定のできないものと言うところまでは知りませんでした。
アクセシビリティのチェックは、(X)HTMLのバリデータと異なり、全部をクリアする必要はなく、まずそのサイト独自の準拠レベルを決定し、ツールはそれに合わせて“道具”として用いるといいよと言うことでした。

最後は植木さんお約束（？）のあいうえお作文で締めるかなとちょっと期待しましたが、さすがにそんな時間は無いですね。

Adobe – デベロッパーセンター : Dreamweaver があれば、アクセシビリティもチェックできる: http://www.adobe.com/jp/devnet/dreamweaver/articles/dw10seminar_infoaxia.html

大喜利5：Dreamweaverに機能を追加して、より作業効率を上げよう！

勇士：合同会社レゾリューションズ酒井克幸氏

DWが持っていない機能は自分で付け足そう（拡張機能を使おう）
CSSプロパティを並び替える拡張機能の紹介

DWの拡張機能って敷居高く感じていましたが、HTMLとJavascriptで作れるんですね。
DWには標準で(X)HTMLのソースフォーマット機能がありますが、酒井さんの紹介された拡張機能は、それのCSS版ともいうべきものでしょうか。順序がバラバラなCSSのプロパティを並べ替えることができます。

ルールを決めてはいてもそこは人間、100％統一することはなかなか難しいのが現実です。この拡張を試してみましたが、かなりいいですね。並び順を独自に設定できるのも◎。DW8でも動作確認できました。将来的にはショートハンドに書き換える機能も搭載したいとのこと。拡張ファイルは以下で公開されています。

CSS属性フォーマット – 合同会社レゾリューションズ: http://www.resolutions.co.jp/product/css_attr_format/

Dreamweaver大喜利 – 後半：10名の勇士による華麗な実践Tips紹介

大喜利6：Dreamweaverでデザイナとエンジニアが仲良くなる方法

勇士：(株)エイチツーオー・スペース　たにぐちまこと氏

デザイナとエンジニアが仲良く開発するにはDWを使うのが手っ取り早い
コードビューでタグに不備→ソースコードの色で警告
ファイルの編集がダブらないようチェックイン・チェックアウト機能
ライブビュー→ライブデータ（Ajaxなど）がデザインビューで確認
ファンクションジャンプもできる
外部エディタの登録もできる→編集後も開いているファイルに反映

予告では「プログラム開発にも活用できちゃう Dreamweaver」だったのですが、上記内容に変更になってました。
自分はエンジニアの方と同時にサイトデータをさわる機会がほとんどありませんが、チェックイン・チェックアウト機能はこれから使い込んでいきたい機能のひとつですね。

Adobe – デベロッパーセンター : プログラム開発にも活用できちゃう Dreamweaver: http://www.adobe.com/jp/devnet/dreamweaver/articles/dw10seminar_taniguchi.html

大喜利7：ラクラクかんたん！Flash Video組み込み手法

勇士：Adobe認定インストラクタ金像瑞穂氏

3つのFlashVideo挿入方法→CS3を使えば簡単に配置
FlashVideoで扱えるコーデック→Sorenson Spark（ver6）、On2 VP6（ver8）、H.264（ver9.0.115）
最新のFlash Playerに自動更新する「Express Install機能」の紹介

10の大喜利の中で一番新鮮かつ驚愕のネタでした。（自分がいかにFlashやってないかだけですが。）
Flash Playerのバージョンが低くてSWFが再生されない場合はプラグイン配布のページにジャンプさせたりしますが、最新のPlayerをページ遷移せずにインストールし、さらにそのまま再生を始めさせられるExpress Install機能はぜひ導入していきたいです。Flash Player自身の機能であるため、バージョン判定のJavascriptとExpress Install実行ファイル（SWF）だけで実装できるのも魅力です。

具体的な導入手順として、以下のページが紹介されていました。

Adobe – デベロッパーセンター : Express Install 適用ガイド: http://www.adobe.com/jp/devnet/flashplayer/articles/expressinstall.html

Adobe – デベロッパーセンター : ラクラクかんたん！Flash Video組み込み手法: http://www.adobe.com/jp/devnet/dreamweaver/articles/dw10seminar_konzo.html

大喜利8：Dreamweaverで使いやすい入力フォームを作りましょう！

勇士：(株)paperboy&co. 藤川真一氏

Spryウィジェットによるフォームの入力チェックの紹介
DWのSpryは1.4、最新版は1.6（アップデータは日本語版対象外？）
手作業での組み込み方法を紹介

フォームの入力に不備があった場合、Submitすることなく項目の横に注意が出るアレです。そのアレをSpryで実装しようというお話。
デベロッパーセンターに藤川さんによる事例が掲載されていました。

Adobe – デベロッパーセンター : Spryテキストフィールド検査ウィジェット導入事例: http://www.adobe.com/jp/devnet/dreamweaver/articles/calamel.html

大喜利9：もうテキストエディタには戻れない！

勇士：(株)ワンパク近藤将範氏

DWをエディタとしてとらえた場合に便利なキーボードショートカットの紹介
キーボードショートカットのカスタマイズについても紹介

DWに限らず、キーボードショートカットを覚えているといないとでは作業スピードが違いますよね。スライドで紹介されていた一覧のメモが無いので、自分がよく使うところを挙げてみます。スミマセン。

Ctrl+Alt+I（画像挿入）
Ctrl+Alt+V（新規編集可能領域）
Ctrl+U（環境設定）
Ctrl+Shift+P（段落挿入）
Ctrl+1?6（見出し1?6挿入）
Ctrl+G（行移動）
Ctrl+T（クイックタグ編集）

オリジナルの割り当てで使ってるのは以下の通り。

Ctrl+H（ソースフォーマットの適用）
Ctrl+K（テンプレートプロパティ）
Ctrl+-（ビューの切り替え）

特に最後の「Ctrl+-」は、昔のバージョンではビューの切り替えだったんですよ、確か。それに慣れちゃっているので新しいマッピング（表示比率変更）が許せず変更（笑）。ソースフォーマットの適用は割り当てしておくととても便利。ソースフォーマットの適用がクセになります。
それと、タブインデントはTab、Shift+Tabのほうが覚えやすいかも。

大喜利10：生活に役立つ小ネタ集

勇士：アドビシステムズ(株) 林岳里氏

長い間使われているファイルは、タグに大文字小文字が混在
→環境設定・コードフォーマット「常に無視する・タグの大文字・小文字」にチェック
コードフォーマットがぐちゃぐちゃ
→デザインビューで全部コピー、そのままペーストするとコードフォーマットが適用される
検索・置換のテクニック
- 選択したテキストだけ検索対象にする
- クエリー機能（よく使う検索条件を保存しておく）の活用
- 特定のタグを対象にした検索
- 正規表現を使った検索
DWで機種依存文字の置換、半角全角の交換（ができる新作拡張のデモ）

知らなかった正規表現自分メモ

$1 → 後方参照
+ → 1回以上の繰り返し（\d+ とか）
(AAA|BBB) → ()囲みでひとつの単語扱い

正規表現の検索置換はテキストエディタでも使うので、もっとつっこんで覚えたいですね。

—————————————
約2時間の大喜利でしたが、惜しくも時間切れになってしまったりというところもありました。しかし、2時間で10のネタを聞ける機会など滅多にありませんから！勇士の皆さん、お疲れさまでした。

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

イベントも終盤へ。Adobe マーケティング本部　西村さんによる関連機能の紹介。これらの拡張は追ってAdobeのサイトで公開されるとのことです。MT4.1の拡張はCS3しか対応していないのかな…。

Dreamweaver関連機能

拡張機能の紹介
Adobe Developer Connectionの紹介
このイベントに合わせて開発された新拡張機能の紹介
- iMode拡張機能（New）→アンカーテクノロジー植木さんによるデモ
- 全角・半角変換機能（New）→大喜利10で林さんが紹介
- Dreamweaver CS3拡張機能 for Movable Type4.1（New）→<$MT?$>での入力ができるようになった
- Adobe Air extension for DW
- GL2DW→Go LiveからDWへの乗り換えに使用

Adobe – : Adobe Dreamweaver 10周年セミナー：全角・半角変換拡張機能: http://www.adobe.com/jp/devnet/dreamweaver/articles/dw10seminar_conversion_ext.html

Dreamweaver CS4 Sneak Peak

これもかなり気になっていました。AdobeのDoug Winnie氏による、現在開発中のCS4の紹介です。（会場では同時通訳）怒濤の大喜利にちょっとお疲れ気味の会場が、にわかにざわめき立ちます。
以下の新機能は開発段階でのもので、最終的に搭載されない可能性もあるとのこと。ライブコードはFirebugでソースコードを確認する感覚に近かったですね。

開発段階なので、CS3となっているがCS4のインターフェイス。

インターフェイスがプラットフォーム共通・他のAdobe製品と同じになる
開いている(X)HTMLファイルが参照している外部ファイルが上部に表示され、クリックすると開かれる
ダイナミックコンテンツの確認が容易になる
- ライブプレビュー：ブラウザでのプレビューせずに、DW上でダイナミックな動作の確認ができる
- ライブコード：動的なコードの書き換わりがDW上で確認できる
- ポーズJavascript（仮称）：ライブプレビューやライブコードで確認しているときに、特定の状況で一時停止し、状況を一覧表示できる
CSSファイルを保存しなくてもライブプレビューにレンダリング結果が反映される
Split Code View：一画面の上部にCSS、下部に(X)HTMLを表示するといった分割表示が可能に

2月28日、IT Proにダグラス氏のインタビューが掲載されていました。（インタビュア：矢野りんさん）

次期DreamweaverはWindows版とMac版ですべてのUIを統一：ITpro: http://itpro.nikkeibp.co.jp/article/Interview/20080226/294771/

その後

アンケートに回答すると冒頭で触れたDWオリジナル扇子を頂けるというので急いで記入、出口で扇子とビアファインをもらって会場を後に。いやー久々に濃い時間を過ごせました。

大喜利もメモをとる隙もないくらいのスピードで、その分聞くこっちも集中しなきゃって緊張しましたね。オジサンズ11でやっていた時限スピーチも然りですが、短時間に要点まとめて話せるっていうのは本当にすごいですね。全く持ってトーク下手な自分、もう少し鍛えようと思った次第です。

そう言えば、このイベントをブログで紹介して応募して選ばれた3名に、出演者も着ていた緑色の法被がもらえるそうですが、アレ着てくるくる回ったら作業も30倍くらい速くなりますかね。いや、それは冗談ですけどｗ。

さ、大喜利のサイトアップが楽しみです。

※このエントリで使っている写真はじめ、その他Flickrにアップされています。（並び順ぐだぐだですけども。）
→ スライドショー

今日の戯言>
このサイトのブログ用エディタ、実はDWです。（笑）