プログラム開発にも活用できちゃう Dreamweaver

はじめに

Adobe Dreamweaver CS3（以下 Dreamweaver CS3）といえば、Webデザイナ、マークアップエンジニアが使うツールであるというイメージが強いと思います。
プログラマ、エンジニアはEmacsや、Eclipse、その他のエディタソフトなど、オープンソースのエディタを使うのが一般的で、Dreamweaver CS3を開発に利用するなど選択肢にも上がらないかも知れません。

しかし、実はDreamweaver CS3は、かつての開発ソフト「Macromedia Ultra Developer」の流れを組んだ開発ソフトで、プログラマであっても十分に活用できるパワーを秘めています。また、Webデザイナとの共同作業という面に置いても、非常に優れた機能を持ち合わせており、チーム開発をやりやすくしています。

本稿では、そんなDreamweaver CS3の開発ソフトとしての機能を紹介し、プログラマでも十分活用できることをご紹介しましょう。

チェックイン・チェックアウト機能

デザインとプログラムを分業して行っていると、どうしても同じファイルをお互いが編集するタイミングが出てきます。そんな時、うまく連携を取らないと、古いファイルで上書きしてしまうと行ったことが起こります。
このようなチーム開発では「CVS（Concurrent Versions System）」や「Subversion」といった、バージョン管理システムを用いることがありますが、クライアントソフトの操作などが複雑でWebデザイナには使いこなせないこともあります。

しかし、Dreamweaver CS3を利用すれば非常に簡単にこのような共同作業を行う「チェックイン・チェックアウト」機能があります。
［サイト］［サイトの管理］メニューで、対象とするとサイトを選んで「編集」ボタンをクリックします。

［リモート情報］のグループに、FTPの情報などを入力すると下部に「ファイルのチェックイン／チェックアウト」チェックボックスがあるので、これをチェックします。
後は、名前やメールアドレスを記入して［OK］ボタンをクリックすれば準備完了です。

この機能を利用すると、ファイルを編集するときにファイルパネルで図のようなチェックマークが付くようになります。これが編集可能状態です。

この時、同じ設定をしている他の人が同ファイルを編集しようとすると、アイコンは図のようになり、また無理に編集すると図のようなダイアログボックスが表示されます。

編集が終わったら、必ず［サイト］［チェックイン］メニューから、ファイルをチェックインします。すると、アイコンが図のように変わり、他の人が編集できる状態になります。こうして、ファイルを上書きし合うことなく、共同で作業が可能となるのです。

ライブビュー機能

HTMLは、タグ同士の整合性がとれなくなったりすると、Webブラウザ上でレイアウトが崩れてしまうなどで、正しく表示されなくなることがあります。その為、プログラマは細心の注意を払ってプログラムを埋め込んでは、Webブラウザで表示を確認すると行った作業が必要になります。

しかし、Dreamweaverには「ライブビュー」機能が搭載されているため、作業中に常にレイアウトを確認しながら作業をすることができます。
この機能を利用するためには、最初に「テストサーバー」を設定する必要があります。

［サイト］［サイトの管理］で、対象のサイトの［編集］ボタンをクリックして、「テストサーバー」グループでテストサーバーを設定します。テストサーバーには、FTPサーバーなどを設定することもできますし、自分のコンピュータにWebサーバーがインストールされていれば、それを設定しても構いません。

この状態で、PHPなどのスクリプトが組み込まれたページを表示すると、最初は図のような表示になります。

ここで、画面上部の「ドキュメント」ツールバー上にある［ライブデータの表示］ボタンをクリックしましょう。PHPのプログラムの動作イメージが、デザインビューに表示されます。この状態で、若干の編集なども可能なので、HTMLの調整なども行うことができます。

コードヘルプ・カラーリング機能

Dreamweaver CS3は、「Coldfusion」はもちろん、「ASP.NET」「PHP」「JSP」に対応しており、コードヘルプやコードカラーリングも行うことができます。

例えば、拡張子を「.php」にしたファイルで、PHPのコードを書き始めると画像のように、コードヘルプが表示されます。

また、図のように各コードが色分けされ、非常に見やすく編集することができます。

なお、カラーリングのルールなどは［環境設定］から変更することも可能です。

ファンクションジャンプ

Eclipseなどの場合、PHPのファイルを解析してファンクション名を抜き出し、クリックすればその場に移動するリンクを作り出すことができます。Dreamweaver CS3でも同様の事は可能です。 ファンクションが大量に定義されているPHPファイルなどを開き、右クリックして「関数」を辿ると、そのファイル内で定義されているファンクションが一覧されます。

後は、ファンクション名をクリックすればその場にジャンプするというわけです。

外部エディタ登録

チェックイン・チェックアウト機能は便利だが、やはり通常の編集には使い慣れたエディタの方が良いという場合もあるでしょう。
そんな時、Dreamweaver CS3は、無理強いすることなく外部エディタと連携する姿勢を見せています。

［環境設定］でダイアログボックスを開き、「ファイルタイプ／エディタ」をクリックします。

「外部コードエディタ」に、使い慣れたエディタソフトを登録しておくと、［編集］メニューに「エディタを指定して編集」という項目が追加されています。これでエディタを変更して編集することができます。

スニペット

よく使いプログラムコードは、「スニペット」に登録して、簡単に呼び出すことができます。 例えば次のようなコードがあったとします。

ユーザーエージェントを確認して、Macの場合だけ特別なCSSファイルを読むというPHPのコードですが、さまざまなページで利用することが考えられるため、スニペットに登録します。

［ウィンドウ］［スニペット］メニューで、スニペットパネルを表示します。画面右下の「新規スニペット」ボタンをクリックして登録画面を表示し、図のように記入しましょう。

登録して、必要に応じてフォルダなどで管理します。
利用するときは、挿入したい場所を選択して、スニペットをダブルクリックします。

こうして、コードを挿入していくことができます。スニペットを共有すれば、簡単なスクリプトならWebデザイナが直接組み込むようにすることもできるでしょう。

リファレンス

Dreamweaver CS3には、リファレンスが非常に豊富に準備されています。いくつか例を挙げるだけでも

• HTMLリファレンス
• CSSリファレンス
• JavaScriptリファレンス
• PHPリファレンス
• JSPリファレンス
• SQLリファレンス
• 富士通 JIS X 8341-3 リファレンス

などなど、デザイナからプログラマまで役立つリファレンスが揃っています。しかも、内容は技術書で定評のあるオライリー社のポケットリファレンスなどを利用しており、内容にも信頼を置くことができます。

［ウィンドウ］［リファレンス］をクリックすると、図のようなウィンドウが表示され、内容を参照することができます。

さらに便利なのは、コードビューで対象となるファンクションなどにカーソルを合わせた状態（図参照）で、同じメニュー操作を行うと、そのファンクションの内容を一発で表示させることもできます。

ちょっと内容を忘れてしまったときや、他人のコードを解析しているときなどに非常に重宝する機能でしょう。

まとめ

いかがでしょうか。Dreamweaver CS3が、まさかこれほどまで開発を考慮した機能を持っているとは、思っていなかった方も多いことでしょう。

Dreamweaver CS3には、この他にもMySQLなどのデータベースと接続して、SQLを自動的に生成する機能や、JavaScriptのコードを自動的に生成する機能、Spryを簡単に設置する機能など、プログラマでも十分に活用可能な機能が豊富に揃っています。

DreamweaverはWebデザイナツール。といった考えを改め、一度使ってみてはいかがでしょうか？　新しい世界が待っているかも知れません。