マニュアル キャンセル

テストサーバーの設定

  1. Dreamweaver ユーザーガイド
  2. はじめに
    1. レスポンシブ web デザインの基本
    2. Dreamweaver の新機能
    3. Dreamweaver を使用した web 開発 - 概要
    4. Dreamweaver / よくある質問
    5. キーボードショートカット
    6. Dreamweaver の必要システム構成
    7. 機能の概要
  3. Dreamweaver と Creative Cloud
    1. Dreamweaver 設定と Creative Cloud の同期
    2. Dreamweaver での Creative Cloud ライブラリ
    3. Dreamweaver での Photoshop ファイルの使用
    4. Adobe Animate と Dreamweaver の操作
    5. ライブラリから web 用に最適化された SVG ファイルを抽出する
  4. Dreamweaver のワークスペースとビュー
    1. Dreamweaver ワークスペース
    2. ビジュアル開発のための Dreamweaver ワークスペースの最適化
    3. ファイル名またはコンテンツに基づいたファイルの検索 | Mac OS
  5. サイトの設定
    1. Dreamweaver サイトについて
    2. ローカルバージョンのサイトの設定
    3. Publishing server への接続
    4. テストサーバーの設定
    5. Dreamweaver サイトの設定の読み込みおよび書き出し
    6. リモートサーバーからローカルサイトのルートに既存の web サイトを取り込む
    7. Dreamweaver のアクセシビリティ機能
    8. 詳細設定
    9. ファイル転送に関するサイト環境設定の設定
    10. Dreamweaver でのプロキシサーバー設定の指定
    11. Dreamweaver 設定と Creative Cloud の同期
    12. Dreamweaver での Git の使用
  6. ファイルの管理
    1. ファイルの作成およびオープン
    2. ファイルとフォルダーの管理
    3. サーバーからのファイルの取得とサーバーへのファイルの送信
    4. ファイルのチェックインとチェックアウト
    5. ファイルの同期
    6. ファイルの違いの比較
    7. Dreamweaver サイト内のファイルおよびフォルダーのクローク
    8. Dreamweaver サイトでのデザインノートの有効化
    9. Gatekeeper の脆弱性の悪用を防ぐ
  7. レイアウトとデザイン
    1. レイアウト用ビジュアルエイドの使用
    2. CSS を使用したページのレイアウトについて
    3. Bootstrap を使用したレスポンシブな web サイトのデザイン
    4. Dreamweaver でのメディアクエリーの作成と使用
    5. テーブルを使用したコンテンツの表示
    6. カラー
    7. 可変グリッドレイアウトによるレスポンシブデザイン
    8. Dreamweaver 内の Extract
  8. CSS
    1. カスケーディングスタイルシートについて
    2. CSS デザイナーを使用したページのレイアウト
    3. Dreamweaver での CSS プリプロセッサーの使用
    4. Dreamweaver で CSS スタイルの環境設定を行う方法
    5. Dreamweaver での CSS ルールの移動
    6. Dreamweaver でのインライン CSS の CSS ルールへの変換
    7. Div タグの操作
    8. 背景へのグラデーションの適用
    9. Dreamweaver での CSS3 移行効果の作成および編集
    10. コードのフォーマット
  9. ページコンテンツとアセット
    1. ページプロパティの設定
    2. CSS 見出しプロパティおよび CSS リンクプロパティの設定
    3. テキストの操作
    4. テキスト、タグ、属性の検索と置換
    5. DOM パネル
    6. ライブビューでの編集
    7. Dreamweaver でのドキュメントのエンコード
    8. ドキュメントウィンドウでのエレメントの選択および表示
    9. プロパティインスペクターでのテキストプロパティの設定
    10. web ページのスペルチェック
    11. Dreamweaver での区切り線の使用
    12. Dreamweaver でのフォントの組み合わせの追加と変更
    13. アセットを使用した作業
    14. Dreamweaver での日付の挿入と更新
    15. Dreamweaver でのお気に入りアセットの作成と管理
    16. Dreamweaver でのイメージの挿入と編集
    17. メディアオブジェクトの追加
    18. Dreamweaver でのビデオの追加
    19. HTML5 ビデオの挿入
    20. SWF ファイルの挿入
    21. オーディオエフェクトの追加
    22. Dreamweaver での HTML5 オーディオの挿入
    23. ライブラリ項目の操作
    24. Dreamweaver でのアラビア語およびヘブライ語のテキストの使用
  10. リンクおよびナビゲーション
    1. リンクおよびナビゲーションについて
    2. リンク
    3. イメージマップ
    4. リンクのトラブルシューティング
  11. jQuery Widget と効果
    1. Dreamweaver での jQuery UI Widget と Mobile Widget の使用
    2. Dreamweaver での jQuery 効果の使用
  12. web サイトのコーディング
    1. Dreamweaver でのコーディングについて
    2. Dreamweaver のコーディング環境
    3. コーディングの環境設定
    4. コードカラーリングのカスタマイズ
    5. コードの記述と編集
    6. コードヒントとコード補完機能
    7. コードの折りたたみと展開
    8. スニペットでコードを再利用する
    9. 構文チェックコード
    10. コードの最適化
    11. デザインビューでのコードの編集
    12. ページのヘッドコンテンツの操作
    13. Dreamweaver でのサーバーサイドインクルードの挿入
    14. Dreamweaver でのタグライブラリの使用
    15. Dreamweaver へのカスタムタグの読み込み
    16. JavaScript ビヘイビアーの使用(基本操作)
    17. JavaScript に組み込まれているビヘイビアーの適用
    18. XML および XSLT について
    19. Dreamweaver でのサーバーサイド XSL 変換の実行
    20. Dreamweaver でのクライアントサイド XSL 変換の実行
    21. Dreamweaver での XSLT の文字エンティティの追加
    22. コードのフォーマット
  13. 製品間ワークフロー
    1. Dreamweaver への拡張機能のインストールと使用
    2. Dreamweaver のアプリ内アップデート
    3. Dreamweaver での Microsoft Office 文書の挿入(Windows のみ)
    4. Fireworks および Dreamweaver による作業
    5. Contribute を使用した Dreamweaver サイトでのコンテンツの編集
    6. Dreamweaver と Business Catalyst の統合
    7. パーソナライズされた電子メールキャンペーンの作成
  14. テンプレート
    1. Dreamweaver テンプレートについて
    2. テンプレートおよびテンプレートから作成されたドキュメントの認識
    3. Dreamweaver テンプレートの作成
    4. テンプレート編集可能領域の作成
    5. Dreamweaver でのリピート領域およびテーブルの作成
    6. テンプレートの任意の領域の使用
    7. Dreamweaver での編集可能なタグ属性の定義
    8. Dreamweaver でネストされたテンプレートを作成する方法
    9. テンプレートの編集、更新、削除
    10. Dreamweaver での xml コンテンツの書き出しおよび読み込み
    11. 既存のドキュメントでのテンプレートの適用または削除
    12. Dreamweaver テンプレートでのコンテンツの編集
    13. Dreamweaver でのテンプレートタグのシンタックスルール
    14. テンプレート領域のハイライト表示の環境設定
    15. Dreamweaver でテンプレートを使用する利点
  15. モバイルとマルチスクリーン
    1. メディアクエリーの作成
    2. モバイルデバイス向けのページ方向の変更
    3. Dreamweaver を使用したモバイルデバイス向けの web アプリの作成
  16. 動的サイト、ページおよび web フォーム
    1. web アプリケーションについて
    2. アプリケーション開発のためのコンピューター設定
    3. データベース接続のトラブルシューティング
    4. Dreamweaver での接続スクリプトの削除
    5. 動的ページのデザイン
    6. 動的コンテンツソースの概要
    7. 動的コンテンツのソースの定義
    8. ページへの動的コンテンツの追加
    9. Dreamweaver での動的コンテンツの変更
    10. データベースのレコードの表示
    11. Dreamweaver でのライブデータの入力とトラブルシューティング
    12. Dreamweaver でのカスタムサーバービヘイビアーの追加
    13. Dreamweaver を使用したフォームの作成
    14. フォームを使用したユーザーからの情報の収集
    15. Dreamweaver での ColdFusion フォームの作成と有効化
    16. web フォームの作成
    17. フォームエレメントの HTML5 サポート強化
    18. Dreamweaver を使用したフォームの開発
  17. アプリケーションのビジュアル開発
    1. Dreamweaver でのマスターページと詳細ページの作成
    2. 検索ページと結果ページの作成
    3. レコード挿入ページの作成
    4. Dreamweaver でのレコードの更新ページの作成
    5. Dreamweaver でのレコード削除ページの作成
    6. Dreamweaver での ASP コマンドによるデータベースの修正
    7. 登録ページの作成
    8. ログインページの作成
    9. 許可されたユーザーのみがアクセスできるページの作成
    10. Dreamweaver を使用した ColdFusion のフォルダーの保護
    11. Dreamweaver での ColdFusion コンポーネントの使用
  18. web サイトのテスト、プレビュー、パブリッシュ
    1. ページのプレビュー
    2. 複数のデバイスでの Dreamweaver web ページのプレビュー
    3. Dreamweaver サイトのテスト
  19. トラブルシューティング
    1. 修正された問題
    2. 既知の問題

 

 

