Dreamweaver CS5でのローカルテストサーバーのセットアップ

ASP、ColdFusion、PHPといったサーバーサイド言語を使用するWebサイトを開発する場合、ローカルテストサーバーがあれば、動的コードが生成したページが実際にどのように見えるかを、実稼働前に確認できます。Dreamweaverでは、動的ページのプレビュー作業を行う場合、テストサーバーのセットアップが必要となります。インターネット上のライブサーバーをテスト用に使用することも可能ですが、一般的にはお勧めできません。第1に、高速接続を使用したとしても、動作に時間がかかります。第2に、常にインターネットに接続しておく必要があります。さらに、最も重要なこととして、間違いがすべて公開される危険があり、悪意のある攻撃者にセットアップに関する重要な情報を知られてしまうおそれがあります。ローカルテストサーバーを用意したほうがはるかに便利で安全です。

この記事では、テストサーバーとは何か、Dreamweaver CS5でセットアッププロセスがどのように変わったかを解説します。基本的な原則は、Dreamweaverでサポートされるすべてのサーバーサイド言語に共通です。この記事の末尾のリンクで、各サーバーサイドテクノロジーに対するローカルテスト環境をインストールする詳細な手順についてご案内します。

既にローカルテストサーバーが動作していて、単にサイト定義の詳細を登録する方法だけを知りたい場合は、Dreamweaver CS5でのローカルテストサーバーの定義に進んでください。

すべてのWebサイトにローカルテストサーバーが必要というわけではありません。ページに含まれるのが静的なHTML、CSS、JavaScriptだけなら、ライブビューで直接ページをテストするか、F12（Windows）またはOption+F12（Mac）を押してブラウザーでプレビューすることにより、テストサーバーがなくてもテストできます。SWFファイルやFLVファイルなど、Flash Playerで再生されるコンテンツを含むWebページに関しても、同じことが言えます。

テストサーバーが必要なのは、ASP、ColdFusion、PHPなどのサーバーサイドテクノロジーを使用している場合だけです。動的コードを処理して、ライブビューまたはブラウザーで表示できるHTML出力に変換するために、サーバーが必要です。テストサーバーは、通常のWebサイトと同様に動作します。違いは、サーバーがオープンなインターネット上にないことだけです。サイトまたは個々のページがインターネット上に公開される前に、このサーバー上で問題点を見つけ出して修正するのです。

テスト用に自分のWebサイトを使用してはいけないのか

いけないことはありませんが、お勧めできません。リモートサーバーは、Webサイトの公の顔です。Webサイトをまだ公開していなくても、リモートサーバーをテスト用に使用するのはよい方法とは言えません。

多くのライブサーバーは、セキュリティ上の理由でエラーメッセージを抑制しているので、エラーの診断が難しくなります。また、実験のために別の場所（フォルダー）を作成しておかないと、サイトが公開された後ではテストする場所がなくなります。また、テスト用のフォルダーから本来の場所にページを移動する際には、問題が起きがちです。おそらく最も大きな危険は、テストページと実際のページのどちらを扱っているのかわからなくなることです。注意しないと、自分のWebサイトを破壊するおそれがあります。

ローカルテストサーバーのセットアップにかかる時間は、効率とセキュリティの向上によって十分報いられます。サーバーサイドテクノロジーの開発を本格的に行う場合は、テストサーバーのセットアップは必須といえます。

テストサーバーを用意するには

デザインスタジオや大規模な組織では、ステージングサーバーと呼ばれるサイトテスト専用のマシンを用意しているのが普通です。これは、ローカルネットワーク経由でアクセスされる場合も、インターネット上にある場合もあります。ただし、個人のデベロッパーがそこまでする必要は通常はありません。最も簡単な方法は、ローカルマシン上にテスト環境を構築することです。このためには、Webサーバー（Webページの処理を担当）と、アプリケーションサーバー（Webページに表示される動的データの処理を担当）をインストールする必要があります。これに加えて、データベースサーバーが必要な場合もあります。

誤解を避けるために言っておくと、これらのサーバーは別々のマシンではなく、任意の適当なコンピューター上にインストールできるソフトウェアです。どのソフトウェアが必要かは、サーバーサイドテクノロジーの選択によります。

ASPはMicrosoft IISを使用します。IISはWindowsのほとんどのバージョンに付属していますが、自動的にはインストールされません。ColdFusionアプリケーションサーバーには独自のWebサーバーが装備されています。これは既存のWebサーバーおよびデータベースと組み合わせることもできますが、最も簡単なのは、ColdFusionに組み込まれたWebサーバーとデータベース管理システムを使用することです。詳細とダウンロードについては、ColdFusionデベロッパーセンターを参照してください。PHPは通常Apache Webサーバーを使用しますが、IISにインストールすることも可能です。ApacheとIISは無料です。ColdFusionは市販製品ですが、テスト用のデベロッパー版は無料です。また、MySQLとMicrosoft SQL Serverデータベースのデベロッパー版も無料で入手できます。

