Dreamweaver のステータスバーの「リアルタイムプレビュー」をクリックします。
最終更新日 :
2021年12月20日
ブラウザーで Dreamweaver の web ページをプレビューします。
リアルタイムプレビューでは、ページのコードを変更したときに、その結果をブラウザーでリアルタイムにプレビューできます。
ライブビューでは、ページが web でどのように表示されるかをプレビューし、コードビューで様々なアイテムを編集できます。
ページが web でどのように表示されるかは、デザインビューでもプレビューできます。ただし、ブラウザーとまったく同じように表示されるわけではありません。
「ブラウザーで開く」機能を使用すると、ブラウザーにおけるページ表示を確認できます。 これはリアルタイムではないので、データベースから動的データを使用するページに適しています。
詳しくは、Dreamweaver のプレビューオプションの種類に関する説明を参照してください。
ブラウザーでのリアルタイムプレビュー
Dreamweaver で web ページのコード作成またはデザインを実行しているときに、web ページをリアルタイムでプレビューできます。 この機能を使用すると、web ページのコードを作成しているときに、web ページを複数のブラウザーで同時にプレビューできます。
Web ページをブラウザーでリアルタイムにプレビューするオプションがあります。
Web ページをブラウザーでプレビューするには、使用できるブラウザーのオプションのいずれかをクリックします。
このリストに表示されるブラウザーを編集することができます。 このリストに対してブラウザーを追加または削除するには、ブラウザーでのプレビューの環境設定を参照してください。
テストサーバーがある場合は、テストサーバーの設定で「テストサーバーにファイルを自動的にプッシュ」が有効になっていることを確認してください。
リアルタイムプレビューは、テストサーバーのファイルを使用せずに機能します。 テストサーバーへのファイルの自動的なプッシュを有効にすることで、変更がリアルタイムに表示されます。
Web ページと関連ファイルを保存することを求められたら、保存を実行します。
ブラウザーが開いて web ページが表示されます。
ページのコード作成を続け、コードを変更したときの変化をブラウザーで確認します。
ブラウザーでのプレビューの環境設定
リアルタイムプレビューとブラウザーでのプレビューを切り替えることができます。 サイトのプレビュー時にブラウザーを使用する場合の環境設定と、初期設定のプライマリブラウザーおよびセカンダリブラウザーを定義します。
これらのブラウザーの環境設定は、リアルタイムプレビューを使用してサイトをライブでプレビューするか、ブラウザーでページを開くかに関係なく使用されます。
ファイル／リアルタイムプレビュー／ブラウザーリストの編集を選択します。
静的ブラウザープレビューを既定値に設定オプションの選択を解除した場合、リアルタイムプレビューは無効になります。 メインブラウザーとサブブラウザーのキーボードショートカットを使用して、ブラウザーでプレビューを開くことができます。 または、ファイルメニューを使用するか、ステータスバーのデバイスプレビューアイコンをクリックすることもできます。
リストにブラウザーを追加するには、「+」ボタンをクリックし、ブラウザーの追加ダイアログボックスに情報を入力して、「OK」をクリックします。
リストからブラウザーを削除するには、ブラウザーを選択してから「-」ボタンをクリックします。
選択したブラウザーの設定を変更するには、「編集」ボタンをクリックし、ブラウザーの編集ダイアログボックスで設定を変更して、「OK」をクリックします。
「メインブラウザー」または「サブブラウザー」オプションを選択し、選択したブラウザーがプライマリブラウザーかセカンダリブラウザーのどちらであるかを指定します。
F12 キー（Windows）または Option + F12 キー（macOS）を押すと、ドメインブラウザーが開きます。Ctrl + F12 キー（Windows）または Command + F12 キー（macOS）を押すと、サブブラウザーが開きます。
「一時ファイルを使用してプレビュー」を選択し、プレビューおよびサーバーのデバッグ用に一時的なコピーを作成します。 ドキュメントを直接更新する場合は、このオプションをオフにします。
静的ブラウザープレビューを既定値に設定 これにより、ユーザーはブラウザーでファイルをプレビューするモードを選択できます。 チェックボックスをオンにすると、ユーザーはメニューの「ブラウザーで開く」とショートカットを使用してファイルをプレビューできます。 チェックを外すと、ブラウザーでファイルをプレビューするためにリアルタイムプレビューが使用されます。 デフォルトでは、チェックボックスはオフになっており、ブラウザーでファイルをプレビューするためにリアルタイムプレビューが使用されます。
ライブビュー内でのページのプレビュー
ライブビューが従来の Dreamweaver デザインビューと異なる点は、実際のブラウザー上にページが表示される様子を、より正確にレンダリングできることです。また、これを編集することも可能です。
デザインビューを使用しているときは、いつでもライブビューに切り替えることができます。 ただし、Dreamweaver における従来からのビュー切り替え（コード / 分割 / デザイン）と、ライブビューへの切り替えは意味が異なります。 デザインビューからライブビューに切り替えることは、単にデザインビューを編集可能な状態から「ライブ」状態に切り替えることです。
ライブビューを使用している間、デザインビューの動作は停止しますが、コードビューでの編集操作は引き続き可能です。このため、コードに変更を加えてライブビューの表示を更新すれば変更の結果を確認できます。 ライブビューの使用中は、ライブコードを確認するための追加オプションが有効になります。 これはライブコードビューと呼ばれ、当該ページをレンダリングするためにブラウザーで実行される実際のコードが表示されます。 ライブビューと同じく、ライブコードビューも編集不可能なビューです。
ライブビューのもう 1 つのメリットは、JavaScript の実行を停止する機能を備えていることです。 例えば、ユーザーの操作に反応して行のカラーが変化するよう jQuery ベースのテーブルを設定している場合、ライブビューにおいて行をマウスでポイントするなどの操作を実行するとテーブルが反応します。 その時点で JavaScript の実行を停止すると、ライブビュー上のページは現在の状態のまま動かなくなります。 これにより、停止した状態で CSS や JavaScript に変更を加え、ページの表示を更新して変更結果を確認することが可能になります。 ライブビューの JavaScript 停止機能は、従来のデザインビューでは表示できない、ポップアップメニューなどインタラクティブなエレメントの状態が変化したときのプロパティについて、確認や変更の作業が必要な場合に便利です。
ページをライブビューでプレビューするには：
現在のビューが、デザインビュー（表示／デザイン）またはコードやデザインの分割ビュー（表示／コードとデザイン）のいずれかになっていることを確認します。
「ライブビュー」ボタンをクリックします。
（オプション）コードビュー、CSS スタイルパネル、外部 CSS スタイルシート、その他の関連ファイルなどに対して変更を加えます。
ライブビューは編集不可能ですが、他の領域（例えば、コードビューの CSS スタイルパネルなど）で編集操作を実行してからライブビュー内をクリックすると、変更の結果が表示に反映されます。
関連ファイル（CSS スタイルシートなど）をドキュメント上部の関連ファイルツールバーから開くと、ライブビューからフォーカスを外すことなく関連ファイルに対する作業ができます。
コードビューまたは関連ファイルに対して変更を加えた場合は、ドキュメントツールバーの「更新」ボタンをクリックするか F5 キーを押して、ライブビューの表示を更新します。
編集可能なデザインビューに戻るには、ライブビューボタンをもう一度クリックします。
ライブコードのプレビュー
ライブコードビューに表示されるコードは、ブラウザーでページソースの表示を実行した場合に表示されるコードに近い内容です。 ただし、ブラウザーのページソース表示は現在表示しているページのソースを見るだけの静的なものであるのに対し、ライブコードビューの表示は動的であり、ライブビューでページを操作するとそれに応じてコードが変化します。
現在のビューがライブビューになっていることを確認します。
「ライブコード」ボタンをクリックします。
当該ページを実行する際にブラウザーで使用されると考えられる実際のコードが表示されます。 このコードは黄色でハイライト表示され、編集はできません。
ページ上のインタラクティブなエレメントを操作する場合は、ライブコードによってコード内の動的な変更がハイライト表示されます。
ライブコードでの変更のハイライト表示をオフにするには、表示／ライブビューオプション／ライブコードで変更をハイライト表示を選択します。
編集可能なコードビューに戻るには、「ライブコード」ボタンをもう一度クリックします。
ライブコードの環境設定を変更するには、編集／環境設定（Windows）または Dreamweaver／環境設定（macOS）を選択し、コードカラーリングカテゴリを選択します。
JavaScript の停止
次のいずれかの操作を実行します。
F6 キーを押します。
ライブビューボタンのポップアップメニューから、「JavaScript の停止」を選択します。
ドキュメント上部の情報バーに、JavaScript が停止されていることが表示されます。 情報バーを閉じるには、閉じるリンクをクリックします。
ライブビューのオプション
ライブビューボタンのポップアップメニュー、または表示／ライブビューオプションメニュー項目には、JavaScript の停止のほかにもいくつかのオプションがあります。
JavaScript の停止 JavaScript の影響を受けるエレメントを現在の状態のまま停止します。
JavaScript を無効にする JavaScript を無効にしてページを再描画し、ブラウザーの設定で JavaScript が有効になっていない場合と同様の表示にします。
プラグインを無効にする プラグインを無効にしてページを再描画し、ブラウザーの設定でプラグインが有効になっていない場合と同様の表示にします。
ライブコードで変更をハイライト表示 ライブコードでの変更のハイライト表示をオンまたはオフに切り替えます。
新規タブでライブビューページを編集 ブラウザーナビゲーションツールバーまたはリンク先を表示機能を使用して参照しているサイトドキュメント用の新しいタブを開きます。 新しいタブを作成するには、最初にドキュメントを参照してから「新規タブでライブビューページを編集」を選択する必要があります。
リンク先を表示 ライブビューで次にクリックするリンクをアクティブにします。 または、Control キーを押しながらライブビューのリンクをクリックして、リンクをアクティブにすることもできます。
リンク先を連続表示 ライブビューのリンクを無効に戻すか、ページを閉じるまで、連続してリンクをアクティブにします。
自動でリモートファイルを同期 ブラウザーナビゲーションツールバーの更新アイコンをクリックしたときに、ローカルファイルとリモートファイルを自動的に同期します。 両方のファイルが同期するように、更新の前に Dreamweaver によってファイルがサーバーに配置されます。
ドキュメントソースにテストサーバーを使用 動的ページ（ColdFusion ページなど）で主に使用されるオプションであり、動的ページに対しては初期設定でオンになっています。 このオプションがオンの場合は、ライブビュー表示のソースファイルとして、サイトのテストサーバー上にあるバージョンが使用されます。
ドキュメントのリンクにローカルファイルを使用 動的でないサイトに対しては初期設定でオンになっています。 テストサーバーを使用する動的サイトに対してこのオプションをオンにすると、ドキュメントにリンクされているファイル（CSS ファイル、JavaScript ファイルなど）について、テストサーバー上ではなくローカルにあるバージョンが使用されます。 これにより、関連ファイルに対する変更をローカルで実行し、テストサーバー上にアップロードする前に変更結果を確認できます。 このオプションがオフの場合、関連ファイルはテストサーバー上にあるバージョンが使用されます。
HTTP リクエストの設定 ライブデータ表示の値を入力する詳細設定用のダイアログボックスを開きます。 詳しくは、ダイアログボックスの「ヘルプ」ボタンをクリックしてください。
ブラウザーで開く
任意の時点でページをブラウザーで開くことができます。事前にページを web サーバーにアップロードしておく必要はありません。 必要なプラグインや ActiveX コントロールがブラウザーにインストールされている状態でページをプレビューすると、JavaScript ビヘイビアー、ドキュメント相対リンクと絶対リンク、ActiveX® コントロール、ブラウザー プラグインなど、すべてのブラウザー関連の機能が動作します。
ドキュメントをブラウザーで開く場合、開く前に保存します。保存しないと、最新の変更がブラウザーに表示されません。
ドキュメントツールバーでファイル名を右クリックし、「ブラウザーで開く」をクリックします。
メモ
リストにブラウザーが表示されない場合は、編集／環境設定または Dreamweaver／環境設定（macOS）を選択し、左側にある「ブラウザーでプレビュー」カテゴリーを選択して、ブラウザーを選択します。 詳しくは、ブラウザーでのプレビューの環境設定を参照してください。
リンクをクリックし、ページのコンテンツをテストします。
メモ
サイトルート相対パスでリンクされたコンテンツは、テストサーバーを指定するか、「編集」>「環境設定」>「ブラウザーでプレビュー」で「一時ファイルを使用してプレビュー」オプションを選択しない限り、ローカルブラウザーでドキュメントをプレビューする際に表示されません。これは、サーバーと違って、ブラウザーではサイトのルートを認識できないためです。
メモ
ルート相対パスでリンクされているコンテンツをプレビューする場合は、リモートサーバー上にファイルを置き、ファイル／ブラウザーでプレビューを選択します。
テストが終了したら、ブラウザー内のページを閉じます。