ローカルコンピューター、開発サーバー、ステージングサーバーまたはプロダクションサーバーをテストサーバーとして設定して、動的な web ページまたはコンテンツをテストします。

PHP などのサーバー側言語を使用して動的ページを開発する場合は、作業中に動的コンテンツの生成や表示を行うためのテストサーバーを設定します。

ローカルコンピューター、開発サーバー、ステージングサーバー、またはプロダクションサーバーのいずれかを、テストサーバーとすることができます。

テストサーバーの設定の利点

テストサーバーを設定すると、本番 web サイトに影響を与えることなく、すべての動的なコードを安全にテストできます。 

また、リモートサーバーへのデータのアップロードの妨げとなる可能性のあるネットワークエラーやインターネットの障害によって作業が中断されることもありません。

さらに、ローカルテストサーバーを設定すると、ページのアップロード、テスト、修正、再アップロード、再テストで時間を無駄にすることがなくなります。 

そのため、レイアウト、ショッピングカートまたはその他のスクリプトをテストする場合は、テストサーバーを設定してください。

テストサーバーのもう 1 つの利点として、Dreamweaver では、動的ドキュメントの表示時、作成時、また行った変更の保存時に、動的ドキュメントがテストサーバーに自動的に同期されるようになりました。詳しくは、動的ファイルの自動プッシュを参照してください。