PHP/MySQLの開発では、必要なソフトウェアを1回の簡単な操作でインストールできる統合パッケージ（これも無料）が用意されています。有名なものとしては、Windows用のXAMPPやMac OS X用のMAMPがあります。

テスト目的では、必要なソフトウェアはどれも高性能のハードウェアを必要としません。ローカルネットワークがあれば、古いコンピューターをテストサーバーとして使用することもできます。しかし、ディスク容量に余裕があれば、選択したサーバーサイドテクノロジー用のソフトウェアをメインコンピューターにインストールするほうがはるかに簡単です。インストールしたソフトウェアはバックグラウンドで動作し、ほとんどリソースを消費しません。

ローカルテストサーバーの使用方法

必要なソフトウェアをインストールしたら、ページ内の動的コードを処理し、ライブビューに表示するかブラウザーでプレビューできるようにする方法をサーバーに伝えるために、Dreamweaverのサイト定義にいくつか詳細情報を追加します（手順は次の節で説明します）。サーバーがコードを処理するためには、Dreamweaverがファイルをサーバーのドキュメントルートまたはドキュメントルート内部のサブフォルダーにコピーする必要があります（ただし、初めからファイルをそこに保存しておくのが一般的なやり方です）。ドキュメントルートとは、Webページやスクリプトを保存するトップレベルのフォルダーです。リモートサーバー上では、 public_html または wwwといった名前が一般的です。ローカルテスト環境では、通常 htdocs または wwwrootといった名前にします。

また、ローカルテストサーバーのURLをDreamweaverに伝える必要があります。同じコンピューター上にある場合なら、アドレスは通常 http://localhost/です。

これらの詳細をDreamweaverのサイトセットアップに追加すると、サーバーサイドコードを含むページ（すなわち動的ページ）を、静的なHTMLファイルとまったく同じ方法で、ライブビューやブラウザーでのプレビューに表示できるようになります。

Dreamweaver CS5でのサイト定義プロセスの変更は、必要なときだけ情報の入力を求めることにより、セットアップを大幅に高速化することを目的にしています。Dreamweaverの以前のバージョンを使用したことがある方なら、移行は非常に簡単です。「Basic（基本）」タブと「Advanced（詳細設定）」タブはなくなりました。ダイアログボックスが1つだけになっています。

基本サイト定義

Dreamweaver CS5でサイトを定義するために必要なのは、サイトの名前と、ローカルファイルを置くフォルダーだけです。

1. Site（サイト）／New Site（新規サイト）を選択します。
2. 「Site Name（サイト名）」テキストボックスにサイトの名前を入力します。
3. 「Local Site Folder（ローカルサイトフォルダー）」テキストボックスの隣のフォルダーアイコンをクリックして、Webサイトのローカル版を保存するフォルダーを選択します。
4. 「Save（保存）」ボタンをクリックします（図1を参照）。

5. 「Done（終了）」をクリックして、Manage Sites（サイトの管理）ダイアログボックスを閉じます。これでサイトの作業を開始できます。

注意：テストサーバーがローカルコンピューター上にある場合、ローカルファイルをテストサーバーのドキュメントルートの下に保存するのが普通です。そうすれば、Dreamweaverはテストのたびにファイルをテストサーバーにコピーする必要がありません。

テストサーバーの定義

サーバーサイドコードを含むページを、ライブビューを使用するかF12/Option+F12を押してブラウザーでプレビューすることにより、初めてテストする場合、Dreamweaverはテストサーバーの指定を求めるアラートを表示します（図2を参照）。

以下の手順で、テストサーバーを定義します。

1. 「Yes（はい）」をクリックします。
2. Site Setup（サイト設定）ダイアログボックスの「Servers（サーバー）」セクションで、プラスボタン（図3を参照）をクリックして、テストサーバーの定義を追加します。

3. 新しいダイアログボックスが開き、サーバーの詳細を定義できます。テストサーバーとリモートサーバーの両方に対して、同じダイアログボックスが用いられます。ローカルテストサーバーをセットアップするには、「Connect Using（使用する接続）」オプションで「Local/Network（ローカル/ネットワーク）」を選択します。

4. 「Server Name（サーバー名）」テキストボックスにサーバーの名前を入力します（図4を参照）。

   以前のバージョンと異なり、Dreamweaver CS5では1つのサイトに複数のサーバーを定義できます。したがって、これは定義がどのサーバーに属するかを指定します。

