Dreamweaver CS3 ― 10の Tips と拡張機能 ―
今月号の記事
2008年2月20日に開催された Dreamweaver 10周年記念イベント。この中の「Dreamweaver 大喜利」セッション内で10名の勇士に披露していただいた、今すぐ使いたいTipsをまとめてご紹介します。必ず覚えておきたい基本Tipsから、思わず唸りたくなるようなテクニックまで様々ですので、ぜひ皆さんも自身のスキルとして身につけてみてください。また、3月13日にリリースされた Dreamweaver CS3 拡張機能 for Movable Type 4.1 などの役立つ拡張機能についても、併せてご紹介します。
Tips その1：SpryとMovableTypeを連携させる方法
MovableType（MT）でブログサイトを構築されている方も多いかと思いますが、Movable Type 4.1とDreamweaver CS3 の組み合わせることで、ブログの更新作業がとても便利になります。ここで紹介するTipsは、Dreamweaver CS3 に含まれる”Spry framework for Ajax”でソート可能なテーブルを制作し、外部XMLを介在させて、データ更新をMovable Type 4.1で実施する方法です。株式会社スイッチ 鷹野雅弘氏 「Movable Type連携でソート可能なテーブルを自動更新」では、Movable TypeなどのブログをCMS的な入力インタフェイスとして使うことで、コードを気にせず文字を入力し、サイトの更新を可能とする方法を紹介しています。
図1: Dreamweaver CS3 より利用可能のSpryウィジェット(鷹野氏記事より)
Tips その2：Spry Widget を利用した Web フォームの作成方法
Spry framework for Ajaxには、Webフォーム制作に役立つ機能も多く含まれています。株式会社paperboy&co. 藤川真一氏の「Dreamweaver で使いやすい入力フォームをつくりましょう。」では、Spry Widget を利用した Web フォームの作成方法についての Tips を披露されています。藤川氏は「Spry Widget の入力検査は、ユーザがサーバへデータを送信する前にエラーをチェックすることで、ユーザにデータ送信に対する不安を抱かせないようにすることができ、フォーム画面での離脱率の改善が期待できます」と語り、実際にWebフォームを作成する手順も紹介しています。また、Adobe Labs で提供している最新の Spry framework（バージョン1.6.1） を利用する方法も紹介しています。
図2：labs.adobe.com 内の Spry framwork for Ajax ポータル
Tips その3：Dreamweaverのショートカットキーをフル活用する
Dreamweaver を利用し、より効率的な作業を行いたいと考えている方は多いと思います。そのような方々にもぜひ覚えてもらいたいTipsがあります。
Dreamweaver のショートカットキーを覚えて、より効率的に作業を進める方法を挙げている株式会社ワンパク 近藤将範氏の「もうテキストエディタには戻れない」です。近藤氏はWebのフロントエンド（HTML、CSS、JavaScript）の作業だけでなく、バックエンドの作業においても Dreamweaver を使用すれば、さらに作業の効率化と正確さにおいて効果を発揮するとし、テキストエディタで作業されている方にもDreamweaver を利用することを提案しています。
タグ記述のショートカット
図3 : 近藤氏の記事内より抜粋
Tips その4：Dreamweaverでプログラム開発を効率的に
株式会社エイチツーオー・スペース たにぐちまこと氏の「プログラム開発にも活用できちゃう Dreamweaver」では、プログラマの方々に向けて Dreamweaver を利用し、効率よく開発する方法を紹介しています。チームで開発する際には必須といえるチェックイン・チェックアウト機能」や動的コンテンツをチェックする際に役立つ「ライブビュー機能」、よく使うプログラムコードを簡単に再利用可能にする「スニペット」機能など便利な機能を紹介しています。
図4 : Dreamweaver CS3 サイト定義ウィンドウ(たにぐち氏の記事より)
Tips その5：デザインビューをさらに活用する
今から Web デザインを始める方にも、わかりやすく効率的に作業できるTipsを紹介しているアンカーテクノロジー株式会社 神森 勉氏の「デザインビューの活用」です。制作の現場でクライアントとの情報共有で普段から利用されている Word データやテキストデータも Dreamweaver に取り込み、効率よくサイトを作成する Tipsです。また、Amazon Web サービス/XML データをサンプルに、WYSIWYG 環境で XSLT 作成する方法も紹介しています。この記事を読めば、初心者の方でも分かりやすく簡単に制作できる Dreamweaver のXSLT作成機能の特徴を掴むことができます。
Tips その6：コードのフォーマットや正規表現を上手に使う
Dreamweaver には、長年使っている方でも意外と知らないまま過ごしている機能が意外とあります。アドビ システムズ株式会社の林 岳里による「Dreamweaver 使いのための“生活に役立つ小ネタ集”」では、知らなくても自力で解決できるかもしれないけど、知っていれば何度も検索／置換を繰り返すことや、数多くの HTML ファイルのコードを手作業でフォーマットするなどの面倒な作業から解放され、他の作業に時間を割けるような生産性を上げるTipsを紹介しています。コードのフォーマット、検索／置換、正規表現を改めて覚えることで、より快適な Dreamweaver ライフを楽しんでいただけるノウハウが満載です。
Tips その7：テンプレートをフル活用する
大規模開発を今から始める方にも、参考になる情報があります。株式会社ビジネス・アーキテクツ 伊原力也氏の「サッポロビールにおけるテンプレート活用事例」では、大規模サイトでのテンプレート利用方法、そしてクライアント側がサイト更新を行う際にも役立つテンプレートのメリットを解説。「Dreamweaver テンプレートで“作業の可視化”」を提案し、スムーズなサイト運営を成功している例を紹介しています。
図5 : テンプレート領域設定(伊原氏の記事より)
Tips その8：Webサイトのアクセシビリティ対応にDreamweaverを使う
サイト規模の大小に関わらず、Web サイトを構築する方々が気にしなくてはならないものとして、アクセシビリティ対応が挙げられます。株式会社インフォアクシア 植木真氏の「Dreamweaver があれば、アクセシビリティもチェックできる」ではアクセシビリティチェック機能の利用方法、カスタマイズ方法と共に、大規模開発やチーム開発でも便利な裏技を紹介しています。ある人が設定したアクセシビリティファイルを他のメンバー全員で共有する方法などは必見です。
図6 : Dreamweaver CS3 レポートウィンドウ(植木氏記事より)
Tips その9：サイトのFlash Videoを上手に組み込む方法
YouTube やニコニコ動画の人気が示すように、 Web サイトに動画を含めるのがポピュラーになってきています。アドビ認定インストラクタ (ACI)・マルチメディアコンテンツクリエイター 金像瑞穂氏の「ラクラクかんたん！Flash Video 組み込み手法」では、動画の取り込み方法、また Flash Player のシームレスインストール方法などを通じて、最新の Flash Player へスムーズに移行してもらい、ユーザ体験が途切れることなく動画を楽しんでいただくために必要な Tips が紹介されています。
Tips その10：Dreamweaver拡張機能で、自分好みのDreamweaverにカスタマイズ
さて、以上のように Dreamweaver を効率的に使うさまざまなTips を紹介してきましたが、最後に Dreamweaver の魅力である拡張機能について改めてご紹介しましょう。
Dreamweaverの拡張機能は、自分の環境に合わせて Dreamweaver を拡張／カスタマイズできるものです。.mxp というファイル形式になっており、 Dreamweaver に同梱されている Adobe Extension Manager 経由でプラグインを追加していきます。合同会社レゾリューションズの酒井 克幸氏は「拡張機能で Dreamweaver をより便利にする」の中で、自身が開発された、CSS のプロパティーを指定した順番に並び替える拡張機能「CSS プロパティーフォーマット」を紹介。この拡張機能を通じて CSS コーディングスタンダードを提唱し、よりメンテナンスと拡張のしやすい環境をつくるコツ、さらには拡張機能の開発方法ヒントなども紹介しております。アンカーテクノロジー株式会社 植木友浩氏の「全角・半角変換拡張機能」では全角半角の変換、機種依存文字を通常の文字へと置き換えをコマンドひとつで実行できる拡張機能を紹介しており、実際にダウンロードが可能となっています。
 |
「Dreamweaver CS3 拡張機能 for Movable Type 4.1」でブログサイト制作を快適に代表的なブログソフトウェアのひとつであるシックス・アパート社のMovable Type(MT) 4.1。これを利用してブログおよびWebサイトを構築・提案されている方に朗報です。Dreamweaver上でMTテンプレートを効率的に開発できる Dreamweaver CS3 拡張機能 for Movable Type 4.1 が登場しました。この拡張機能は Dreamweaver CS3 をお使いのユーザであれば、どなたでも無償でダウンロードして利用できます。主な特徴は以下の通りです。 コードヒント ：MTタグを記述する際に、先頭の数文字を入力すると候補リストが表示されます。また、半角スペースを入力することで、MTタグの属性やグローバル・モディファイアを追加できます。 モディファイア挿入ダイアログ ：MTタグの挿入時に属性を挿入および編集できます。更新の際もダイアログからの修正が可能です。 Movable Type タグリファレンス ：各MTタグの使用方法や説明等を Dreamweaver 上で確認できます。最新のタグに対応するとともに、前バージョンの拡張機能からの新機能としては<$MT から始まる「ファンクションタグ」も認識可能になりました。 |