注意:

リモートからサイトにアクセスする場合を除き、正確な解析およびロードの時間は表示されません。

これは特にロード時間に当てはまります。ローカルコンピューターからの web サイトのロードは、ネットワーク経由で同じ web サイトをロードするよりも常に高速であるためです。

作業を開始する前に

Dreamweaver 内からテストサーバーを設定する前に、次のものを設定してインストールする必要があります。

  • Apache などの web サーバー
  • MySQL などのデータベースサーバー
  • PHP などのサーバー側言語

テストサーバーの設定

  1. サイトサイトの管理を選択します。

  2. 新規作成」をクリックして新しいサイトを設定するか、既存の Dreamweaver サイトを選択して編集アイコンをクリックします。

  3. サイト定義ダイアログボックスで、「サーバー」カテゴリを選択して次のいずれかの操作を行います。

    • 新しいサーバーを追加するには、「新規サーバーの追加」ボタンをクリックします。

    • 既存のサーバーを選択して、「既存のサーバーの編集」ボタンをクリックします。

  4. リモートサーバー接続の場合と同様に基本オプションを指定して、「詳細設定」ボタンをクリックします。基本オプションを設定する場合は、基本画面で web URL を指定してください。

    リモートサーバー接続の設定について詳しくは、Publishing server への接続を参照してください。

    テストサーバーの web URL について詳しくは、テストサーバーの web URL についてを参照してください。

  5. テストサーバー」で、web アプリケーションに使用するサーバーモデルを選択します。

  6. 保存」をクリックして詳細画面を閉じます。次に、「サーバー」カテゴリーで、追加または編集したサーバーをテストサーバーとして指定します。

テストサーバーの web URL について

Dreamweaver でテストサーバーのサービスを使用して、作業中にデータの表示やデータベースへの接続ができるように、web URL を指定する必要があります。Dreamweaver はこのデザイン時接続を使用して、データベース内のテーブルの名前やテーブル内の列の名前など、データベースに関する有用な情報を表示します。

テストサーバーの web URL は、ドメイン名と、web サイトのホームディレクトリにある任意のサブディレクトリまたは仮想ディレクトリで構成します。

注意:

Microsoft IIS で使用される用語がサーバーの種類によって異なる場合がありますが、概念はほとんど同じです。

ホームディレクトリ

サーバー上のフォルダーのうち、ユーザーのサイトのドメイン名に対応付けられたフォルダーを指します。動的ページの処理に使用するフォルダーが c:¥sites¥company¥ で、このフォルダーがホームディレクトリであるとします。つまり、このフォルダーが、www.mystartup.com などのサイトのドメイン名に対応付けられているとします。この場合、URL 接頭辞は http://www.mystartup.com/ になります。

動的ページの処理に使用するフォルダーが、ホームディレクトリのサブフォルダーである場合は、この URL にサブフォルダーを追加します。ホームディレクトリが c:¥sites¥company¥ で、サイトのドメイン名が www.mystartup.com、動的ページの処理に使用するフォルダーが c:¥sites¥company¥inventory であるとします。この場合は、web URL を次のように入力します。

http://www.mystartup.com/inventory/

動的ページの処理に使用するフォルダーが、ホームディレクトリではなく、ホームディレクトリのサブディレクトリでもない場合は、仮想ディレクトリを作成する必要があります。