5. 「Server Folder（サーバーフォルダー）」テキストフィールドの右側のフォルダーアイコンをクリックし、テストサーバールートの下の、ファイルをテストするフォルダーまで移動します。

   Apacheサーバーのルートは通常 htdocsという名前ですが、一部の統合PHPパッケージ（WampServerやEasyPHPなど）では、 wwwが用いられます。ColdFusionとIISはどちらも wwwrootを使用します。

6. 次に、テストサーバーのWeb URLを入力します。

   これは、テストサーバーにアクセスするためにブラウザーに入力するURLです。「Server Folder（サーバーフォルダー）」の値としてテストサーバーのルートを選択した場合、Web URLの値は通常 http://localhost/です。テストサーバーのルートのサブフォルダーを使用した場合、サブフォルダーの名前が phptestなら、Web URLは通常 http://localhost/phptest/になります。

7. ダイアログボックスの上部にある「Advanced（詳細設定）」ボタンをクリックします（図5を参照）。

   リモートサーバーとテストサーバーの両方のためのオプションが表示されます。ここではテストサーバーをセットアップするので、上のセクションのオプションは無視してかまいません。

8. 「Server Model（サーバーモデル）」ドロップダウンリストからサーバーテクノロジーを選択します。

注意：「Server Model（サーバーモデル）」リストには、Dreamweaverでテストできる7種類のサーバーテクノロジーが含まれています。ただし、ASP JavaScript、ASP.NET C#、ASP.NET VB、JSPに関しては、Dreamweaver CS5ではサーバービヘイビアーとレコードセットを通じたコードの自動生成がサポートされなくなっています。

9. 「Save（保存）」ボタンをクリックしてメインのSite Setup（サイト設定）ダイアログボックスに戻ると、テストサーバーがリストに表示されているはずです。
10. 「Testing（テスト）」チェックボックスが選択されていることを確認します（図6を参照）。

ダイアログボックスの左下の4つのアイコンは、すべてアクティブになっているはずです。新規サーバーを追加するほかに、マイナスアイコンをクリックすることにより、選択したサーバーを削除することができます。鉛筆アイコンをクリックすると、選択したサーバーを編集できます。最後のアイコンでは、サーバー定義を複製できます。これは、サーバーの詳細がほとんど一致する場合に便利です。既存の定義を複製して編集すればよいのです。

11. 「Save（保存）」ボタンをクリックして、Site Setup（サイト設定）ダイアログボックスを閉じます。

Dreamweaverはサイトキャッシュを更新中というメッセージを表示します。これが終わると（大規模なサイトでない限り数秒間）、サーバーサイドコードを含むファイルに対して、ライブビューとブラウザーでのプレビューが正常に動作するはずです。

トラブルシューティング

ときには問題が起きることもあります。ローカルテストサーバーの問題の原因として最も多いのは、サーバーフォルダーとWeb URLに入力した値が間違っていることです。これらは同じ場所を指す必要があります。

• サーバーフォルダーは、サーバーのドキュメントルートの下のサイトルートの物理的なパスです。
• Web URLは、同じ場所にアクセスするためにブラウザーのアドレスバーに入力する値です。

図7に示すのは、ライブビューに表示されたPHPページでのこれら2つの値の関係です。

この例では、サーバーのドキュメントルートは C:\htdocsにあります。これは http://localhost/と同じ場所を指します。自分のローカルテスト環境で複数のサイトをテストするために、筆者はサイトのサーバーフォルダーを C:\htdocs\phptestと定義しています。この結果、Web URLは http://localhost/phptest/ とする必要があります（図4を参照）。

ライブビューまたはブラウザーでのプレビューでサーバーサイドコードが正しく表示されない場合に、他に確認すべき点を以下に示します。

• ローカルWebサーバーは動作しているか。
• ソフトウェアファイアウォールがDreamweaverとWebサーバーとの間の通信を禁止していないか。ファイアウォールを一時的に無効にして、違いが生じるかどうかを確かめてください。
• View（表示）／Live View Options（ライブビューオプション）を選択します。「Use Testing Server For Document Source（ドキュメントソースにテストサーバーを使用）」オプションが選択されていることを確認します。

次のステップ

ローカルテストサーバーの使用は、サーバーサイドコードを使用するWebサイトを開発する最も効率的な方法です。この方法は高速でセキュリティが高く、Dreamweaver CS5のセットアッププロセスが効率化されたためにセットアップも容易になっています。

どのサーバーサイドテクノロジーが自分に適しているかで迷っている場合は、どのサーバーサイドテクノロジーを選ぶかをご覧ください。

以下の記事は、選択したサーバーサイドテクノロジー向けのテスト環境のセットアップ方法を知るために役立ちます。

• Dreamweaver向けのColdFusion開発環境を構築
• Dreamweaver向けのPHP開発環境を構築
• Dreamweaver向けのASP.NET開発環境を構築