Webデザイナー向けのツールは大きく進化しました。Webページ制作者が、仕事のために様々な粗悪なプログラムを使い分けて苦労する必要はもうありません。コーディングが苦手なグラフィックデザイナーでも、HTMLに飽き飽きした人でも、その中間の人でも、自分のスキルレベルに合ったWebツールがきっと見つかるはずです。
現在、Macromedia の 299 ドルの Dreamweaver 3 (アップグレード版は 129 ドル、800/457-1774、https://www.macromedia.com) が発売され、使いやすいビジュアル ツールと、すべての Web ページの基盤となる HTML コードへの高速で強力なアクセスをこれまでにない組み合わせで提供しています。
この新バージョンでは、プログラムの従来の強みを生かし、共同チームが共同でサイトを構築できるようにする多数の機能が追加されています。もちろん、新しい Fireworks 3 (サイドバー「Fireworks 3 の反撃」を参照) など、Macromedia の最新の他のプログラムもサポートされています。
より良いウェブページ
個々のページの品質は、Web 開発者としてのスキルを測る最終的なテストです。Dreamweaver 3 はこの点でも期待を裏切りません。新しい機能により、最高品質の Web ページをより簡単に、より速く作成し、期限内に間に合わせることができます。
オンデマンドタグ
Dreamweaver 3の最も革新的な新機能は、おそらくクイックタグエディタでしょう。これは、ビジュアル編集環境のまま、任意のオブジェクトのHTMLコードを表示・編集できるポップアップウィンドウです。以前は、コードにアクセスするには、ビジュアル編集から切り替えてHTMLウィンドウを開く必要がありました。クイックタグエディタを使えば、ドキュメントの表面下の奥深くまで覗き込むことができます。
 |
| オンデマンド コード コマンド + T を押すと、Dreamweaver のグラフィカル インターフェイス内から HTML コードにすぐにアクセスできるようになります。 |
クイックタグエディターを起動するには、オブジェクトを選択し、「変更」メニューから「クイックタグエディター」を選択するか、Command+T キーを押します。クイックタグエディターが開き、そのオブジェクトに関連付けられたHTMLが表示されます（スクリーンショット「オンデマンドコード」を参照）。コード作成を支援するため、クイックタグエディターで入力中に一時停止すると、ポップアップヒントリストが表示され、Dreamweaverが認識できるすべてのHTMLタグのリストが表示されます。ヒントリストは状況に応じて変化するため、特定のタグで一時停止すると、そのタグの属性リストが表示されます。
クイックタグエディタは素早い編集に最適で、編集結果はすぐに確認できます。例えば、前のテーブルから継承したテーブルで、境界線の幅が10ピクセル、セル間隔が8ピクセルだとします。よりすっきりとした見た目にしたい場合は、テーブルを選択し、command+Tキーを押してクイックタグエディタを呼び出します。「タグの編集」ウィンドウで、 border=10をborder=1 に 、 cellspacing=8 をcellspacing=0 に 変更します。Enterキーを押して変更を確定すると、テーブルは新しい外観になります。これらの属性は、フローティングプロパティパレットを使用して変更することもできますが、HTMLコードに精通している人にとっては、クイックタグエディタを使用する方がはるかに使い慣れた効率的な変更方法でしょう。
履歴パレット
間違った操作を取り消せるのは良いことですが、ほぼ無制限に取り消せるのはさらに素晴らしいです。Dreamweaver 3の新しいヒストリーパレットは、これまでの操作を記録し、スライダーバーを使って操作を前後に移動できます（取り消し回数は設定できますが、ほとんどの人はデフォルト設定の500回を超える必要はないでしょう）。必要に応じて、1つまたは複数のステップを選択してやり直すこともできます。
ただし、元に戻す機能はキーボードからの操作に限られます。マウスで表をドラッグした場合、履歴パレットはその操作を追跡して繰り返すことはできません。ただし、キーボードコマンドで表の属性を挿入して指定すれば、好きなだけ操作を繰り返すことができます。
 |
| 履歴の繰り返し Dreamweaver の履歴パレットで一連のエントリを選択し、「コマンドとして保存」を選択してマクロに変換できます。 |
複雑な書式設定をたくさん行った後、同じ手順を保存して、同じ作業を繰り返さなくて済むようにしたいと思ったことはありませんか？Dreamweaver 3なら、それが可能です。操作は一度だけ実行し、可能な限りキーボードを使うようにしてください。その後、ヒストリーパレットで手順を選択し、パレットのポップアップメニューから「コマンドとして保存」を選択します（スクリーンショット「ヒストリーの繰り返し」を参照）。新しいコマンドに名前を付けると、「コマンド」メニューに表示されます。
舞台裏では、Dreamweaver が手順を JavaScript コードに変換し、そのコードを再利用可能な形式で保存しています。
新しい種類のスタイル
どのような種類のサイトを構築する場合でも、サイト全体で使用する特定の文字属性セットを既に決めている可能性が高いでしょう。例えば、Arial または Helvetica で通常より少し大きい文字、濃い青、太字などです。これまで、ほとんどのプログラムでは、 ‹font› タグ属性またはカスケーディングスタイルシート (CSS) を使用してテキストをフォーマットできました。Dreamweaver 3 でもこれらの機能は維持されています。しかし、どちらのアプローチにも問題があります。CSS スタイルはバージョン 4.0 以降のブラウザでのみ確実に表示され、その場合でも、エンドユーザーのブラウザのバージョンによって Web ページの見た目が異なる場合があります。
一般に、 ‹font› タグの属性はどのブラウザでも正確に表示されますが、前の例のように複数の属性 (太字、青、大きい) が必要な場合は、各テキスト選択に対してそれらを個別に繰り返し適用する必要があります。
Dreamweaver 3 では、HTML スタイルと呼ばれる機能で、 CSS の使いやすさと ‹font›タグ属性の互換性がようやく統合されました。
 |
| Stylin' HTML スタイルは、ワードプロセッサ プログラムのスタイル シートとよく似た動作をします。属性を設定したら、好きな場所に適用できます。 |
新しいHTMLスタイルパレットには、作業中のサイトのすべてのスタイルが表示され、文字スタイルと段落スタイルの両方が保存されています。スタイルを適用するには、テキストを選択してスタイル名をクリックするだけです。新しいスタイルを作成するには、既に希望の書式に設定されているテキストを選択し、「テキスト」→「HTMLスタイル」→「新規スタイル」を選択します。表示されるダイアログボックスで、スタイル名を入力し、必要に応じてフォントや段落属性を追加または変更します（スクリーンショット「Stylin'」を参照）。
Dreamweaver は、サイトの HTML スタイルをサイト フォルダー内の XML ドキュメントに保存し、サイトで作業するすべてのユーザーがそのスタイルを利用できるようにします (XML は Extensible Markup Language (拡張マークアップ言語) の略で、HTML のより柔軟な類似言語であり、Dreamweaver ではこれを使用して、スタイル、独自のメニュー、ページ テンプレートなど、さまざまな種類のデータを保存しています)。また、個別のスタイル シートを使用すると、他のワークグループとの共同作業が容易になり、複数のサイトを持つ企業が同じ XML スタイル シートを使用して一貫した外観を維持できるようになります。
時間の節約
Dreamweaver 3 は、大きな新機能を搭載し、さらなるパワーを求めるあなたの欲求を満たしてくれるはずです。さらに、このプログラムには、作業をより速くし、退屈さを軽減する、小さくても便利な改良点も数多く搭載されています。
もう一度やりましょう!
今年の「素晴らしい、でもなぜ今までできなかったのか？」賞は、新しい「最後のアクションを繰り返す」機能に贈られます。この機能は、履歴パレットと連動して、コマンド + Y を押すことで最後に行った操作をやり直すという非常に便利な機能を提供します。
この機能をHTMLスタイルと組み合わせることで、面倒なテキスト書式設定作業を迅速に処理できます。例えば、ページ全体に小見出しがあり、それらすべてにスタイルを適用したいとします。これらの属性を含むHTMLスタイルを定義し、最初の小見出しに新しいスタイルを適用します。次の小見出しをマウスで選択し、Command + Yキーを押すと、スタイルの適用が繰り返されます。
テンプレートを使用して基盤を設定する
Cobwebbyコードのクリア
ウェブサイトはただ構築して放置しておくべきではありません。活気ある状態を維持するには定期的なメンテナンスが必要です。古いHTMLコードのクリーンアップは、おそらく想像以上に面倒な作業であり、できれば簡単に済ませたいものです。以前使っていたWYSIWYGツール（Adobe PageMillなど）で独自タグを使って残した古いコードをクリーンアップする必要があるかもしれません。あるいは、以前のバージョンのHTMLから、古くて廃止されたタグを削除したい場合もあるでしょう。Dreamweaver 2または3の検索・置換機能と正規表現をガベージコレクターとして活用できます。ここでは、忌み嫌われる 「blink」 タグを例に、その方法を説明します。
「編集」メニューから「置換」を選択します。「検索」の横にあるポップアップメニューから、変更内容を現在の文書、現在のサイト、または選択したフォルダに適用するかどうかを選択します。
「検索する文字列」ポップアップ メニューを「HTML ソース」に設定し、「正規表現を使用する」チェック ボックスをクリックします。
「検索文字列」ボックスに 「‹blink[^›]*›」と入力します。「置換後の文字列」ボックスには何も入力しないでください。この正規表現（「Web: 正規表現によるHTMLの変換」、 Create 、1998年11月号を参照）は、開始 タグ「‹blink› 」を選択し 、タグに属性がある場合はそれらも選択します。
「置換」または「すべて置換」ボタンをクリックします。
終了タグを削除するには、 「検索する文字列」ボックスに 「‹/blink›」と入力し、「置換」または「すべて置換」ボタンをもう一度クリックします。
インスタントサイトプロトタイピング
Dreamweaverのサイトマネージャ機能は、主に壊れたリンクの検出と修復、リモートサーバーからのファイルのアップロードとダウンロード、そして一度に1人だけがファイルを編集していることを確認するために使われることが多いです。しかし、サイトマネージャは、サイトの初期構造とページの作成とマッピングにも最適です。オフラインでサイトの構造を解明するという大変な作業（1999年11月号の「Dress It Up」を参照）を終えたら、サイトマップウィンドウで、個々のページとリンクされたページをサイトに追加し、ページタイトルとページ間のテキストリンクを設定できます。
個々のページのデザインにこだわる前に、サイト全体の構造を整えておくと、サイトの構成が整理され、ナビゲーションがしやすくなります。必要なページを作成したら、サイトマップウィンドウからページを開いてデザインを開始できます。
サイトの構築を始めるには、まず「サイト」メニューから「新規サイト」を選択し、サイト名とローカルサイトフォルダを指定して新しいサイトを定義します。次に、「ウィンドウ」メニューから「サイトマップ」を選択します。新しいサイトの作成と同時にホームページファイルも作成されるため、サイトのホームページのアイコンが「サイトマップ」ウィンドウに表示されます。
 |
| サイト スケルトン Dreamweaver 3 を使用すると、ページのデザイン作業に取り掛かる前に、リンクを含むサイトの構造を作成できます。 |
新しいリンクファイルを作成するには、ホームページのアイコンをCtrlキーを押しながらクリックし、コンテキストメニューから「新規ファイルにリンク」を選択します。表示されるダイアログボックスで、新しいHTMLファイルの名前、ページのタイトル、リンクテキストを入力します。「OK」をクリックすると、DreamweaverによってHTMLページが作成され、サイトマップウィンドウに新しいページのアイコンが表示され、元のページと線で接続されます。ホームページからさらにリンクされたページを作成するには、この手順を繰り返します。
同じ方法で、任意のページにテキストリンクを追加することもできます。ページのテキストリンクは、サイトマップ上では、親ページの直下に小さなページの列として表示され、親ページに接続されます（スクリーンショット「サイトスケルトン」を参照）。
Microsoft Office の後片付け
多くのWebコンテンツは、Microsoft Word文書から生まれます。Wordでは文書をHTML形式で簡単に保存でき、テキストとグラフィックを扱えるため、Dreamweaverなどのプログラムは不要だと思うかもしれません。
非常に小規模なサイトであれば確かにその通りかもしれませんが、大規模なウェブサイトではWordの限界がすぐに明らかになります。問題は、余分なコードによってWordで生成されたHTML文書が肥大化し、ページの読み込みと表示が本来よりも遅くなることです。ページが大きくなるほど、モデムを経由してブラウザに到達するまでの時間が長くなり、ブラウザが複雑なコードを表示するために費やす時間と労力も増えます。
Dreamweaver 3では、この問題を解決し、新機能の「Word HTMLをクリーンアップ」コマンドによって膨大な量の面倒なコード削除作業を省きます。Wordで生成されたHTMLファイルでこのコマンドを実行すると、ファイルサイズを最大50%も削減できます。
Dreamweaver 3には、Microsoft Excelユーザー向けのサポート機能も用意されています。Excelのスプレッドシートやその他の表をWebページとして保存し、DreamweaverでMicrosoftの乱雑なHTMLを整理する代わりに、新しい「表形式データの挿入」コマンドを使用して、テキストのみで区切られたファイルをきれいな表に変換できます。その後、Dreamweaverの比類のない表編集機能と書式設定機能を使用して、データの外観を微調整できます。
チームワークの向上
ウェブサイトが大規模化、複雑化し、多くの企業の企業戦略の中核を担うようになるにつれ、一人、あるいは小規模なチームでさえも対応しきれなくなっています。大規模な企業サイトの構築には、デザイナー、コンテンツライター、グラフィックアーティスト、プログラマーなど、数十人が関わることも珍しくありません。プロフェッショナルレベルのツールには、チーム管理機能が不可欠です。Dreamweaver 3では、サイト管理機能が改善され、ワークグループ内でのサイト共有を容易にする多くの機能が追加されています。
協力者への最新情報の通知
Webチームが直面する最大の悩みの一つは、特定のファイルに誰がいつどのような変更を加えたかを追跡することです。一部のチームは、変更の詳細を記載したメールを送信することでこの問題に対処しようとします。より高度なチームでは、変更記録を保管するために中央データベースを使用することもあります。これらの解決策のいずれにも、変更記録がファイルに保存されないため、他の人が見落としやすいという問題があります。
Dreamweaver 3 の新機能「デザインノート」は、HTML ページの変更履歴を記録し、日付付きのコメントを追加して同僚が閲覧・編集できるようにします。HTML ページのデザインノートは独立した XML ドキュメントとして Dreamweaver の「Notes」フォルダに保存されるため、制作ファイルのサイズが大きくなることはありません。また、フォルダはアップロードされないため、サーバーの容量を無駄にすることもありません。
サイトとの同期を維持する
Dreamweaver 3は、ローカルサイトフォルダとリモートサーバーを同期する新機能を搭載し、競合のAdobe GoLiveに追いつきました。この機能により、古いページで作業を続ける必要がなくなります。ファイル同期機能は、両方の場所にあるファイルを比較し、置き換えが必要なファイルを通知します。ローカルファイルとリモートファイルのどちらを優先するかを選択できるほか、Dreamweaverが移動を提案するすべてのファイルの概要が表示されます。プログラムの推奨はファイルごとに上書きできます。
サイトから大量のファイルを削除した場合、Dreamweaver はローカル側またはリモート側のファイルを削除して、両方のサイトの同期を保つことができます。
空は限界だ
カスタマイズはDreamweaverの魅力の重要な部分であり、Dreamweaver 3ではほぼ誰でもその拡張性を活用できます。例えば、魅力的なコンテンツをサイトに載せていると、遅かれ早かれ他のサイト管理者がそのコンテンツを自分のサイトのフレームに取り込んでしまうでしょう。JavaScriptを使ってプログラミングする方法さえ知っていれば、自分のページを他のサイトのフレームから飛び出させることもできます。
Dreamweaver 2では、JavaScriptを使ってプログラムに機能を追加するのがはるかに簡単になりました。HTMLとJavaScriptに精通していれば、新しい動作やコマンドを追加したり、プログラムのプロパティインスペクターを変更したりすることもできました。そのため、他の人のフレームセットから自分のページを取り出すスクリプトを追加するのは、JavaScriptファイルをDreamweaverのActionsフォルダにドロップするだけで簡単になりました。Dreamweaverの拡張性をサポートするために、JavaScriptコーダーによる小規模な開発が生まれ、何百もの新しいアクション、オブジェクト、コマンドが開発されました。実際、Dreamweaverの拡張機能の作成を検討している場合は、Dreamweaver拡張機能データベース（https://www.idest.com/cgi-bin/database.cgi）をチェックして、自分のアイデアが既に誰かによって考案されていないことを確認してください。車輪の再発明は意味がありません。
Dreamweaver 3では、このカスタマイズがほぼ不条理なレベルにまで達しています。Dreamweaverの文字通りすべて（メニュー、ダイアログボックス、パレット、関数など）は、XMLファイル、HTMLファイル、そしてJavaScriptの組み合わせによって定義されています。
Dreamweaverのメニューシステム全体にアクセスできるため、企業の各部門やWebデザイン会社は、キーボードショートカット、メニューコマンド、プロパティインスペクターなどの機能を追加または削除することで、自社やクライアントのニーズに合わせて、ほとんど手間をかけずにDreamweaverのカスタムバージョンを作成できます。カスタマイズしたDreamweaverをクライアントに提供すれば、クライアントは日常的なコンテンツ変更や、テンプレートから新しいページを作成してもデザインを損なうことなく作業できます。これにより、日々のコンテンツメンテナンスから解放されます。（Dreamweaver 3を自分好みにカスタマイズする方法については、サイドバー「Dreamweaver 3を魔法のように使いこなす」をご覧ください。）
最後の言葉
Dreamweaver 3は、既に優れたWebデザインツールの素晴らしい後継バージョンです。HTMLスタイルやMicrosoft Officeクリーンアップなどの新機能により、Dreamweaverでのページ作成やサイト全体の作成がこれまで以上に簡単になりました。HTMLのコントロールはそのままに、クイックタグエディタなどのツールが強化されています。Dreamweaver 3は上級のWebサイト開発者をターゲットとしており、Macromediaは熱心なWebマニアの要望に応えて機能を追加し続けています。
Dreamweaver 3の登場は、Webデザインツールにおける最新のイノベーションの幕開けであり、Macromediaの最大のライバルであるAdobe SystemsもGoLiveの次期バージョンで反撃してくることは間違いないだろう。しかし、Dreamweaver 3は、高度なWebパブリッシングツールにもイノベーションの余地が十分にあることを確かに示している。AdobeとMacromediaが今後も激しい戦いを続けるとしても、真の勝者はプロのWebサイト開発者であり、彼らはこの熾烈な戦いから生まれるソフトウェアの改良から確実に恩恵を受けるだろう。
寄稿編集者 TOM NEGRINO は、『JavaScript for the World Wide Web: Visual QuickStart Guide、第 3 版』(Peachpit Press、1999 年) の共著者です。
著者は、『Dreamweaver 2 Bible』(IDG Books World-wide、1999 年) の著者 Joseph Lowery 氏と The Fantastic Corporation の Massimo Foti 氏に、Dreamweaver に関するヒントと知見を提供していただいたことに感謝の意を表します。
2000年2月号 79ページ
Dreamweaver 3 を魔法のように使いこなす
誰もがマジシャンの演技を見るのが好きです。しかし、マジックを単純に娯楽として楽しむ人がいる一方で、マジシャンがどうやってそれをやったのか理解するまでイライラしてしまう人もいます。
Dreamweaver 3はまさにそのマジシャンのようです。ただ座ってその魔法を楽しむこともできますし、ソフトウェアの舞台裏に潜り込んで、その技を自分で学ぶこともできます。後者の利点は、技を変更できることです。帽子からウサギを出すだけでなく、ウサギをネズミや象に変えることさえもできます。必要なのは、 HTML 、 JavaScript 、 XMLという3つの魔法の言葉だけです 。
Dreamweaverフォルダ内のConfigurationフォルダを見つけることから、知識の探求を始めましょう。このフォルダとそのサブフォルダには、数百ものHTML、JavaScript、XMLファイルが含まれています。Dreamweaverはこれらのファイルをほぼすべての処理に使用しており、これらのファイルのいずれかを変更すると、プログラムの動作が変化する可能性があります。
帽子からウサギが出てきた
Dreamweaver を変更する際は、適切な効果を得るために適切なファイルを変更する必要があります。ここでは、Configuration フォルダ内の各ファイルについて解説します。何がどこに隠れているかが一目瞭然です。（注意：ファイルを変更する前に、必ずコピーを作成してください。そうすれば、うまくいかなかった場合は、元のファイルを元に戻してやり直すことができます。）
行動
このフォルダには、「Actions」と「Events」という2つのサブフォルダがあります。イベントとアクションを原因（イベント）と結果（アクション）の関係で組み合わせることで、Dreamweaverのビヘイビアを作成できます。「Events」フォルダは、ブラウザの種類ごとに1つのHTMLファイルで構成されており、各ファイルにはブラウザがサポートするイベントのリストが含まれています。「Actions」フォルダには、Dreamweaverで実行可能なすべてのアクションに対応するHTMLファイルが含まれており、その多くには対応するJavaScriptファイルがあります。
 |
| プレイしてみましょう。 この Dreamweaver ダイアログ ボックスの中心となるのは HTML ファイルです。 |
例えば、ユーザーが画像にマウスオーバーしたときにサウンドを再生したいとします。onMouseover イベントと「サウンドを再生」アクションを組み合わせる必要があります。「サウンドを再生」を選択すると、Dreamweaver は「Actions」フォルダにある「Play Sound.htm」ファイルに定義されたダイアログボックスを表示します（スクリーンショット「Let's Play」を参照）。「Actions」フォルダには、「Play Sound.js」も保存されており、これはサウンドを再生するために Dreamweaver がページに挿入する JavaScript コードです。
コマンド
Dreamweaver の「コマンド」メニューの各項目は、「アクション」フォルダ内の HTML ファイルに対応しています。（ビヘイビアーはページにアクションを追加しますが、コマンドはページ自体に対して作用します。）たとえば、「HTML のクリーンアップ」コマンドは、ダイアログボックスを「HTML のクリーンアップ.htm」ファイルから取得し、JavaScript ファイル「HTML のクリーンアップ.js」が実際のクリーンアップを処理します。
検査官
このフォルダには、特定のタグのプロパティインスペクターフローティングパレットを変更するHTMLファイルとJavaScriptファイルが含まれています。 例えば、 ‹title› タグを変更する場合、プロパティインスペクターパレットはtitle.htm HTMLファイルからダイアログボックスを取得します。そして、title.js JavaScriptファイルがページのタイトル変更の実際の処理を実行します。
メニュー
このフォルダには、menus.xmlとMMフォルダの2つの項目が含まれています。MMフォルダには、Dreamweaverのすべてのメニューに含まれるすべてのコマンドに対応するファイルが格納されています。menus.xmlファイルは、Dreamweaverに対し、コマンドをどのメニューにどの順序で表示するか、またどのキーボードショートカットを割り当てるかを指示します。Dreamweaverのメニューを変更するには、このファイルを変更するだけです。このファイルから行を削除すると、Dreamweaverに詳しくないユーザーでも使いやすく、合理化されたシンプルなメニューセットを作成できます。
オブジェクト
このフォルダを初めてインストールすると、Characters、Common、Forms、Frames、Head、Invisibles の 6 つのサブフォルダが作成されます。これらのサブフォルダはそれぞれ、オブジェクトパレットのサブメニューと挿入メニューのエントリに対応しています。HTML ファイルに加えて、各オブジェクトには、Dreamweaver のオブジェクトパレットに表示されるアイコンを含む GIF ファイルも用意されています。新しいオブジェクトを追加するには、GIF ファイルと HTML ファイルを追加するだけです。新しいサブフォルダを追加するには、Finder で新しいサブフォルダを作成し、そこに必要なオブジェクトを配置します。
起動する
Dreamweaverを起動するたびにコマンドを実行したい場合は、適切なHTMLファイルを作成してスタートアップフォルダに配置するだけです。同様に、Dreamweaverを終了するたびにコマンドを実行したい場合は、HTMLコマンドファイルを含むシャットダウンフォルダ（インストール時には存在しません）を追加します。
上記の各フォルダーで、囲まれているファイルを変更すると、Dreamweaver 内でのコマンドまたは動作の動作を変更できます。
何も隠してないよ…
Dreamweaverでは、 拡張機能を追加、変更、削除できるだけでなく 、変更内容を他のユーザーに渡すこともできます。Dreamweaverの拡張機能をダウンロードできるウェブサイトも数多くありますが、中でも特におすすめなのはDreamweaver Depot（https://people.netscape.com/andreww/dreamweaver/）とDreamweaver Extensionsデータベース（https://www.idest.com/cgi-bin/database.cgi）です。
ダウンロード可能な拡張機能と独自の変更を組み合わせれば、誰とも違う、あなたの仕事の習慣にぴったり合うDreamweaver 3を作成できます。お気に入りのWebオーサリングプログラムで実現したトリックが視聴者を驚かせたら、笑顔で「魔法のようです」と言いましょう。
DORI SMITHは、Tom Negrinoと共著した『JavaScript for the World Wide Web: Visual QuickStart Guide』第3版（Peachpit Press、1999年）および『Java for the World Wide Web: Visual QuickStart Guide』（Peachpit Press、1998年）の著者です。Fireworks 3が反撃
Webデザイナーの仕事は、ページを組み立てるだけではありません。ページにはコンテンツが必要で、多くの場合、大量のグラフィックを用意する必要があります。Dreamweaver 3の関連製品である199ドルのWebグラフィックユーティリティ「Fireworks」（アップグレード版は99ドル、Dreamweaverとのセット版は399ドル）もアップデートされたのは幸運です。
FireworksはAdobe Photoshopとの厳しい戦いを強いられています。AdobeはPhotoshop 5.5にWebグラフィック機能を組み込み、FireworksのライバルであるImageReadyをすべてのプログラムに同梱しています。Fireworks 3は、その対抗策として、Photoshopのベテランが愛用するグラフィックエフェクトを多数搭載するとともに、Webデザイナーの初心者からベテランまで、誰もが満足できる優れた自動化機能もいくつか追加しました。
落ち着いて
Macromedia の Fireworks に対するビジョンを一言でまとめると、「そんなに頑張らないで!」ということです。Fireworks 3 の新機能のほとんどは、繰り返しをなくしながら最大限の柔軟性を提供することを目的としています。
この指示を最もよく体現しているのが、新しいヒストリーパレットです。一見すると、Photoshopのヒストリーパレットの安っぽい模倣にしか見えないかもしれませんが、その華やかさには欠けるその裏には、ミスをなくすだけでなく、ボタンをクリックするだけでタスクを自動化できる便利なツールが隠されています。
歴史を作る
 |
| エラーの余地 履歴パレットを使用すると、現在のドキュメントと以前のバージョンをすばやく切り替えることができます。また、ポップアップ メニューを使用して、後で再利用できるようにコマンドのグループを保存することもできます。 |
ヒストリーパレットはFireworksの「取り消し」コマンドと似ています。しかし、Fireworksでは最近の操作を一つずつ遡る必要があるのに対し、ヒストリーパレットでは数回のクリックで複数の編集手順を取り消したりやり直したりできます（スクリーンショット「Room for Error」を参照）。
Fireworks は作業中に、ヒストリーパレットに最近のすべてのアクションの完全なリストを記録します。以前の設定に戻すには、パレットのスライダーをステップリスト上で上下に動かすだけです。ページはデザインの選択された段階を反映して更新されます。
例えば、10分かけて画像に様々な変更を加えたものの、今となっては変更内容が本当に必要かどうか確信が持てない、そんな時、ヒストリーパレットを前後にクリックするだけで、変更前と変更後を素早く比較し、変更内容を保存する価値があるかどうかを判断できます。もし保存する価値があると思わないなら、スライダーを最後に保存したバージョンに合わせて、そのバージョンに戻しましょう。誤って以前のバージョンのドキュメントに上書きしてしまった場合でも、「保存」コマンドを取り消すことができます。
履歴パレットに記録されるアクションの数は任意に選択できます (デフォルト設定は 20)。ただし、保存するアクションの数が増えるほど、Fireworks が Mac のメモリに負担をかけることになります。
コマンドのやり直し
コマンドを元に戻す機能と同じくらい印象的なのは、 自由にやり直す機能です 。Dreamweaver 3と同様に、Fireworks 3ではヒストリーパレットから複数のアクションを選択し、独立したコマンドとして保存できます。
例えば、それぞれ異なる形状の黒いボタンが10個あるナビゲーションバーを作成したとします。最終段階で、クライアントがこれらのボタンをすべて緑色にし、エッジを斜めにし、テクスチャを適用することを決定しました。ボタンを一つずつ変更するのではなく、最初のボタンだけを変更し、「履歴」パレットから関連する手順を選択し、パレットのポップアップメニューから「コマンドとして保存」を選択して名前を付けます。あとは、残りのボタンを一つずつ選択し、「コマンド」メニューから新しいコマンドを選択するだけです。
コマンドはJavaScriptファイルなので、Mac版FireworksでもWindows PC版Fireworksでも、同様の変更が必要な同僚と共有できます。プロジェクトのデザインスペック（例えば、ベベルボタンを生成するための標準オプション）をJavaScriptファイルに標準化することで、プロジェクト全体のグラフィックの見た目を統一できます。
画像をコントロールする
Fireworksで写真を編集するのは、時にストレスフルな作業です。おそらく、多くのFireworksユーザーが定期的にPhotoshopに戻ってしまう原因となっているでしょう。Fireworksの最大の弱点は、ビットマップ画像の編集機能が限られていることです。例えば、以前のバージョンでは、読み込んだ写真のコントラストや色を調整する機能がありませんでした。これらは画像編集ツールにとって最も基本的な機能です。PhotoshopファイルをFireworksに取り込むと、レイヤーやレイヤー効果を編集することができなくなっていました。
真の姿
Fireworks 3では、Macromediaはこれらの欠点のいくつかに対処し始めました。最も有用な改善点は、明るさとコントラスト、色相と彩度、レベルとカーブといった画像補正ツールの追加です。これにより、基本的な画像編集のみが必要な写真の修正に、Photoshopなどの別のプログラムを使用する必要がなくなりました。デザイナーは、Fireworksドキュメント内で、色調整、傷の除去、写真のシャープ化などをすべて行うことができます。
Fireworks 3では、お気に入りのPhotoshopフィルターやプラグインを組み込むこともできます。これらのフィルターをベクター画像やテキストに適用しても、編集不能になることはありません。以前のバージョンでは、モーションブラーや球面化などのフィルターを適用する前に、テキストやベクター画像をビットマップ画像に変換していましたが、Fireworks 3では選択範囲の元の形式が保持されます。会社のロゴにFire（Alien Skin SoftwareのEye Candyの一部）などのフィルターを適用した後に誤字脱字に気付いても、最初からやり直す必要はありません。テキストツールで文字を修正するだけで、新しいテキストにフィルターが適用されます。
他の画像編集プログラムを使用する必要がある場合でも、問題なく使用できます。Fireworks 3では、ネイティブのPhotoshopおよびAdobe Illustratorドキュメントを開き、編集可能なレイヤーとエフェクトパレットを保持します。
特撮
 |
| エフェクトの再適用 エフェクトパレットを使って、お気に入りのフィルターやプラグインを試してみましょう。パレットには画像に適用されたすべてのエフェクトが記録されており、対応するチェックボックスでエフェクトのオン/オフを切り替えることができます。 |
刷新された「エフェクト」パレットは、決断力のないデザイナーにとってまさに夢のような機能です。「ヒストリー」パレットと似た性質を持ちますが、エフェクトパレットはより柔軟でありながら、より包括的な機能を備えています。画像に適用されたフィルターの完全な記録を保存し、編集可能です。各画像には専用の「エフェクト」パレットが用意されており、いつでも編集できます。フィルターはいつでも個別にオン/オフにできるので、データ損失を心配することなく、フィルターとエフェクトの完璧な組み合わせを見つけることができます（スクリーンショット「エフェクトの再適用」を参照）。
例えば、ウェブサイトに組み込みたい写真があるとします。少し色あせたような印象にしたい場合は、色相と彩度の設定を微調整します。仕上げに、放射状ぼかしとノイズフィルターを適用します。もし、加工後に放射状ぼかしが目立ちすぎると感じたら、「効果」パレットのチェックボックスをオフにするだけで、そのフィルターの効果は消え、他の効果はそのまま残ります。後で気が変わった場合は、チェックボックスをオンにしてフィルターを再びオンにするだけで、元のぼかし効果を復元できます。
ヒストリーパレットと同様に、エフェクトの組み合わせを保存して他の画像に適用することで、作業効率を最大限に高めることができます。つまり、完璧なエフェクトの組み合わせを見つけたら、ワンクリックですべての写真に再利用できます。
百聞は一見に如かず
ウェブデザインで最もイライラさせられる点は、表示環境をほぼ完全に制御できないことかもしれません。ウェブブラウザ、モニター、オペレーティングシステム（同じオペレーティングシステムでも複数のバージョンが存在する場合を含む）の違いにより、閲覧者が実際に何を見ているのかを正確に把握することは不可能です。
ガンマ・フーレイ
ガンマ値は、モニターが画像の中間調をどの程度明るく（または暗く）表示するかを決定します。WindowsはMac OSよりも高いガンマ値を使用するため、Macで美しくレンダリングされた画像が、同僚のPCでは暗く濁って見えることがあります。
多くのWebデザイナーは、Macで写真をやみくもに明るく調整し、Windows PCでも問題なく見えることを期待することで、この違いを補正しようとします。Fireworks 3では、Windowsガンマ設定により、色補正の推測作業を軽減できます。「表示」メニューで「Windowsガンマ」を選択すると、WindowsとMacのガンマを切り替えながら、画像に最適な妥協点を見つけることができます。
簡単なプレビュー
しかし、どんなに素晴らしい画像に見えても、ファイルサイズが大きすぎて閲覧者のコンピュータをクラッシュさせてしまうようでは意味がありません。Fireworks が初期の成功を収めたユニークな機能の一つは、デザイナーが画質とファイルサイズのコンパクトさのバランスを見つけられるように支援した点です。書き出しプレビューウィンドウでは、元の画像の最大4つのバリエーションを同時に表示し、複数の画像設定の違いを素早く比較することができました。
残念ながら、サイズを縮小する変更の効果を確認できるのはそのウィンドウ だけでした 。特定のデザイン要素を GIF または JPEG として保存したときにどのように見えるかを確認するには、[エクスポート プレビュー] ウィンドウを開いて設定を調整し、キャンセルする必要がありました。
もう心配はいりません。Fireworks 3では、ワークスペースを離れることなく、デザインがどのように見えるかを確認できます。ドキュメントウィンドウ上部のタブを使えば、作業領域を瞬時に切り替えられるほか、3つの異なるウィンドウでWeb上でのグラフィックの見え方をプレビューできます。2アップウィンドウと4アップウィンドウでは、同じ画像を複数のビューで表示できるので、異なるファイル形式での結果を比較できます。
プレビュータブを使えば、ロールオーバー（Fireworksのもう一つの特長）をすぐにテストできます。以前は、画像を書き出し、FireworksにHTMLドキュメントを生成させ、そのドキュメントをブラウザウィンドウで開いて初めて、ロールオーバーが正しく動作するかを確認する必要がありました。しかし、プレビューウィンドウに切り替えてマウスオーバーをグラフィック上で動かすだけで、ロールオーバーの動作を簡単に確認できます。
最後の言葉
インターネットの進化は数年ではなく数週間で測られます。企業はサイトを作成して「これで終わり！」とは言いません。むしろ、修正と拡張を継続的に行い、時には毎日のように修正と拡張を繰り返します。その結果、大規模なチームが厳しい期限の中で協力して作業することになります。
FireworksはPhotoshopとの競争に生き残れるだろうか？それはユーザー次第だ。しかし、Dreamweaverとの緊密な連携と、時間を節約する数々の新機能により、Fireworksには確実にチャンスがある。
アシスタント編集者のキャサリン・ランスフォードは、カリフォルニア大学バークレー校ジャーナリズム大学院でデスクトップ パブリッシングを教えています。