仮想ディレクトリ

URL には表示されても、サーバーのホームディレクトリの中に物理的には存在しないフォルダーです。仮想ディレクトリを作成するには、URL の中にフォルダーのパスのエイリアスを指定します。例えば、ホームディレクトリが c:¥sites¥company、処理用のフォルダーが d:¥apps¥inventory のシステムで、warehouse というエイリアスをこのフォルダーに対して定義するとします。この場合は、web URL を次のように入力します。

http://www.mystartup.com/warehouse/

Localhost

クライアント(通常はブラウザーですが、この場合は Dreamweaver)と web サーバーが同じシステム上で実行されているときに、URL 内でホームディレクトリを示す用語です。例えば、Dreamweaver が web サーバーと同じ Windows システム上で実行されていて、ホームディレクトリが c:¥sites¥company の場合、動的ページの処理に使用するフォルダーを示す warehouse という仮想ディレクトリを定義したとします。選択した web サーバーに対応して入力する web URL を次に示します。

Web サーバー

Web URL

ColdFusion MX 7

http://localhost:8500/warehouse/

IIS

http://localhost/warehouse/

Apache(Windows)

http://localhost:80/warehouse/

Jakarta Tomcat(Windows)

http://localhost:8080/warehouse/

注意:

初期設定では、ColdFusion MX 7 の web サーバーはポート 8500、Apache の web サーバーはポート 80、Jakarta Tomcat の web サーバーはポート 8080 で実行されます。

Mac OS で Apache の web サーバーを実行している場合、ユーザー個人のホームディレクトリは Users/MyUserName/Sites になります。ここで、MyUserName は、Mac OS ユーザー名です。Mac OS 10.1 以降をインストールすると、このフォルダーに対して ~MyUserName というエイリアスが自動的に定義されます。したがって、Dreamweaver における初期設定の web URL は次のようになります。

http://localhost/~MyUserName/

動的ページの処理に使用するフォルダーが Users:MyUserName:Sites:inventory の場合、web URL は次のようになります。

http://localhost/~MyUserName/inventory/

詳しくは、アプリケーションサーバーの選択を参照してください。

動的ファイルの自動プッシュ

動的ドキュメントは、ライブビューまたはコードビューで編集、保存したときにテストサーバーに自動的にプッシュされます。動的ファイルの自動プッシュは、サーバー設定で無効にすることができます。詳しくは、動的ファイルの自動プッシュを無効にするを参照してください。

ファイルが自動プッシュされるとき、依存ファイルがテストサーバー上に存在しない場合も、Dreamweaver により依存ファイルがプッシュされます。依存ファイルがサーバー上に既に存在する場合、サーバー側のドキュメントのみがテストサーバーにプッシュされます。

以下のシナリオについて見てみます。

シナリオ 1:ソースコードと依存ファイルに変更を行う場合。「保存」のクリック時、フォーカスソースコードにあります。

この場合、影響を受けるすべての依存ファイルの一覧を表示する次のダイアログボックスが表示されます。

依存ファイルを保存するためのプロンプト

次に、テストサーバーにプッシュするファイルを選択できます。

注意:「依存ファイルを常に自動保存する」を選択して、以降の操作でプロンプトを表示しないようにすることができます。任意の時点でこの設定を元に戻すには、テストサーバーの設定(サイト定義)、「詳細設定」タブの順に移動し、「依存ファイルを常に自動保存する」をオフにします。

サーバーセットアップの依存ファイルの自動保存オプション
サーバーセットアップの依存ファイルの自動保存オプション

シナリオ 2:ソースコードと依存ファイルに変更を行う場合。「保存」のクリック時に、フォーカスは依存ファイルのいずれかにあります

この場合、依存ファイルのみが保存され、テストサーバーにプッシュされます。 

動的ファイルの自動プッシュを無効にする

動的ファイルの自動プッシュは、サーバー設定で無効にすることができます。

  1. サイト/サイトの管理に移動します。

  2. サイトを選択し、編集ボタンをクリックします。サイト設定ダイアログボックスが表示されます。

  3. 「サーバー」カテゴリーに移動します。

  4. テストサーバーを選択し、編集アイコンをクリックします。

  5. 表示されるポップアップで「詳細設定」をクリックします。

  6. 「テストサーバーにファイルを自動的にプッシュ」を選択解除します。

    動的ファイルの自動プッシュの無効化
    動的ファイルの自動プッシュの無効化

ヘルプをすばやく簡単に入手

新規ユーザーの場合

Adobe MAX 2025

Adobe MAX Japan
クリエイターの祭典

2025 年 2 月 13 日
東京ビッグサイト