Dreamweaver での BrowserLab の操作

Adobe BrowserLab では、ローカルの Web コンテンツを Dreamweaver からプレビューできます。このとき、パブリックにアクセスできるサーバーに Web コンテンツを先にポストしておく必要はありません。Dreamweaver のローカルサイト、リモートサーバーまたはテストサーバーのファイルをプレビューできます。

BrowserLab は Dreamweaver CS5(バージョン 11.0.3)およびそれ以降でのみ動作します。11.0.3 に更新していない Dreamweaver CS5 ユーザーは、BrowserLab を使用する前に 11.0.3 に更新する必要があります。11.0.3 アップデーターは、アドビ システムズ社の Web サイトからダウンロードできます。

ファイルの場所の環境設定

BrowserLab では、ファイルのローカルバージョン、ローカルネットワークのファイル、または別のサーバー(リモートのステージングサーバーやテストサーバーなど)上のファイルをプレビューできます。

ユーザーがローカルまたはローカルネットワークのファイルをプレビューすると、BrowserLab はファイルを実際に BrowserLab サーバーにアップロードし、別のブラウザーでページのスクリーンショットを撮った後、そのスクリーンショットを BrowserLab アプリケーションウィンドウに表示します。サーバーからのファイルのプレビューでは、BrowserLab は、他のライブファイルに対する操作と同じ操作を実行します。つまり、別のブラウザーでサーバーファイルのスクリーンショットを撮った後、そのスクリーンショットを BrowserLab アプリケーションウィンドウに表示します。

  1. ウィンドウ/エクステンション/Adobe BrowserLab を選択します。

  2. Adobe BrowserLab パネルで、ポップアップメニューから場所を選択します。

    注意: 選択したファイルの場所は、再度変更するまでそのまま残ります。
    ローカル / ネットワーク
    ローカルまたはローカルネットワークのサイトのファイルをプレビューするように BrowserLab に指示します。デザインビューまたはコードビューからファイルをプレビューする場合、BrowserLab はローカルファイルをスクリーンショットのソースとして使用します。ライブビューからファイルをプレビューするときは、WebKit(ライブビュー用のレンダリングエンジン)をスクリーンショットのソースとして使用します。

    サーバー
    アクティブサーバーのファイルをプレビューするように BrowserLab に指示します。

    サーバー設定を使用するファイル(つまり、Dreamweaver のローカルサイトのファイルではない)をプレビューするとき、BrowserLab が使用するサーバーは、Dreamweaver でアクティブなサーバーです。アクティブサーバーは、展開または折りたたまれたファイルパネルでサーバービューメニューから最後に選択したサーバーです。例えば、ローカルサイトから定義済みのテストサーバーにファイルをアップロードしている場合、BrowserLab はテストサーバー上の指定されたファイルのスクリーンショットを撮ります。Dreamweaver はこの設定を記憶し、ユーザーがアクティブサーバーを手動で変更するまでこの設定を維持します。アクティブサーバーを確認するには、ファイルパネルの「展開」ボタンをクリックします。選択されているサーバー(テストまたはリモート)がアクティブサーバーです。

    重要: アクティブサーバーがリモートサーバー(例えばリモートステージングサーバー)またはテストサーバーの場合は、サーバーの基本ビューの「Web URL」テキストボックスに入力する必要があります。Web URL は、指定されたリモートサーバーまたはテストサーバーの場所(FTP サイトの FTP アドレス、ローカル / ネットワークサイトのリモートフォルダーなど)と対応する必要があります。

権限設定の調整

ローカルネットワーク(WordPress、Drupal、Joomla! などのコンテンツ管理システムを実行しているローカルサーバーや、企業ファイアウォール内のローカルネットワークサーバーなど)のファイルをプレビューする場合は、BrowserLab がこれらのファイルをアップロードしてスクリーンショットを撮るためのアクセス権を許可する必要があります。BrowserLab に、このようなローカルネットワークファイルをアップロードする権限を許可すると、コンピューターは BrowserLab サービスと対象ファイルのゲートウェイとして機能します。BrowserLab はこれらのファイルに直接アクセスすることができないため、代わりにコンピューターがファイルにアクセスし、それらのファイルを BrowserLab に送ります。BrowserLab はこれらのファイルをキャッシュファイルとして一定期間保存し、リクエストされたスクリーンショットのレンダリングに使用します。

注意: BrowserLab では、https プロトコルを使用する CMS サイトの CSS スタイルはレンダリングされません。

ローカルネットワークのファイル、またはローカルネットワークファイルと依存関係を持つファイル(依存する PHP ファイルを含む CMS インデックスページなど)のプレビューをリクエストすると、Dreamweaver は対象ページをスキャンし、ファイルをアップロードするための権限を BrowserLab に設定する必要があるかどうかを確認します。上記のようなプレビューリクエストの場合、自動的にアクセスを許可するか、または手動でアクセスを許可することができます。

アクセス権を自動的に許可する場合

 特定ファイルおよびその依存ファイルに関連するネットワークの場所に対してアクセスを許可する場合は、BrowserLab でファイルのプレビューを開始し、表示されるダイアログボックスで「許可」ボタンをクリックします。

注意: このダイアログボックスで「拒否」ボタンをクリックした場合、BrowserLab は指定した場所にあるリソースをアップロードできないため、プレビューにも表示されません。

アクセス権を手動で設定または調整する場合

権限を手動で設定または調整するには、以下の手順に従って操作します。

  1. BrowserLab パネルの右上にあるオプションメニューから「権限設定」を選択します。

  2. 「許可」または「拒否」を選択し、「OK」をクリックします。

ページのプレビュー

  1. Dreamweaver で、プレビューするページを開きます。

  2. ファイル/ブラウザーでプレビュー/Adobe BrowserLab を選択します。

  3. BrowserLab ログイン画面が開いたら、Adobe ID(電子メールアドレス)とパスワードを入力し、「サインイン」をクリックします。

ページの編集と更新

ローカルページを Dreamweaver で編集した後、Dreamweaver でファイルを保存せずに BrowserLab のページを更新するかサーバーにアップロードできます。このオプションは、CSS を大幅に編集する場合に、変更を毎回保存せずに変更結果をプレビューする場合に特に有効です。

注意: BrowserLab でリモート設定を使用してプレビューする場合、ファイルはプレビューの実行前にアクティブサーバーに自動的に保存およびアップロードされます。
  1. Dreamweaver で、プレビューするページを開きます。

  2. ファイル/ブラウザーでプレビュー/Adobe BrowserLab を選択します。

  3. ページまたはページに関連付けられた CSS を変更します。

  4. BrowserLab アプリケーションウィンドウの「スクリーンショットを更新」ボタンをクリックします。

    ローカルな変更を最初に保存しなくても、BrowserLab でページがプレビューされます。